import {Hero} from '@primer/react-brand'Examples
Default
Loading
Images
Hero can display an optional foreground image. Use position to alternate between various layouts.
Loading
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.
Loading
Alignment
Hero text alignment can be adjusted by changing the align prop.
Loading
Component props
Hero
| Name | Type | Default | Description |
|---|---|---|---|
align | 'center', 'start' | 'start' | Optional text alignment |
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 |
|---|---|---|---|
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 |
Forwards all props from the Label component, including size and color.
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 | 'inline-end''block-end' | '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 | 'inline-end''block-end' | 'block-end' | Controls positioning of the child video element |