svelte-kit-vice/web/routes/uix/components/section/+page.svelte

<script lang="ts">
	import { Section, type SectionSize } from '$uix/eidos/components/section';

	const sizes: SectionSize[] = ['sm', 'md', 'lg', 'xl'];
	let size = $state<SectionSize>('lg');
</script>

<div data-uix-canvas-inner>
	<header>
		<div data-uix-eyebrow>Layout · Section</div>
		<h1 data-uix-page-title>Section</h1>
		<p data-uix-page-lede>
			Top-level page section with consistent block-axis padding scaled by
			<code>size</code>.
		</p>
	</header>

	<section>
		<h2>Live example</h2>
		<div style="display: flex; gap: 8px; margin-bottom: 12px">
			{#each sizes as s (s)}
				<label style="display: inline-flex; gap: 4px; align-items: center">
					<input type="radio" name="size" value={s} bind:group={size} />
					<span><code>{s}</code></span>
				</label>
			{/each}
		</div>
		<Section
			{size}
			style="background: var(--color-surface-1); border: 1px dashed var(--color-border); border-radius: 8px"
		>
			<p style="margin: 0; text-align: center">
				Section content (size: <code>{size}</code>).
			</p>
		</Section>
	</section>

	<section>
		<h2>Padding scale</h2>
		<table>
			<thead>
				<tr>
					<th>Size</th>
					<th>Block padding</th>
				</tr>
			</thead>
			<tbody>
				<tr><td><code>sm</code></td><td>var(--space-8) = 32px</td></tr>
				<tr><td><code>md</code></td><td>var(--space-12) = 48px</td></tr>
				<tr><td><code>lg</code></td><td>var(--space-16) = 64px</td></tr>
				<tr><td><code>xl</code></td><td>calc(var(--space-16) * 1.5) = 96px</td></tr>
			</tbody>
		</table>
	</section>

	<section>
		<h2>Props</h2>
		<table>
			<thead>
				<tr>
					<th>Prop</th>
					<th>Default</th>
					<th>Notes</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code>size</code></td>
					<td>'lg'</td>
					<td>sm · md · lg · xl</td>
				</tr>
				<tr>
					<td><code>paddingY</code></td>
					<td>—</td>
					<td>override the size-keyed default</td>
				</tr>
				<tr>
					<td colspan="3"><em>… plus every <code>BoxProps</code> prop</em></td>
				</tr>
			</tbody>
		</table>
	</section>

	<section>
		<h2>Reference</h2>
		<ul>
			<li>
				<strong>radix-themes Section</strong> — same intent (size-keyed block padding
				for vertical rhythm).
			</li>
			<li>
				<strong>HTML <code>&lt;section&gt;</code></strong> — Section is a `&lt;div&gt;`
				in batch 1; wrap with a real <code>&lt;section&gt;</code> when you need landmark semantics.
			</li>
		</ul>
	</section>
</div>