LandingSection

A landing-page band.

DesktopPhone

View code

tsx

<LandingSection>
	<LandingHeader
		eyebrow="Status pages"
		description={
			<>
				Publish incidents and maintenance from <strong>the dashboard your team already watches</strong>.
			</>
		}
	>
		Tell customers before they ask
	</LandingHeader>
	<CtaGroup>
		<Button color="brand" mix={[landingCtaChrome()]}>Create a status page</Button>
		<LinkButton href="/examples/status" variant="surface" mix={[landingCtaChrome()]}>
			See an example
		</LinkButton>
	</CtaGroup>
</LandingSection>

<LandingSection tone="tinted" spacing="compact" inset>
	<LandingHeader eyebrow="Integrations" description="…">
		Alerts where your team already talks
	</LandingHeader>
</LandingSection>

<LandingSection tone="brand" spacing="cta" align="center" inset>
	<LandingHeader description="…" align="center">
		Five monitors free, forever
	</LandingHeader>
	<CtaGroup>…</CtaGroup>
</LandingSection>

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

Renders a landing band: tone on the <section>, a named container for descendant queries, and a measured inner column. When variant="frame", block padding lives on that column with the dashed rails so the rails run the full band height instead of stopping at the content box.

Examples

tsx

<LandingSection tone="grid" spacing="hero" align="center" variant="frame">
	{children}
</LandingSection>

Props

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

Prop	Type	Required	Description
`tone`	`Tone`	No	Band fill. Defaults to DEFAULT_TONE.
`spacing`	`Spacing`	No	Block padding step. Defaults to DEFAULT_SPACING.
`align`	`"start" \| "center"`	No	Content alignment. Defaults to DEFAULT_ALIGN.
`ruled`	`boolean`	No	Draws a low-contrast 1px rule along the block-start edge so stacked bands separate cleanly.
`variant`	`"default" \| "frame"`	No	Outer chrome. Defaults to DEFAULT_VARIANT.
`inset`	`"top" \| "bottom"`	No	Paints the band as a panel 0.5rem in from the page edges with `--ui-landing-band-radius` (2rem) corners and an inset hairline, so a tone reads as an object on the page rather than a full-bleed stripe.
`flush`	`boolean`	No	Zeroes block padding on a framed column so a flush strip (stats) keeps full-height rails without the section gap. Ignored when `variant` is not `"frame"`.
`level`	`HeadingLevel`	No	Heading level of the band's title, and of every heading placed directly in it. Defaults to one below the enclosing band, else one below the ambient `HeadingScope`, so bands on a bare page render `<h2>` under the hero's `<h1>`.
`parts`	`PartsProps`	No	Per-part styling for the measured inner column.
`children`	`RemixNode`	Yes	Band content — headers, splits, feature grids, and so on.

Also accepts everything in TagProps<"section">.

Types

Name	Values	What it decides
`Inset`	`"top" \| "bottom"`	Whether the band floats as a rounded panel inside the page: `true` rounds every corner, `"top"` / `"bottom"` round only that end so two inset bands join.
`Align`	`"start" \| "center"`	Whether the inner column stretches start-aligned or centers as one statement.
`Variant`	`"default" \| "frame"`	Outer chrome: a plain band, or a framed column with dashed rails and corner markers where a top rule meets them.