Hero

Use the Hero component to render a full-width banner on a webpage
  • Experimental
  • Review pending by accessibility team
import {Hero} from '@primer/react-brand'

Examples

Default

Alignment

Hero text alignment can be adjusted by changing the align prop.

Component props

Hero

NameTypeDefaultDescription
heading RequiredstringPrimary heading, which defaults to a H1
primaryAction RequiredObjectPrimary call to action
secondaryActionObjectOptional secondary call to action
align'center', 'start''start'Optional text alignment
descriptionstringOptional accompanying body text
classNamestringSets a custom class on the root element
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node