Hero

A layout component to help you create your hero pages.

NOTE: Click `Show Example` to see the the full size component.

Basic

Automatically centers content on the screen and takes up the entire page `100svh`.

Secondary

Uses a different background color to denote a new section.

Hero with description

Uses Description to describe your Project

Subtract Header height

Sometimes you want your hero section to account for a header use the `exclusionHeight` to calculate the height of the header and subtract it from the 100svh. This can also be useful if you have footers or other content that should take space from the hero section.

True Center

When using Hero sometimes you want the content to be at the center of the screen not the center of the hero. In this case use the `trueCenter` property to add a spacer at the bottom of the Hero pushing the content to the screen true center.