# LandingSection

> A landing-page band: a `<section>` host that applies landing tone, spacing, and content measure so pages share one rhythm.

```ts
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="tinted" spacing="normal" ruled>
	{children}
</LandingSection>
```

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

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `tone?` | `Tone` | Band fill. Defaults to DEFAULT_TONE. |
| `spacing?` | `Spacing` | Block padding step. Defaults to DEFAULT_SPACING. |
| `align?` | `"start" \| "center"` | Content alignment. Defaults to DEFAULT_ALIGN. |
| `ruled?` | `boolean` | Draws a low-contrast 1px rule along the block-start edge so stacked bands separate cleanly. |
| `variant?` | `"default" \| "frame"` | Outer chrome. Defaults to DEFAULT_VARIANT. |
| `inset?` | `"top" \| "bottom"` | 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` | 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` | 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` | Per-part styling for the measured inner column. |
| `children` | `RemixNode` | 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. |