02 / PAGE AND OVERLAYS HEADERS
Page headers and intro blocks set the stage for individual pages or sections. They provide orientation, establish context, and highlight key messages. Internal pages headers don't have a frame divider, and they should maintain a consistent color to ensure visual continuity and clarity.
Hero Text Header (Light): Bold, centered heading with supporting subtext, ideal for strong openings and key messages. The rest of the page remains off-white.
SUNT IN CULPA QUI OFFICIA MOLLIT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium venenatis enim non molestie. Phasellus non commodo enim.
Hero Text Header (Dark): Bold, centered heading with supporting subtext, ideal for strong openings and key messages. The rest of the page remains dark blue.
SUNT IN CULPA QUI OFFICIA MOLLIT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium venenatis enim non molestie. Phasellus non commodo enim.
Navigation Header: Hero section with a title and anchored navigation links, designed to guide readers directly to key sections for faster content discovery. The rest of the page remains off-white.
CTA Header: Hero section with a title and supporting subtitle, followed by call-to-action buttons that guide readers to key sections or next steps. The rest of the page remains off-white.
Media CTA Header: Hero section with an image or video on the left and a title with supporting subtitle on the right, followed by call-to-action buttons that guide readers to key sections or next steps. The rest of the page remains off-white.
No Gradient Background (light): Hero section with an image or video on the left and a title with supporting subtitle on the right, followed by call-to-action buttons that guide readers to key sections or next steps. No gradient is used in the background, as this layout is intended for visuals that already include the gradient.
No Gradient Background (Dark): Hero section with an image or video on the left and a title with supporting subtitle on the right, followed by call-to-action buttons that guide readers to key sections or next steps. No gradient is used in the background, as this layout is intended for visuals that already include the gradient.
Navigation Header (Centered): Hero section with a centered title and anchored navigation links, designed to guide readers directly to key sections for faster content discovery. The rest of the page remains off-white.