Hero components
Hero billboard
The hero billboard component is a full width banner with an image background and a slot for content. It includes options for height, content placement, opacity, and image background position. The image can be uploaded or selected from the media library.
It also has a toggle to overlap the header, which places it behind the menu if it is the first item on the page. To adjust this for changes to the menu height, you can modify the --navbar-height variable in theme.css.
Hero billboard full screen
This is a hero billboard at full screen, with the content left center.
Hero billboard large
This is a hero billboard at large, with the content center, and overlay opacity set to 40%.
Hero billboard large
This is a hero billboard at large, with the content bottom left, and overlay opacity set to 60%.
Hero billboard ribbon
This is a hero billboard at ribbon, with the content left bottom, and overlay opacity set to 75%.
Hero CTA
The Hero CTA component is a full-width call to action banner with a heading, description, and slot for buttons. Options are heading level, text alignment, background color and optional image for the background.
Hero with image background
Lorem ipsum dolor sit amet.
Hero with primary background
Lorem ipsum dolor sit amet.
Hero with no background
Lorem ipsum dolor sit amet.
Hero with secondary background
Lorem ipsum dolor sit amet.
Hero with accent background
Lorem ipsum dolor sit amet.
Hero with muted background
Lorem ipsum dolor sit amet.
Hero with inverted background
Lorem ipsum dolor sit amet.
Hero side-by-side
The hero side-by-side component is a two-column element with an image in one column and a slot for content in the other column. It can be used inside of a section to contain the width, or without one to make it full width.
The component has many options to control the layout and spacing, including the gap between items, content justification, direction on mobile, top and bottom padding, image aspect ratio, image position, and image border radius.
Side by side hero
A side-by-side hero with the image on the left with a 4 x 3 aspect ratio and the content set to justify center.
Side by side hero
A side-by-side hero with the image on theright left with a 3 x 2 aspect ratio and the content set to justify top.
Side by side hero
A side-by-side hero with the image on the left with a 16 x 9 aspect ratio and the content set to justify bottom.