Skip to content

Cover

Preview Available in release assets

Keep a lead message centered between supporting content and actions.

Cover primary example

Show code
<section class="thin-cover" style="--thin-cover-min-block: 16rem">
  <p>Workshop series</p>
  <h2 data-cover="center">Plan your first field trip</h2>
  <p><a href="/layouts/">Browse examples</a></p>
</section>

Anatomy

  • Element with thin-cover class
  • Leading content
  • Child with data-cover="center"
  • Trailing content

Variants and sizes

  • Default cover
  • data-cover="center"
  • Local minimum block size

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Short content
  • Content taller than the minimum
  • Narrow viewport
  • 200% zoom

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

This layout owns no JavaScript behavior. Reading order, focus order, links, and scrolling stay native.

Accessibility

Layout changes position, never meaning. Keep source order logical, because it is the reading and focus order at every size.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Add class=thin-cover to a section. The first child sits at the start, the last at the end, and a child with data-cover=center takes the remaining space around it. Set --thin-cover-min-block to change the minimum block size.

Behavior tier: css-only

Custom properties

PropertyDefaultDescription
--thin-cover-min-block100svbMinimum block size of a Cover.

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts