component :: Hero

The Hero component offers highly flexible, accessible hero sections for landing pages, product sites, and marketing. It supports full, split, and slideshow layouts; accepts image, video, gradient, or canvas backgrounds; provides overlay and text color controls; allows custom aspect ratios and content/media ordering; supports parallax, rounded corners, and a flush layout for the split variant; and is fully slot-based for custom content. (Full size demo.)

Example Hero

This hero uses an animated canvas element as background.

File Name	class	Source
`component.hero.css`	`.hero`	Github

Full layout (default)

The full layout spans the entire viewport with content centered over a background image, video, gradient, or canvas element. Use the height prop to control min-height (in svh units).

Split layout

The Split layout features an asymmetric split (e.g., 70/30, 80/20, etc.) with content on one side and media on the other. The media section fills the available space with an image or video, cropping as needed. The ratio prop defines the grid layout, contentFirst controls the DOM order of content and media, and reversed visually reverses their order (while the grid ratio remains unchanged).

Slideshow layout

The Slideshow layout features rotating content and background (same options available as for the Full layout) with pagination dots. Each slide can have its own media and content.

HTML

Custom properties

The following custom properties are available in the default theme:

Property	Description
`--hero-radius`	Border radius (on/off via `roundCorners` prop).
`--hero-content-padding`	Padding for hero content area.
`--hero-pagination-dot`	Pagination dot size.
`--hero-pagination-dot-color`	Pagination dot background color.
`--hero-pagination-dot-active-color`	Active pagination dot color.
`--hero-pagination-opacity`	Pagination dot default opacity.

Astro component

General props

Prop	Type	Default	Description
`variant`	string	`full`	Layout variant: Full, Split, and Slideshow.
`media`	object	—	Image, video, gradient, or canvas background.
`roundCorners`	boolean	`false`	Whether the hero media has rounded corners.
`textColor`	string	—	Text color (CSS variable or value).
`extraClass`	string	—	Additional CSS classes (see helper classes).

Split variant props

Prop	Type	Default	Description
`ratio`	string	`62/38`	Split ratio, e.g. `70/30`, `40/60`, etc.
`contentFirst`	boolean	`false`	If true, content appears before media in the DOM (left on desktop, top on mobile).
`reversed`	boolean	`false`	Visually reverses the order set by `contentFirst` (does not change DOM order).
`roundCorners`	boolean	`false`	If true, media has rounded corners.
`flush`	boolean	`false`	Removes outer padding from the content section, making text flush with the edge.

Full and slideshow variant props

Prop	Type	Default	Description
`parallax`	boolean	`false`	Parallax effect (full variant only).
`height`	number	—	Sets `min-height` in `svh` (0-100).
`overlayOpacity`	number	`0`	Overlay opacity.
`overlayColor`	string	`--base-950`	Overlay color (CSS var or value).
`roundCorners`	boolean	`false`	If true, hero has rounded corners.
`textColor`	string	—	Text color (CSS var or value).
`slideshowItems`	array	—	Array of objects (see example).
`slideshowAutoplay`	boolean	`true`	Slideshow autoplay.
`slideshowInterval`	number	`5000`	Slideshow interval (ms).
`slideshowTransition`	number	`600`	Slideshow transition speed (ms).

Examples

Animated Canvas

Animated Canvas Hero

This hero uses an animated canvas element as background.

Full Size Examples

---
import Hero from "../../components/Hero.astro";
---
<Hero
  variant="full"
  height={50}
  media={{ type: "canvas", src: "/_js/triangles.js" }}
  overlayOpacity={0.3}
  overlayColor="--primary-950"
  roundCorners
  textColor="--base-0"
>
  <h1>Animated Canvas Hero</h1>
  <p>Organic Delaunay triangles animated with primary colors.</p>
  <a class="bt bt-primary">Full Size Demo</a>
</Hero>

Gradient background

Gradient Background Hero

Showcase your brand with a beautiful, vibrant gradient background.

Full Size Examples

---
import Hero from "../../components/Hero.astro";
---
<Hero
  variant="full"
  height={50}
  media={{
    type: "gradient",
    src: "linear-gradient(120deg, #f0f 0%, #0ff 100%)",
  }}
  overlayOpacity={0.3}
  roundCorners
  textColor="--base-0"
