-
Notifications
You must be signed in to change notification settings - Fork 3
Hero
This is the custom hero component for the Libraries. It updated the typography and layout spacing of the hero section to ensure consistency with the overall design system. It also removed the button functionality from the hero.
The hero component consists of a content area and an optional image area. The content area includes eyebrow text, a hero title, and a description. The image area can display a relevant image that complements the content.
There are two variants: Minimal and Overlay. Both can be used with or without an image. The content width automatically adjusts depending on whether an image is present.
The default variant of the hero component. It is designed to be simple and clean, focusing on the content, and can be used with or without an image.
This variant is useful for highlighting important content. It is recommended for landing pages or other key pages where you want to draw attention to a specific action.
| Field | Data Type | Requirement | Description | Note |
|---|---|---|---|---|
| Variant | String | Required | The display variant of the component. | Options: minimal, overlay. Defaults to minimal. |
| Theme | String | Optional | Light or dark theme selection for the hero component. | Enter "light" or "dark". Defaults to light when not set. |
| Field | Data Type | Requirement | Description | Note |
|---|---|---|---|---|
| Eyebrow | String | Optional | A short category or description displayed above the title. | Recommended to limit to 30 characters. |
| Hero Title | String | Required | The main title of the hero. | Recommended to limit to 100 characters for optimal display. |
| Hero Image | Media Image URL | Optional | An image displayed alongside the content. | Defaults to a 16:9 aspect ratio and uses object-fit: cover for proper display. |
| Hero Image Alt Text | String | Conditional | Alt text for the hero image. | Required if Hero Image is used. |
| Hero Image Caption | WYSIWYG | Optional | A caption displayed with the hero image. | Use the text format: Basic HTML. |
| Description | WYSIWYG | Optional | Supporting copy displayed below the hero title. | Use the text format: Basic HTML. |
1024px - When the screen size is smaller than 1024 pixels, the image area appears above the content area.