Page Hero

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

link text

Astro

  <PageHero as="header" textAlign="center">
    <div class="space-y-20">
      <h1 class="text-4xl font-bold">{data.headline}</h1>
      <p class="text-lg">{data.short_text_area}</p>
      <Button href={data.link.href}>{data.link.text}</Button>
    </div>
  </PageHero>

Compiled

  <header data-layout="SplitBlock" data-component="Page Hero" class="grid relative p-20 lg:p-40 text-center">
    <div>
      <div class="relative z-20 space-y-8">
        <div class="space-y-20">
          <h1 class="text-4xl font-bold">Lorem ipsum dolor sit amet</h1>
          <p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <a href="https://google.com" data-component="Button" class="btn-contained">link text</a>
        </div>
      </div>
    </div>
  </header>

API Reference

The following are the props that can be passed to the page block.

Prop	Type	Default
textAlign The justification of text elements.	"left" | "center"	"left"
verticalAlign The vertical alignment of all elements.	"top" | "center" | "bottom"	"top"
background The background color of the whole page block.	"white" | "light-blue" | "dark-gray"	"white"
backgroundImage An object containing the image asset information. See Image Figure component for details, linked below.	asset object	—
asset An object containing the image asset information. See Image Figure component for details, linked below.	asset object	—
breadcrumbs Links that display within the hero as breadcrumbs.	array	—
breadcrumb.link	object	—
breadcrumb.link.href	string	—
breadcrumb.link.text	string	—

For information on how to use the asset object, see the Image Caption component:

Image Caption

Examples

Background Color, Light

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

link text

Astro

  <PageHero as="header" textAlign="center" background="light-blue">
    <div class="space-y-20">
      <h1 class="text-4xl font-bold">{data.headline}</h1>
      <p class="text-lg">{data.short_text_area}</p>
      <Button href={data.link.href}>{data.link.text}</Button>
    </div>
  </PageHero>

Background Color, Dark

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

link text

Astro

  <PageHero as="header" textAlign="center" background="dark-gray">
    <div class="space-y-20">
      <h1 class="text-4xl font-bold">{data.headline}</h1>
      <p class="text-lg">{data.short_text_area}</p>
      <Button href={data.link.href}>{data.link.text}</Button>
    </div>
  </PageHero>

Background Image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

link text

Astro

  <PageHero as="header" textAlign="center" backgroundImage={data.photo_wide}>
    <div class="space-y-20">
      <h1 class="text-4xl font-bold">{data.headline}</h1>
      <p class="text-lg">{data.short_text_area}</p>
      <Button href={data.link.href}>{data.link.text}</Button>
    </div>
  </PageHero>

With Breadcrumbs & an Image, Reversed

Home About Us Our Team

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

link text

Astro

  <PageHero
    as="header"
    breadcrumbs={breadcrumbs}
    asset={data.image}
    split="1/2"
    reverse
  >
    <div class="space-y-20">
      <h1 class="text-4xl font-bold">{data.headline}</h1>
      <p class="text-lg">{data.short_text_area}</p>
      <Button href={data.link.href}>{data.link.text}</Button>
    </div>
  </PageHero>