Text and image

Desktop view

Mobile view

SVG icons instead of normal images

Illustrations in SVG format

Live example

Created example

How it works

Many elements and styling options are available in this versatile component.

The component allows you to create text with or without an image.
SVG icons can be added via the icon picker instead of normal images.
Illustrations in SVG format can be added via the illustrations picker
If needed a background color can be selected.
It is also possible, to choose where to place the image.
- Horizontal alignment defines whether the image will be to the left, centered or to the right.
- Vertical alignment defines if the image is displayed on the same level as the headline, below or above the first headline.
- And finally, the text can be wrapped around the image or it can be shown next to the image.
The component also allows you to create an additional text area below the "Text & Image" component, which will be shown when the "Show more" link has been clicked. Only text can be added to this area.

Basic rule for images

Use the format jpg
The resolution in the width should be at least 2580px

Detailed information

Basic rule for footnotes

At end of content

Use the header 'Footnote'

Use numbers

Example

Crosslinks

Note

If you want to use images from the database for the next publishing job, please mention the ID of the image when placing the order.

Use of copy/paste

Text from word or powerpoint should be pasted with the "paste functionality". This way you can exclude the risk of importing hidden formats.

Accessibility

The alternative text needs to convey the same meaning as the image so that if someone cannot see the image, they get the important information.

Use of original images

Should be used very scarcely as it negatively impacts page load time due to increased page weight. Any use of this must be verified with the digital project manager.

Link behind image

Links behind an image are not forbidden as such. It is essential to make sure for every visitor that it is clear where the link leads to. The goal is to ensure that the end user knows what the purpose of the link is.

Accordingly, on the one hand, the alternative text must indicate for the visually impaired where the link goes and, on the other hand, from a usability point of view, it must be ensured that the link behind the image is pointed out in context or that there is a visible link next to or below the image.