Page Structure:
Overview
The hero component has a hero image on one side and content on the other. Hero components support all the same content as sections, in a more narrow content container. On a mobile device the image and content will move from side by side to one above the other.
In the FlexEditor, heroes have a "content" section just like sections do. They also have image and "image alt" options. Its ok to leave the "image alt" empty if the image is considered decorative. If the image conveys information needed to understand the content of the page, you should add alt text describing the image.
This is a hero with some text.
Config
Heroes have a config section with a number of options. All options from sections are (should be, but are not currently) supported on heroes as well.
The options
everything from sections
Image alignment: switches the image to be on the left side (with content on the right), or control the image's vertical alignment.
Image Border Radius: border radius for the hero image in pixels.
Image Border Color: hex color for the hero image border (e.g. #D4450C).
Image Border Size: border width for the hero image in pixels.
Image Overhang: a CSS value (e.g. 5rem, 10%) that extends the image beyond the content area. Percentage values are relative to the grid column width, making them responsive. The section clips the overflow to prevent horizontal scrollbars. Overhang is disabled on mobile.
Examples
Hero with image border styling. This example uses a blue border with rounded corners to frame the image.
hero with image on the left
hero with image on the right. notice that if there is a lot of text the hero image is vertically centered. this applies to the "left" and "right" alignment options.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan libero eget viverra elementum. Fusce placerat ultrices pharetra. Etiam efficitur tempus volutpat. Sed fringilla, est a mollis placerat, lacus ante accumsan erat, in commodo sem eros et ante. Donec ut aliquet nunc. Nam condimentum, elit at sodales dictum, ex risus cursus eros, at dapibus dui urna at orci. Aenean ullamcorper elit at tellus scelerisque egestas. Proin non tincidunt odio, eget consequat elit. Maecenas rutrum mauris quis justo efficitur, ac elementum massa posuere. Maecenas venenatis nisl eget eleifend molestie. Fusce maximus id leo in rhoncus.
Integer sit amet ante placerat, elementum nibh laoreet, gravida ligula. Donec id tempus libero, at semper ligula. In ut purus non sem tristique iaculis quis non dui. Aliquam eleifend diam sit amet tincidunt interdum. Aliquam erat volutpat. Proin vitae ullamcorper mauris. Aenean cursus lorem turpis. Aenean finibus tincidunt ante, non molestie ex lacinia sed. Curabitur egestas varius massa, in scelerisque ex condimentum et. Duis mattis posuere nulla.
Curabitur at rhoncus lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas scelerisque felis in lorem iaculis, non porta tellus aliquam. Sed tristique eget libero eu tempus. Nulla at convallis urna. Morbi suscipit nisl rhoncus mattis viverra. Donec scelerisque risus ac turpis tincidunt commodo. Aliquam eu nibh felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt nisi ac tempor lobortis. Cras sit amet varius ligula, id tincidunt nunc.
you can alternatively specify the image prefer the "top left", "bottom left", "top right", or "bottom right"
this is top left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan libero eget viverra elementum. Fusce placerat ultrices pharetra. Etiam efficitur tempus volutpat. Sed fringilla, est a mollis placerat, lacus ante accumsan erat, in commodo sem eros et ante. Donec ut aliquet nunc. Nam condimentum, elit at sodales dictum, ex risus cursus eros, at dapibus dui urna at orci. Aenean ullamcorper elit at tellus scelerisque egestas. Proin non tincidunt odio, eget consequat elit. Maecenas rutrum mauris quis justo efficitur, ac elementum massa posuere. Maecenas venenatis nisl eget eleifend molestie. Fusce maximus id leo in rhoncus.
Integer sit amet ante placerat, elementum nibh laoreet, gravida ligula. Donec id tempus libero, at semper ligula. In ut purus non sem tristique iaculis quis non dui. Aliquam eleifend diam sit amet tincidunt interdum. Aliquam erat volutpat. Proin vitae ullamcorper mauris. Aenean cursus lorem turpis. Aenean finibus tincidunt ante, non molestie ex lacinia sed. Curabitur egestas varius massa, in scelerisque ex condimentum et. Duis mattis posuere nulla.
Curabitur at rhoncus lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas scelerisque felis in lorem iaculis, non porta tellus aliquam. Sed tristique eget libero eu tempus. Nulla at convallis urna. Morbi suscipit nisl rhoncus mattis viverra. Donec scelerisque risus ac turpis tincidunt commodo. Aliquam eu nibh felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt nisi ac tempor lobortis. Cras sit amet varius ligula, id tincidunt nunc.
you can alternatively specify the image prefer the "top left", "bottom left", "top right", or "bottom right"
this is bottom left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan libero eget viverra elementum. Fusce placerat ultrices pharetra. Etiam efficitur tempus volutpat. Sed fringilla, est a mollis placerat, lacus ante accumsan erat, in commodo sem eros et ante. Donec ut aliquet nunc. Nam condimentum, elit at sodales dictum, ex risus cursus eros, at dapibus dui urna at orci. Aenean ullamcorper elit at tellus scelerisque egestas. Proin non tincidunt odio, eget consequat elit. Maecenas rutrum mauris quis justo efficitur, ac elementum massa posuere. Maecenas venenatis nisl eget eleifend molestie. Fusce maximus id leo in rhoncus.
Integer sit amet ante placerat, elementum nibh laoreet, gravida ligula. Donec id tempus libero, at semper ligula. In ut purus non sem tristique iaculis quis non dui. Aliquam eleifend diam sit amet tincidunt interdum. Aliquam erat volutpat. Proin vitae ullamcorper mauris. Aenean cursus lorem turpis. Aenean finibus tincidunt ante, non molestie ex lacinia sed. Curabitur egestas varius massa, in scelerisque ex condimentum et. Duis mattis posuere nulla.
Curabitur at rhoncus lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas scelerisque felis in lorem iaculis, non porta tellus aliquam. Sed tristique eget libero eu tempus. Nulla at convallis urna. Morbi suscipit nisl rhoncus mattis viverra. Donec scelerisque risus ac turpis tincidunt commodo. Aliquam eu nibh felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt nisi ac tempor lobortis. Cras sit amet varius ligula, id tincidunt nunc.
you can alternatively specify the image prefer the "top left", "bottom left", "top right", or "bottom right"
this is top right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan libero eget viverra elementum. Fusce placerat ultrices pharetra. Etiam efficitur tempus volutpat. Sed fringilla, est a mollis placerat, lacus ante accumsan erat, in commodo sem eros et ante. Donec ut aliquet nunc. Nam condimentum, elit at sodales dictum, ex risus cursus eros, at dapibus dui urna at orci. Aenean ullamcorper elit at tellus scelerisque egestas. Proin non tincidunt odio, eget consequat elit. Maecenas rutrum mauris quis justo efficitur, ac elementum massa posuere. Maecenas venenatis nisl eget eleifend molestie. Fusce maximus id leo in rhoncus.
Integer sit amet ante placerat, elementum nibh laoreet, gravida ligula. Donec id tempus libero, at semper ligula. In ut purus non sem tristique iaculis quis non dui. Aliquam eleifend diam sit amet tincidunt interdum. Aliquam erat volutpat. Proin vitae ullamcorper mauris. Aenean cursus lorem turpis. Aenean finibus tincidunt ante, non molestie ex lacinia sed. Curabitur egestas varius massa, in scelerisque ex condimentum et. Duis mattis posuere nulla.
Curabitur at rhoncus lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas scelerisque felis in lorem iaculis, non porta tellus aliquam. Sed tristique eget libero eu tempus. Nulla at convallis urna. Morbi suscipit nisl rhoncus mattis viverra. Donec scelerisque risus ac turpis tincidunt commodo. Aliquam eu nibh felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt nisi ac tempor lobortis. Cras sit amet varius ligula, id tincidunt nunc.
you can alternatively specify the image prefer the "top left", "bottom left", "top right", or "bottom right"
this is bottom right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan libero eget viverra elementum. Fusce placerat ultrices pharetra. Etiam efficitur tempus volutpat. Sed fringilla, est a mollis placerat, lacus ante accumsan erat, in commodo sem eros et ante. Donec ut aliquet nunc. Nam condimentum, elit at sodales dictum, ex risus cursus eros, at dapibus dui urna at orci. Aenean ullamcorper elit at tellus scelerisque egestas. Proin non tincidunt odio, eget consequat elit. Maecenas rutrum mauris quis justo efficitur, ac elementum massa posuere. Maecenas venenatis nisl eget eleifend molestie. Fusce maximus id leo in rhoncus.
Integer sit amet ante placerat, elementum nibh laoreet, gravida ligula. Donec id tempus libero, at semper ligula. In ut purus non sem tristique iaculis quis non dui. Aliquam eleifend diam sit amet tincidunt interdum. Aliquam erat volutpat. Proin vitae ullamcorper mauris. Aenean cursus lorem turpis. Aenean finibus tincidunt ante, non molestie ex lacinia sed. Curabitur egestas varius massa, in scelerisque ex condimentum et. Duis mattis posuere nulla.
Curabitur at rhoncus lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas scelerisque felis in lorem iaculis, non porta tellus aliquam. Sed tristique eget libero eu tempus. Nulla at convallis urna. Morbi suscipit nisl rhoncus mattis viverra. Donec scelerisque risus ac turpis tincidunt commodo. Aliquam eu nibh felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt nisi ac tempor lobortis. Cras sit amet varius ligula, id tincidunt nunc.
Image Overhang
The image overhang option extends the hero image beyond the content area by a configurable CSS value (e.g. 5rem, 10%). Percentage values are relative to the grid column width, so they scale responsively. The section uses overflow hidden to prevent horizontal scrollbars.
Hero with image overhang on the right. The image extends 20% beyond the content area to the right, creating a dramatic visual effect.
Hero with image overhang on the left. The image extends 20% beyond the content area to the left.