Header Section
Demo
Marketing
Header
Header description
Marketing
Header with image
This is the header with image
Props
| Name | Type | Description |
|---|---|---|
title | string | The title text of the header section. |
description | string | Optional description text. |
eyebrow | string | Optional eyebrow text, typically a short, uppercased introductory text. |
image | { src: string; alt: string; sizes?: string } | Optional background image with source, alt text, and sizes. |
imageOverlay | boolean | Toggles the presence of an image overlay for styling. |
children | React.ReactNode | Additional child elements to be rendered in the header. |
classNames | { root?: string; textBlock?: string; eyebrow?: string; title?: string; description?: string; image?: string; imageOverlay?: string } | Class names for custom styling of various parts of the header section. |
Styles
The component uses utility classes for styling, which can be customized through the classNames prop. Specific style classes include:
root: The main container of the header.textBlock: The container for text elements (eyebrow, title, and description).eyebrow: The styling for the eyebrow text.title: The styling for the title.description: The styling for the description text.image: The styling for the background image.imageOverlay: The styling for the image overlay.