Hero

The Hero component is a prominent visual element that typically appears at the top of a page to grab the user’s attention. It features a large background image with a parallax effect and can include a title, body text, and actions.

<Hero
  image={{
    src: "https://picsum.photos/seed/dRlrNx7/1232/1968?blur=10",
    alt: "Terror teneo demum consequuntur catena benevolentia stella.",
  }}
  info={{
    title: "Cinnamon Teal",
    body: "Corrumpo asperiores cogo cruentus antiquus sonitus vulariter. Derelinquo et tabernus audax spargo vinco corrumpo cui conor thema. Tabernus thesis copiose adsidue volutabrum suasoria.",
  }}
/>

Features

Alignment

You can control the alignment of the info content within the Hero using the justify and align props.

<Hero
  justify="center"
  align="center"
  image={{
    src: "https://picsum.photos/seed/hwa6AgD/2053/3119?blur=10",
    alt: "Tego amet dedecor combibo turbo sumo adamo tamisium.",
  }}
  info={{
    title: "Stejneger's Petrel",
    body: "Umbra creta theca sapiente aeneus undique sequi molestias cena. Tutamen venia statua conatus. Uredo utilis deripio quaerat.",
  }}
/>

Parallax Effect

The Hero has a subtle parallax effect on the background image by default. You can adjust the intensity of this effect with the parallax prop or disable it entirely by setting it to 0.

<Hero
  parallax={0.25}
  image={{
    src: "https://picsum.photos/seed/0IkpSq2Ndj/1667/1032?blur=10",
    alt: "Triumphus appello articulus non.",
  }}
  info={{
    title: "Bald Eagle",
    body: "Beneficium adiuvo vociferor cribro conservo asperiores eos vindico. Audeo cubo porro neque. Cumque coma corona ait tabgo accusantium videlicet charisma amor.",
  }}
/>

Anatomy

White-crowned Sparrow

Curto atque cohors summa talus. Cultura tubineus adamo ipsum timor cubo circumvenio cogo. Cavus aiunt cedo vigilo sustineo delectatio civis ara voro.

1.StackThe main container for the Hero component.

2.ImageThe background image with a parallax effect.

3.ScrimA semi-transparent layer over the image to improve text readability.

4.ContainerThe container that holds and aligns the info card.

5.CardThe card that displays the info content.

Reference

Props

Name	Type	Default	Description
`image`	`ImageProps`	-	The properties for the background image.
`info`	`InfoProps`	-	The content to display in the info card.
`parallax`	`number`	`0.5`	The parallax effect factor, between 0 and 1.
`justify`	`string`	`"start"`	Horizontal alignment of the info card.
`align`	`string`	`"end"`	Vertical alignment of the info card.

The Hero component also inherits all props from the Stack component.

Tokens

Key	Default Value
`hero.scrim.base.background`	`linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)`
`hero.container.base.paddingTop`	`var(--gpqiqd9)`
`hero.container.base.paddingBottom`	`var(--gpqiqd9)`
`hero.container.base.@media.screen and (min-width: 640px).paddingTop`	`var(--gpqiqdf)`
`hero.container.base.@media.screen and (min-width: 640px).paddingBottom`	`var(--gpqiqdf)`
`hero.container.base.@media.screen and (min-width: 1024px).paddingTop`	`var(--gpqiqdl)`
`hero.container.base.@media.screen and (min-width: 1024px).paddingBottom`	`var(--gpqiqdl)`
`hero.container.base.@media.screen and (min-width: 1366px).paddingTop`	`var(--gpqiqdl)`
`hero.container.base.@media.screen and (min-width: 1366px).paddingBottom`	`var(--gpqiqdl)`
`hero.card.base.maxWidth`	`var(--gpqiqcr)`