Site Header and Footer
Native-first, responsive page shell surfaces with sticky, compact, bordered, and centered variants.
Token-aware card
Preview and source are generated from this one example definition.
<card>
<card-body>
<layout-stack gap="var(--space-sm)">
<eyebrow>Documentation rebuild</eyebrow>
<h2>One source of truth</h2>
<p>The rendered preview and copyable markup cannot drift apart.</p>
<button class="form-button btn-primary stack-intrinsic" type="button">
Try CSS Tags
</button>
</layout-stack>
</card-body>
</card>Customize CSS variables
Changes are scoped to this preview and update immediately.
--card-padding --card-radius --card-background .example-scope One source of truth
The rendered preview and copyable markup cannot drift apart.
Header
The native header is canonical. It composes the existing container,
navigation, actions, and layout primitives.
Responsive site header
Narrow the preview to see navigation wrap without losing its semantics.
<header data-site-header="true">
<container pad="var(--space-sm)">
<a data-site-brand="true" href="#home">CSS Tags</a>
<nav data-header-navigation="true" aria-label="Example primary navigation">
<layout-cluster gap="var(--space-md)">
<a href="#docs">Docs</a>
<a href="#examples">Examples</a>
</layout-cluster>
</nav>
<div data-header-actions="true">
<button type="button">Theme</button>
</div>
</container>
</header>
<main>
<layout-pad padding-x="var(--space-md)" padding-y="var(--space-lg)">
<layout-stack gap="var(--space-xs)">
<eyebrow>Documentation</eyebrow>
<strong>Build a clear, resilient interface.</strong>
<p>The content starts with deliberate space below the site navigation.</p>
</layout-stack>
</layout-pad>
</main>The content starts with deliberate space below the site navigation.
<header class="site-header" data-sticky> <container> <a data-site-brand href="/">CSS Tags</a> <nav data-header-navigation aria-label="Primary">...</nav> <div data-header-actions>...</div> </container></header>Equivalent hosts are header.site-header, header[data-site-header], and
site-header. A custom host needs role="banner".
- Sticky:
data-sticky,sticky, or.is-sticky - Elevated:
data-elevated,elevated, or.is-elevated - Compact:
data-size="compact",compact, or.is-compact
Elevation is opt-in; the default header remains a flat bordered surface.
Footer
Responsive site footer
<footer class="site-footer" data-bordered> <container> <div data-footer-grid>...</div> <div data-footer-meta>...</div> </container></footer>Equivalent hosts are footer.site-footer, footer[data-site-footer], and
site-footer. A custom host needs role="contentinfo".
- Border:
data-bordered,bordered, or.is-bordered - Compact:
data-size="compact",compact, or.is-compact - Centered:
data-align="center",centered, or.is-centered
Important tokens
Header customization starts with --site-header-background,
--site-header-color, --site-header-border, --site-header-min-height,
--site-header-padding-inline, --site-header-gap, and
--site-header-actions-gap. At the wrapped breakpoint,
--site-header-wrapped-navigation-padding-block-end preserves breathing room
beneath the second navigation row.
Footer customization starts with --site-footer-background,
--site-footer-color, --site-footer-padding-block, --site-footer-gap,
--site-footer-grid-gap, --site-footer-column-min, and
--site-footer-meta-border.