This is the title of the impact header

This is the description of the impact header, containing words that form a paragraph of text.

This is the title of the impact header

This is the description of the impact header, containing words that form a paragraph of text.

Image details

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

With excessive text

This is the title of the impact header when there is a lot of text involved

The layout needs to adapt if the text of this description is very long. The layout also needs to account for where users have set a default large text size in their browser. In both cases, this text would be taller than the image. If the layout tried to keep the image the same height as the text it would result in more of the sides of the image being hidden as the image gets taller. Instead, the image is given a maximum height and vertically aligned centrally within the space available.

Image details

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Legacy layout

Some descriptive text.

Legacy layout with background

Legacy layout

Some descriptive text.