There are two possible settings:
- Image size (desktop)
This applies to screen sizes MD, LG, XL, and XXL. - Image size (mobile)
This applies to screen sizes XS and SM.
See also the content section: Basic shapes and screen sizes.
The displayed size of the image can be customized for different screen sizes. This provides more design options, especially for smaller screen sizes on mobile devices.
If an image occupies at least 4 columns in the desktop view, or if “Default” is set here, it automatically occupies the entire column width in the default mobile view.
If an image occupies only 1, 2, or 3 columns in the desktop view, it will occupy twice the column width, i.e. 2, 4, or 6 columns, in the default mobile view.
The following specifications apply to formatters that place the text next to the image:
In the desktop view (screen sizes MD, LG, XL, and XXL), the image uses 4/12 and the text uses 8/12 of the available column width.
In the mobile view (screen sizes XS and SM), the image is no longer placed next to the text, but above it. The image and text take up the entire column width.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
For formatters that place the text above or below the image, the following specification applies:
In the desktop view and the mobile view, the image and text take up the entire column width.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
The following examples show how adjusting the image size affects the layout of a content section. The layout used is Heading on top, image left, text right (floating around image).
The image sizes set for desktop and mobile are “swapped” in these examples, so the first section has the smallest image on desktop but the largest on mobile.
Please note that, depending on the width of the current column, extreme image size settings may not produce good results. Very small image sizes such as (1/12) or (2/12) produce a tiny image in the following examples, while very large image sizes such as (10/12) or (11/12) leave no space for the surrounding text.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
The following example shows how adjusting the image size affects the display of a content section when the text is output above or below the image.
In this case, the image is adjusted to the selected image size and displayed centered.
In this case, the centered display of the image is also used in the mobile version.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.