Skip to main content
xtyle

Hero
Info:Media
3

A top-of-page band that composes an eyebrow, heading, text, actions, and media into a hero.
hero banner masthead landing jumbotron splash header

Live demo

live · @xtyle/astro

Hero

Centered hero

Now in beta

Theme anything, instantly

A derivation engine that turns a few colors into a whole, coherent design.

Split hero

For builders

Ship a themed app today

Compose the hero from the primitives you already have, no bespoke layout required.
The app in action

Hero is the top-of-page shape, assembled from the primitives you already have. Drop an Eyebrow, a Heading, a Text, a Cluster of Buttons, and maybe an Image inside it, and they stack into a centered hero with a comfortable measure and generous spacing.

It adds no behavior and no chrome of its own, so it inherits the page's surface and pairs cleanly over a Parallax band; the layout is pure CSS, so the hero renders the same with or without JavaScript. align switches the stack from centered to left-aligned, and split turns it into a two-column content-and-media band that folds back to one column on a narrow screen.

When to use

How this component composes with the rest of the set.

Stack an Eyebrow / Heading / Text / Cluster of Buttons for a centered landing hero.
Set split with a content block and an Image for a product-shot hero that folds to one column on mobile.
Drop a Hero inside a Parallax as the still content layer for a moving hero band.
Set align="start" for a left-aligned hero in a narrower column.

Props

2 props, straight from the manifest.

PropTypeDefaultBindingsDescription
align HeroAlign
center start
center
html svelte astro
The content alignment: `center` (a centered landing hero) or `start` (left-aligned).
split boolean false
html svelte astro
Lays the band out as two columns (content and media) that fold to one column on a narrow screen. Give it two children: a content block and a media block.

Anatomy

The named parts that make up the component, with their selectors.

hero

 xtyle-hero

The band: a centered stack of the composed primitives with generous padding.
--space-5 --space-6 --space-8

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 3/3 consumed tokens produced default register: 299 tokens

Live coverage check against the xtyle-default register (derive(xtyleDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--space-5 --space-6 --space-8

Slots
default
html svelte astro

The hero content, composed from primitives: an Eyebrow, a Heading, a Text, a Cluster of Buttons, and optionally an Image. In split mode, a content block and a media block.

Accessibility
Hero is a presentational band; the structure comes from the primitives inside it, so a Heading at the right level carries the document outline.
The layout is pure CSS and identical with JavaScript off, so nothing about the hero depends on the runtime.

Code

Centered hero

An eyebrow, heading, supporting text, and a pair of actions, stacked and centered.

 
<xtyle-hero>
	<xtyle-eyebrow>Now in beta</xtyle-eyebrow>
	<xtyle-heading level="1">Theme anything, instantly</xtyle-heading>
	<xtyle-text size="lg">A derivation engine that turns a few colors into a whole design.</xtyle-text>
	<xtyle-cluster gap="3">
		<xtyle-button variant="solid">Get started</xtyle-button>
		<xtyle-button variant="subtle">Read the docs</xtyle-button>
	</xtyle-cluster>
</xtyle-hero>
 
<script lang="ts">
	import { Hero, Eyebrow, Heading, Text, Cluster, Button } from "@xtyle/svelte";
</script>

<Hero>
	<Eyebrow>Now in beta</Eyebrow>
	<Heading level={1}>Theme anything, instantly</Heading>
	<Text size="lg">A derivation engine that turns a few colors into a whole design.</Text>
	<Cluster gap={3}>
		<Button variant="solid">Get started</Button>
		<Button variant="subtle">Read the docs</Button>
	</Cluster>
</Hero>
 
---
import Hero from "@xtyle/astro/Hero.astro";
import Eyebrow from "@xtyle/astro/Eyebrow.astro";
import Heading from "@xtyle/astro/Heading.astro";
import Text from "@xtyle/astro/Text.astro";
import Cluster from "@xtyle/astro/Cluster.astro";
import Button from "@xtyle/astro/Button.astro";
---

<Hero>
	<Eyebrow>Now in beta</Eyebrow>
	<Heading level={1}>Theme anything, instantly</Heading>
	<Text size="lg">A derivation engine that turns a few colors into a whole design.</Text>
	<Cluster gap={3}>
		<Button variant="solid">Get started</Button>
		<Button variant="subtle">Read the docs</Button>
	</Cluster>
</Hero>

Split hero

A left-aligned content block beside a media block.

 
<xtyle-hero split align="start">
	<div>
		<xtyle-heading level="1">Ship a themed app today</xtyle-heading>
		<xtyle-text>Compose the hero from the primitives you already have.</xtyle-text>
	</div>
	<xtyle-image src="/screenshot.png" alt="The app in action" ratio="4/3" />
</xtyle-hero>
 
<script lang="ts">
	import { Hero, Heading, Text, Image } from "@xtyle/svelte";
</script>

<Hero split align="start">
	<div>
		<Heading level={1}>Ship a themed app today</Heading>
		<Text>Compose the hero from the primitives you already have.</Text>
	</div>
	<Image src="/screenshot.png" alt="The app in action" ratio="4/3" />
</Hero>
 
---
import Hero from "@xtyle/astro/Hero.astro";
import Heading from "@xtyle/astro/Heading.astro";
import Text from "@xtyle/astro/Text.astro";
import Image from "@xtyle/astro/Image.astro";
---

<Hero split align="start">
	<div>
		<Heading level={1}>Ship a themed app today</Heading>
		<Text>Compose the hero from the primitives you already have.</Text>
	</div>
	<Image src="/screenshot.png" alt="The app in action" ratio="4/3" />
</Hero>