Image and text (fixed)

Media and text (fixed) paragraph

What

An image with paragraph text in fixed style.

Where

This module can be used anywhere where images are used repetitively to support the text content.

Do

Text
Keep it short.

Images
Use horizontal images only and crop them to have a focal point in the center of the image for optimal responsive scaling. This guarantees that users with any device will understand the picture.

Don't

Text
Avoid splitting the text into multiple paragraphs since this module is not designed to scale with content. Also, don't use multiple CTA buttons but only one; alternatively, use text links. Finally, please note that the module can look ok on a wide desktop screen but bad on a narrower tablet screen.

Images
Use square-shaped images. The image will be more horizontal on larger desktops, larger mobiles, and smaller tablets.

A good example of Image and text (fixed) paragraph
An example where the amount of content is still ok, although pushing the limits.
A bad example of Image and text paragraph
An example where there is too much content.

Text and image group item
Mandatory. Use minimum 1, maximum 4 image & text combination blocks

Item header
Mandatory

Item paragraph
Mandatory

Item image
Mandatory

Background colour
Mandatory, white or light grey

Background colour

When the box colour is light grey, the background of the block area is white.

Fortum wind-power

Design review & requirement clarification

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Background colour

When the box colour is white, the background of the block area is light grey.

Fortum wind-power

Design review & requirement clarification

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Max characters
Header: 40
Paragraph text: 300

To create the module in the CMS

This module is specific to a page and edited via the page template.

  1. Navigate to Manage → Content → Add content → [Content type] → Content paragraph → Text and image

  2. Choose orientation from the dropdown. You can choose to display either image or text on the left first, and the rest of the group items will arrange accordingly.

  3. Required
    3.1 Text and image group item (CMS: Text and image): Add more group items by clicking ‘Add image and text content block’. Remove any add accordion by clicking ‘Remove’.
    3.2 Item header (CMS: Title): Edit by writing into the text field. 3.3 Item paragraph (CMS: Text body): Edit by writing into the text field.
    3.4 Item image: Add by clicking ‘Select images’ and remove by clicking ‘Remove’.
    3.5 Background colour: Select from the dropdown.

  4. Once ready with the page, save it to display the module(s).

Note

See the publishing and managing media section for more information on publishing images and writing ALT text.

Image and text - CMS guide

Support

In case you can't find answers from this guide, you can contact Indiana support.

iCAT

Internet Change Advisory Team
www.fortum.com/indianasupport
icat [at] fortum [dot] com

Revisions