Reusable section layouts designed to structure content, actions, and supporting media across hero and standard sections throughout the page.
Important: To create a full-screen section, add the min-height-100vh class to the first flex child element inside background-color-* that is not nested in an overlay. The outer Section element is intentionally left without a class, allowing it to be used for custom class naming when needed.
Use an H1 for the Hero section, which serves as the primary introductory section at the top of the page and communicates the page’s main purpose. Use the appropriate H2–H6 heading levels for section headings throughout the rest of the page, following a clear semantic hierarchy.
Centered Content
Base
Eyebrow Text
Heading Goes Here
Supporting text reinforces the section heading and provides additional context for the content that follows.