LandingHero

Above-the-fold landing band.

DesktopPhone

View code

tsx

<LandingHero
	eyebrow="Status pages are here"
	eyebrowHref="/examples/changelog/status-pages"
	title="Know it is down before your users do"
	description={
		<>
			Checks from six regions, alerts that only fire when <strong>two regions agree</strong>,
			and a status page your customers trust.
		</>
	}
	actions={
		<>
			<Button color="brand" mix={[landingCtaChrome()]}>Start free</Button>
			<LinkButton href="/examples/pricing" variant="surface" mix={[landingCtaChrome()]}>
				See pricing
			</LinkButton>
		</>
	}
	note="Five monitors free, no card required."
	proof={<LogoCloud muted>{marks}</LogoCloud>}
	media={
		<ProductFrame stage="panel" lights title="Status" url="status.example.com">
			<StatusBoard />
		</ProductFrame>
	}
/>

<LandingHero
	mediaPlacement="end"
	tone="plain"
	eyebrow="New"
	eyebrowVariant="pill"
	title="Every outage, explained in one page"
	description="…"
	actions={…}
	backdrop={<svg mix={[landingSlowSpin()]}>{rings}</svg>}
	media={…}
/>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { LandingHero } from "@sdxc/ui/landing";

Renders the eyebrow, display title, lead, actions, note and proof in the hero rhythm — 24px, 20px, 32px and 12px between them — and places the media below, beside, or behind that copy. The title starts the outline at level, and headings in below sit one level under it.

Examples

With a release pin and the entrance

Open in a new tab

DesktopPhone

View code

tsx

<LandingHero
	entrance
	title="Build the whole app in one framework"
	description="Routing, data, sessions and jobs, with nothing to wire together."
	actions={
		<>
			<Button color="brand" mix={[landingCtaChrome()]}>Get started</Button>
			<LinkButton href="/docs" variant="surface" mix={[landingCtaChrome()]}>Read the docs</LinkButton>
		</>
	}
	release={<a href="/changelog/8-1">v8.1 — released Oct 28, 2026 →</a>}
/>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`level`	`HeadingLevel`	No	Heading level of the display title. Defaults to the ambient `HeadingScope`'s level, or `1` on a bare page, so the hero owns the page's only `<h1>`.
`align`	`Align`	No	Copy alignment. Defaults to DEFAULT_ALIGN.
`tone`	`Tone`	No	Band fill. Defaults to DEFAULT_TONE.
`mediaPlacement`	`"end" \| "below" \| "background"`	No	Media placement. Defaults to DEFAULT_MEDIA_PLACEMENT.
`eyebrow`	`RemixNode`	No	Short announcement above the title.
`eyebrowVariant`	`EyebrowVariant`	No	Eyebrow look. Defaults to DEFAULT_EYEBROW_VARIANT.
`eyebrowHref`	`string`	No	Turns the eyebrow into a link with a trailing arrow that nudges on hover.
`title`	`RemixNode`	Yes	Display headline; wrap a phrase in `AccentText` to mark it.
`description`	`RemixNode`	No	Lead under the headline; `<strong>` fragments draw in the heading ink.
`actions`	`RemixNode`	No	CTA controls, laid out in a CtaGroup that stacks on phones.
`release`	`RemixNode`	No	A release pin under the actions, such as "v8.1 — released Oct 28", set as mono text on a brand-tinted chip; pass a link to make the pin clickable.
`entrance`	`boolean`	No	Plays the load entrance: eyebrow, title, lead, actions and the rest rise in turn, and the media settles last. Visitors who ask for reduced motion see the hero at rest.
`note`	`RemixNode`	No	One line of microcopy 12px under the actions ("No card required").
`proof`	`RemixNode`	No	Social proof under the actions and note, such as a row of marks.
`media`	`RemixNode`	No	Product media: a framed screenshot, a rendered component, a device.
`backdrop`	`RemixNode`	No	Decoration behind the media — rings or a glow — laid under it and hidden from assistive technology; pair it with `landingSlowSpin()` for motion that stops under reduced motion.
`below`	`RemixNode`	No	Optional below-fold hook rendered under the main hero stack.
`parts`	`PartsProps`	No	Per-part styling for eyebrow, title, lead, actions, and media.

Types

Name	Values	What it decides
`MediaPlacement`	`"end" \| "below" \| "background"`	Where the media slot sits: under the copy at the full measure (text-led), beside it (product-led, where the media is taller than the copy), or as a faded background behind the statement.