>
  <h1>Gradient Background Hero</h1>
  <p>Showcase your brand with a beautiful, vibrant gradient background.</p>
  <a class="bt bt-lg bt-outline-white mt-md1" href="/demos/hero">Full Size Examples</a>
</Hero>

Background image

Image Background Hero

This hero uses a static image as the background.

Full Size Examples

---
import Hero from "../../components/Hero.astro";
import triangle01 from "../../assets/images/triangles.svg";
---
<Hero
  variant="full"
  height={50}
  media={{ type: "image", src: triangle01, alt: "Background Example" }}
  overlayColor="--primary-950"
  overlayOpacity={0.4}
  roundCorners
  textColor="--base-0"
>
  <h1>Image Background Hero</h1>
  <p>This hero uses a static image as the background.</p>
  <a class="bt bt-lg bt-outline-white mt-md1" href="/demos/hero">Full Size Examples</a>
</Hero>

Slideshow

First Slide
This is the first slide of the slideshow.
Second Slide
This is the second slide of the slideshow.
Third Slide
This is the third slide of the slideshow.

---
import Hero from "../../components/Hero.astro";
import triangle01 from "../../assets/images/triangle-01.svg";
import triangle02 from "../../assets/images/triangle-02.svg";
import triangle03 from "../../assets/images/triangle-03.svg";
---
<Hero
  id="heroSlideshow"
  variant="slideshow"
  height={40}
  overlayOpacity={0.6}
  overlayColor="--primary-950"
  textColor="--base-0"
  roundCorners
  slideshowInterval={4000}
  slideshowTransition={600}
  slideshowItems={[
    {
      media: { type: 'image', src: triangle01, alt: 'Triangle 01' },
    },
    {
      media: { type: 'image', src: triangle02, alt: 'Triangle 02' },
    },
    {
      media: { type: 'image', src: triangle03, alt: 'Triangle 03' },
    },
  ]}>
  <ul>
    <li>
      <h1>First Slide</h1>
      <p>This is the first slide of the slideshow.</p>
    </li>
    <li>
      <h1>Second Slide</h1>
      <p>This is the second slide of the slideshow.</p>
    </li>
    <li>
      <h1>Third Slide</h1>
      <p>This is the third slide of the slideshow.</p>
    </li>
  </ul>
</Hero>

Default split

Split Hero (Content Right)

Default split with content on the right and media on the left.

---
import Hero from "../../components/Hero.astro";
import triangle01 from "../../assets/images/triangles.svg";
---
<Hero
  variant="split"
  roundCorners
  media={{ type: "image", src: triangle01, alt: "Split Example" }}
>
  <h1>Split Hero (Content Right)</h1>
  <p>Default split with content on the right and media on the left.</p>
</Hero>

Content first split

Split Hero (Content First)

This example uses the contentFirst prop to place content before media in the DOM (left on desktop, top on mobile).

---
import Hero from "../../components/Hero.astro";
import triangle01 from "../../assets/images/triangles.svg";
---
<Hero
  variant="split"
  ratio="62/38"
  contentFirst
  flush
  roundCorners
  media={{ type: "image", src: triangle01, alt: "Split Example" }}
>
  <h1>Split Hero (Content First)</h1>
  <p>This example uses the <code>contentFirst</code> prop to place content before media in the DOM (left on desktop, top on mobile).</p>
</Hero>

Content first reversed split

Split Hero (Reversed)

This example uses the reversed prop to visually flip the order of content and media, without changing their DOM order. The flush prop removes left padding.

---
import Hero from "../../components/Hero.astro";
import triangle01 from "../../assets/images/triangles.svg";
---
<Hero
  variant="split"
  ratio="60/40"
  reversed
  flush
  roundCorners
  media={{ type: "image", src: triangle01, alt: "Split Example" }}
>
  <h1>Split Hero (Reversed)</h1>
  <p>This example uses the <code>reversed</code> prop to visually flip the order of content and media, without changing their DOM order. The <code>flush</code> prop removes left padding.</p>
</Hero>