Box

Stable Available in release assets

Box applies theme-driven inset spacing, boundary, radius, and raised surface to semantic content.

Box primary example

<section class="thin-box">
  <h2>Panel title</h2>
  <p>Supporting detail remains ordinary content.</p>
</section>

Show code

<section class="thin-box">
  <h2>Panel title</h2>
  <p>Supporting detail remains ordinary content.</p>
</section>

Anatomy

Layout wrapper or semantic adapter
Authored semantic content

Variants and sizes

<thin-box>
class="thin-box"
padding, radius, and surface custom-property overrides

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

States and difficult content

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

Long and localized content
Nested layout content
High Contrast and forced colors

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Layout never changes semantic order. Links, landmarks, headings, and document scrolling remain browser-native.

Accessibility

Preserve DOM reading order, use semantic wrappers when landmarks or headings are required, and never rely on layout alone to communicate structure.

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

API

Box is a CSS-only presentational host for inset, border, radius, and surface. Keep landmark and heading semantics on the authored content or a semantic wrapper with class="thin-box".

Behavior tier: css-only

Hosts

Apply the class to the HTML element that supplies the appropriate landmark or content role.

<section class="thin-box">…</section>
<section class="thin-box">…</section>

Custom properties

PropertyDefaultDescription

--thin-box-paddingvar(--thin-space-m)Inset padding around the content.

--thin-box-radiusvar(--thin-radius-m)Corner radius of the box.

--thin-box-surfacevar(--thin-color-surface-raised)Background surface role for the box.

Examples

Raised panel

Panel title

Supporting detail remains ordinary content.

<section class="thin-box">
  <h2>Panel title</h2>
  <p>Supporting detail remains ordinary content.</p>
</section>

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

/layouts.css

Dependencies: None

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

Stability evidence

Canonical public API and complete documentation: test:tests/unit/release/stability.test.ts
Production-asset difficult-content fixture: test:tests/unit/release/stability.test.ts
Recorded cross-theme and environmental review protocol: review:site/src/pages/quality/foundation-layout.astro#review-protocol