docs · print medium: screen

registry:ui · Layout

section-card — the content atom

The content atom of the site grammar: bordered card, eyebrow in brand hue, font-nav title, text-pretty summary, body snippet slot.

eyebrow · title · summary · body tone=hero headingLevel

section-card

The content atom of the site grammar: a bordered card, header block (optional eyebrow in brand hue + font-nav title + optional summary), and the body snippet slot. Every page on this site is built from it — and this very canvas page wears two instances right now.

registry:ui

The content atom.

Default tone: the everyday bordered block — eyebrow row, font-nav title, muted text-pretty summary, and the body snippet slot below the hairline.

body snippet heading: h2 tone: default eyebrow on

section-card-usage.svelte svelte

<SectionCard
  eyebrow="registry:ui"
  title="The content atom."
  summary="Default tone: the everyday bordered block — eyebrow row, font-nav title, muted text-pretty summary, and the body snippet slot below the hairline."
>
  <div class="flex flex-wrap gap-3"><span class="pill">body snippet</span></div>
</SectionCard>

law

Anatomy & ToC wiring

Four optional slots — eyebrow, title, summary, body — and three attributes that make the card legible to the toc-engine. The card is the only place a page writes headings: it renders h1 or h2 itself so the level never skips.

headingLevel picks h1 (hero head, one per route) or h2 (the everyday section) — pages never hand-roll their own heading markup on top
family stamps data-family on the section root — the whole-extent marker the ToC spine reads
region stamps a leaf on the root when the body carries NO child regions; headerRegion stamps the header block only when it does — non-overlapping leaves by construction

usage

<script lang="ts">
  import SectionCard from '@ui/section-card.svelte';
</script>

<!-- default tone: h2, muted summary, the everyday content atom -->
<SectionCard eyebrow="Quick start" title="Acquire a Backend." summary="One paragraph of context.">
  <p>Body slot: any content.</p>
</SectionCard>

<!-- hero tone: the inner-page head — h1, clamp-scaled title,
     foreground summary -->
<SectionCard headingLevel={1} tone="hero" eyebrow="registry:ui" title="Hero head">
  <div class="flex flex-wrap gap-3"><span class="pill">pills</span></div>
</SectionCard>

<!-- toc-engine wiring: data-region / data-family build the ToC extents;
     headerRegion gives the header block its own leaf when the body
                     carries child regions -->
<SectionCard family="core" headerRegion="spawn" eyebrow="Core" title="spawn">…</SectionCard>

types

Types

Two tones: the everyday bordered section and the inner-page hero head.

section-card · tones

tone default · h2

quick start

Acquire a Backend.

The everyday content atom: eyebrow row, muted summary, body slot.

body snippet slot

every section on a page

tone hero · h2 (h1 pairs at the route head — S4.1)

registry:ui

The hero head.

Clamp-scaled title, foreground summary — one per route.

hero body

the inner-page head (S4.1 unique-h1 law)

section-card-types-demo.svelte svelte

<script lang="ts">
  import SectionCard from '@ui/section-card.svelte';
</script>

<div class="flex flex-wrap items-start gap-6">
  <div class="flex min-w-64 flex-1 flex-col gap-3 border border-border p-4"><span class="font-nav text-primary text-[11px] uppercase tracking-[0.24em]">tone default · h2</span><SectionCard eyebrow="quick start" title="Acquire a Backend." summary="The everyday content atom: eyebrow row, muted summary, body slot."><p class="text-[13px]">body snippet slot</p></SectionCard><p class="text-muted-foreground text-[12.5px]">every section on a page</p></div>
  <div class="flex min-w-64 flex-1 flex-col gap-3 border border-border p-4"><span class="font-nav text-primary text-[11px] uppercase tracking-[0.24em]">tone hero · h2 (h1 pairs at the route head — S4.1)</span><SectionCard tone="hero" eyebrow="registry:ui" title="The hero head." summary="Clamp-scaled title, foreground summary — one per route."><div class="flex flex-wrap gap-3"><span class="pill">hero body</span></div></SectionCard><p class="text-muted-foreground text-[12.5px]">the inner-page head (S4.1 unique-h1 law)</p></div>
</div>

usage

Usage

Pages never hand-roll heading markup — the card renders h1/h2 itself so levels never skip.

SectionCard usage

<script lang="ts">
  import SectionCard from '@ui/section-card.svelte';
</script>

<!-- default tone: h2, muted summary, the everyday content atom -->
<SectionCard eyebrow="Quick start" title="Acquire a Backend." summary="One paragraph of context.">
  <p>Body slot: any content.</p>
</SectionCard>

<!-- hero tone: the inner-page head — h1, clamp-scaled title,
     foreground summary -->
<SectionCard headingLevel={1} tone="hero" eyebrow="registry:ui" title="Hero head">
  <div class="flex flex-wrap gap-3"><span class="pill">pills</span></div>
</SectionCard>

<!-- toc-engine wiring: data-region / data-family build the ToC extents;
     headerRegion gives the header block its own leaf when the body
                     carries child regions -->
<SectionCard family="core" headerRegion="spawn" eyebrow="Core" title="spawn">…</SectionCard>

a11y

Accessibility

The card owns the heading tree: one h1 per route, h2 sections beneath, no skipped levels.

Attribute	Value	Description
heading structure	h1 \| h2	headingLevel picks the level; the card is the only heading author on a page
data-family / data-region	toc extents	Machine-readable section extents — not user-facing, but keep the pairing consistent for the rail

theming

Theming

Site chrome, not a density-scaled control: the card sizes from the page type ramp and theme tokens only.

quick start

Acquire a Backend.

One paragraph of context.

Body slot at this density.

quick start

Acquire a Backend.

One paragraph of context.

Body slot at this density.

default

quick start

Acquire a Backend.

One paragraph of context.

Body slot at this density.

quick start

Acquire a Backend.

One paragraph of context.

Body slot at this density.

Token	Default	Source
eyebrow	--primary · 0.24em tracking	color
border	border-border hairline	color
tone hero	clamp-scaled title	component

axes

Universal props

The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. The bordered section is a no-own container surface (the tone literal keeps its own grammar beside the axes); the size axis scales the section root, and the content atom's density ADOPTION keeps resolving through the ambient scope channel — an explicit lane now stamps the rung on the root itself. The concentric demo: radius 20 on the section, an auto Card inside computes max(0px, 20px − inset).

SectionCard · universal props

axes joined

one number moves the section

named steps

medium/large resolve through the alias-ladder vars

the concentric chain

radius 20 on the section; the auto card computes max(0px, 20px − 0.875rem)

section-card-universal.svelte svelte

<SectionCard title="axes joined" size={18} density="small">…</SectionCard>

api

API

Props from the SectionCard Props interface — four content slots plus the ToC wiring attributes.

Properties

Property	Type	Default	Description
title *	string	—	The font-nav heading (h1 or h2 by headingLevel).
eyebrow	string	—	Optional eyebrow row in brand hue, tracked 0.24em.
summary	string	—	Optional muted text-pretty lead.
children *	Snippet	—	The body slot below the hairline.
headingLevel	1 \| 2	2	The heading level the card renders.
tone	'default' \| 'hero'	'default' · Own default, not ambient	Everyday bordered section or inner-page hero head.
family	string	—	data-family on the section root (toc-engine parent extent).
region	string	—	data-region on the section root (toc-engine leaf) when the body carries NO child regions.
headerRegion	string	—	data-region on the header block only — the section leaf when the body carries child regions.
class	string	''	Class passthrough to the root.

Universal props

Property	Type	Default	Description
size	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	the base scale — root font-size; parts size in em
shape	'round' \| 'scoop' \| 'bevel' \| 'notch' \| 'square' \| 'squircle' \| 'auto'	'auto' · ambient scope	corner geometry (CSS corner-shape; §14 degrade table)
radius	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	corner size; auto = the concentric broadcast (§3)
density	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	spacing/leading scale over the kernel channels (§4)
color	'primary' \| 'secondary' \| 'error' \| 'warn' \| 'success' \| 'info' \| 'auto' \| number \| string	'auto' · ambient scope	the hue axis of the fixed oklch primary system (§5)
theme	'light' \| 'dark' \| 'system' \| 'auto'	'auto' · ambient scope	light/dark profile; system = the JS-mutable global (§6)
elevation	'level-1' \| 'level0' \| 'level1' \| 'level2' \| 'level3' \| 'level4' \| 'level5' \| 'auto' \| number	'auto' · ambient scope	official M3 levels over the surface ladder (§7)
motion	'reduced' \| 'subtle' \| 'normal' \| 'expressive' \| 'auto' \| number	'auto' · ambient scope	intensity across the motion kernels (§8)

section-card — the content atom

The content atom.

Anatomy & ToC wiring

Types

Acquire a Backend.

The hero head.

Usage

Accessibility

ARIA

Theming

Acquire a Backend.

Acquire a Backend.

Acquire a Backend.

Acquire a Backend.

Universal props

axes joined

named steps

the concentric chain

API

Properties

Universal props