LandingHeader

Eyebrow, chapter title, and lead copy that open a landing band.

Monitoring

Know it is down before your users do

Checks run every thirty seconds from six regions, and an alert only fires when two of them agree.

Status pages now support custom domains

Your status page, on your domain

Point status.yourcompany.com at the page and we issue the certificate.

Alerting

Page the right person, once

Escalation policies follow the on-call rotation, so one failure pages one person.

New

Multi-region checks on every plan

Every monitor now checks from six regions, on the free plan too.

02Incidents

Every incident writes its own timeline

Status changes, acknowledgements and fixes land on one record your postmortem starts from.

View code

tsx

<LandingHeader
	eyebrow="Monitoring"
	description={
		<>
			Checks run every thirty seconds from six regions, and an alert only fires when{" "}
			<strong>two of them agree</strong>.
		</>
	}
>
	Know it is down before your users do
</LandingHeader>

<LandingHeader
	eyebrow="Status pages now support custom domains"
	eyebrowVariant="quiet"
	eyebrowHref="/examples/changelog/custom-domains"
	description="Point status.yourcompany.com at the page and we issue the certificate."
>
	Your status page, on your domain
</LandingHeader>

<LandingHeader eyebrow="Alerting" eyebrowVariant="soft" description="…">
	Page the right person, once
</LandingHeader>

<LandingHeader eyebrow="New" eyebrowVariant="pill" align="center" description="…">
	Multi-region checks on every plan
</LandingHeader>

<LandingHeader
	eyebrow="Incidents"
	eyebrowVariant="numbered"
	eyebrowIndex="02"
	description="…"
>
	Every incident writes its own timeline
</LandingHeader>

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 { LandingHeader } from "@sdxc/ui/landing";

Renders an optional eyebrow, a chapter-sized Heading from children, and an optional lead paragraph. A mono eyebrow sits 0.5rem above the title and a pill 1.5rem; the lead follows 1rem below; the band's body starts --ui-landing-header-space after. The title renders at the enclosing band's heading level: <h2> in a band on a bare page.

Examples

Split, statement and header action

Open in a new tab

DesktopPhone

View code

tsx

<LandingHeader layout="split" eyebrow="Observability" description="…">
	Know what every function did, and why
</LandingHeader>

<LandingHeader tone="statement" subtitle="Every page in under a second.">
	<strong>Status pages that load first.</strong> Even when your app is down.
</LandingHeader>

<LandingHeader action={<LinkButton href="/courses" variant="ghost">See all</LinkButton>}>
	Flagship training
</LandingHeader>

Props

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

Prop	Type	Required	Description
`eyebrow`	`RemixNode`	No	Short label above the title.
`eyebrowVariant`	`EyebrowVariant`	No	Eyebrow look. Defaults to DEFAULT_EYEBROW_VARIANT when an eyebrow is present.
`eyebrowHref`	`string`	No	Turns the eyebrow into a link with a trailing arrow that nudges on hover.
`eyebrowIndex`	`RemixNode`	No	Index a `numbered` eyebrow leads with, such as `"01"`.
`description`	`RemixNode`	No	Supporting copy under the title; `<strong>` fragments draw in the heading ink.
`align`	`"start" \| "center"`	No	Stack alignment. Defaults to DEFAULT_ALIGN; a split or an action aligns start.
`layout`	`"stack" \| "split"`	No	Arrangement of title and lead. Defaults to `"stack"`.
`tone`	`"default" \| "statement"`	No	Title ink. Defaults to `"default"`.
`subtitle`	`RemixNode`	No	A second line at the title's size in the muted ink, inside the heading, so the two lines read as one two-tone heading.
`action`	`RemixNode`	No	A control at the header row's inline end, such as a "See all" link, aligned to the title's last line; it wraps under the title when the row runs out of room.
`parts`	`PartsProps`	No	Per-part styling for eyebrow, title, and description.
`children`	`RemixNode`	Yes	Title copy — rendered through Heading at chapter display size.

Also accepts everything in TagProps<"header">.

Types

Name	Values	What it decides
`Align`	`"start" \| "center"`	Whether the stack stretches start-aligned or centers as one statement.
`Layout`	`"stack" \| "split"`	`stack` sets the eyebrow, title and lead in one column.
`Tone`	`"default" \| "statement"`	`default` sets the whole title in the heading ink.