Image content block

Guidelines

• Images can be shown in a variety of row types. The first three examples show Content66-row types, containing ImageContentBlocks on one side, and a regular ContentBlock on the other side. The rounded corners are defined on the row. To achieve this, choose any theme on the Content66-row starting with 'row-with-rounded'.
• In the first row, the height of the row is determined by the text content, and the image is cropped to fit within that height. This works well with decorative images with a central focal point. No theme or ImageStyle needs to altered on the ImageBlock to get this effect.
• In the second and third rows, the images aren't cropped. You can achieve this by selecting the ImageStyle 'No transformations' on the ImageContentBlock. Since the entire image will be shown, this technique is useful for showing graphs, for example. Important to know is that this option will only work when you use png-images with a transparent background. If you use a regular jpg-image, the lack of cropping would cause spacing gaps above and below the image, due to the image's aspect ratio being different than the one of its container.

• ImageContentBlocks can also be shown as the only component inside a row, inside a Content12-row or a SmallerFullRowContent-row.
• In this case, make sure you select the ImageStyle 'No transformations'. This will make sure the entire image is shown with its original dimensions. It will also create the rounded corners.

• Lastly, images can be shown in a Content444-row, combined with regular ContentBlocks and/or other ImageBlocks.
• Make sure you select the theme "row-with-spacing-between-columns" on the Content444-row.
• On images that are to be displayed separately in a column (without text); make sure to apply the ImageStyle 'No transformations'. These images will be shown with their original aspect ratio, and rounded corners.
• To display a text block with a header image, use a regular content block that contains an image. You can also display a content block without an image. In these two cases, make sure to apply a theme, containing the correct color, which will also take care of the rounding of the corners.