import {Hero} from '@primer/react-brand'Examples
Default
Images
Hero can display an optional foreground image. Use position to alternate between various layouts.
GridLine variant
Use variant="gridline" to display the Hero with a contained image, subtle background color, and borders.
The GridLine variants all feature a trailing border by default. Use Box if you need to add one to the top also.
GridLine “Expressive” variant
Use variant="gridline-expressive" for an alternative split-content layout.
The GridLine variants all feature a trailing border by default. Use Box if you need to add one to the top also.
Video
Hero includes support for inserting videos.
Use VideoPlayer, a native <video> element or a YouTube embed as valid children. Similarly to Hero.Image, use the position prop to alternate between various layouts.
Alignment
Hero text alignment can be adjusted by changing the align prop.
Component props
Hero
| Name | Type | Default | Description |
|---|---|---|---|
align | 'center', 'start' | 'start' | Optional text alignment |
variant | 'default''gridline' | 'default' | Visual variants to the Hero. |
enableAnimation | boolean | false | Enables animations for variants and children that support them. |
className | string | Sets a custom class on the root element | |
ref | React.RefObject | Forward a Ref to the underlying DOM node |
Hero.Label
| name | type | default | description |
|---|---|---|---|
variant | 'default''muted' | 'muted' | Specify alternative text appearance |
className | string | Sets a custom class on the root of the label | |
id | string | Sets a custom id on the root of the label | |
ref | React.RefObject | Forward a Ref to the underlying DOM node |
Hero.Heading
| name | type | default | description |
|---|---|---|---|
className | string | Sets a custom class on the root element | |
id | string | Sets a custom id | |
ref | React.RefObject | Forward a Ref to the underlying DOM node |
Forwards all props from the Heading component, including as, size, and weight.
Hero.Description
| name | type | default | description |
|---|---|---|---|
className | string | Sets a custom CSS class | |
variant | 'default''muted' | 'default' | Specify alternative text appearance |
Forwards size and weight props from the Text component.
Hero.PrimaryAction
| name | type | default | description |
|---|---|---|---|
className | string | Primary link custom class | |
href | string | href for primary link | |
as | a, button | a | Applies the underlying HTML element |
Forwards all props from the Button component.
Hero.SecondaryAction
| name | type | default | description |
|---|---|---|---|
className | string | Secondary link custom class | |
href | string | href for secondary link | |
as | a, button | a | Applies the underlying HTML element |
Forwards all props from the Button component.
Hero.Image
| name | type | default | description |
|---|---|---|---|
position | 'block-end''block-end-padded''inline-end''inline-end-padded''inline-start''inline-start-padded' | 'block-end' | Controls positioning of the foreground image |
Forwards all props from the Image component, including src, alt, and aspectRatio.
Hero.Video
| name | type | default | description |
|---|---|---|---|
position | 'block-end''block-end-padded''inline-end''inline-end-padded''inline-start''inline-start-padded' | 'block-end' | Controls positioning of the child video element |
poster | string | URL of the poster image to display before video plays. When set, posterAltText and posterTitle are required | |
posterAltText | string | Alt text for the poster image. Required when poster is set | |
posterTitle | string | Title text displayed on the poster overlay. Required when poster is set |