Skip to Content
Reference<Hero>

Image of the default Hero component with big app title, smaller subtitle, an action button to download the app and app's screenshot wrapped with an iPhone bezel

See Hero section tutorial on more details on customizing the <Hero> component.

<Hero
  title="App Title"
  subtitle="Short app description that highlights what the app does and its key value"
  media={
    <Hero.Image
      src="/app_view/screenshot_placeholder.png"
      bezel="iPhone 17 Black"
      alt=""
    />
  }
  badges={
    <>
      <RatingLaurelsBadge
        showStars={true}
        rating={4.9}
        caption="worldwide rating"
      />
      <AppleFeatureLaurelsBadge featureName="App of the Day" />
    </>
  }
  action={<DownloadActionButton size="medium" />}
/>

<Hero> Properties

PropertyValueDescription
titlestring

Main heading for the hero section.

subtitlestring

Supporting text displayed under the title.

titleFontStyle
sanscursivewhimsical

Font style for the title. Defaults to sans.

badgesComponent

Optional badges rendered above the title. There are a few built-in badge components: <RatingLaurelsBadge>, <AppleFeatureLaurelsBadge>, and <LaurelsBadge>. You can also put any custom component as a badge.

media
<Hero.Image><Hero.Video>

Media content rendered alongside the text info. See properties for both <Hero.Image> and <Hero.Video> below.

actionComponent

Optional call to action rendered below the subtitle. <DownloadActionButton> or <ActionButton> components are a good candidates, but you can put any custom component here.

<Hero.Image> Properties

PropertyValueDescription
srcstring

URL of the image to display.

srcset{ src: string; theme: 'dark' | 'light' }[]

Alternative image sources for dark or light mode.

altstring

Alternative text for the image, used for accessibility.

bezel
iPhone 17 BlackiPhone 17 WhiteiPhone 17 LavenderiPhone 17 SageiPhone 17 Mist BlueiPhone 17 Pro Cosmic OrangeiPhone 17 Pro Deep BlueiPhone 17 Pro SilveriPhone Air Sky BlueiPhone Air Light GoldiPhone Air Cloud WhiteiPhone Air Space Black

Specifies the iPhone model bezel to wrap around the screenshot image.

<Hero.Video> Properties

Screen recordings that iOS produces usually have a large file size. It’s a good idea to convert them into a more web-friendly format like MP4 or WebM. Here is an example ffmpeg command to convert a MOV file into WebM:

ffmpeg -i input.mov  -c:v libvpx-vp9 -crf 20 -b:v 0 -an output.webm
PropertyValueDescription
srcstring

URL of the video to display.

srcset{ src: string; theme: 'dark' | 'light' }[]

Alternative video sources for dark or light mode.

altstring

Optional label for the video canvas, used for accessibility.

bezel
iPhone 17 BlackiPhone 17 WhiteiPhone 17 LavenderiPhone 17 SageiPhone 17 Mist BlueiPhone 17 Pro Cosmic OrangeiPhone 17 Pro Deep BlueiPhone 17 Pro SilveriPhone Air Sky BlueiPhone Air Light GoldiPhone Air Cloud WhiteiPhone Air Space Black

Specifies the iPhone model bezel to wrap around the screenshot video.

<EmailForm><Icon>