Overview
SurfaceBox is a lightweight <div>-based primitive for creating styled boxes — callouts, panels, highlighted regions, card-style containers — within content flow. It shares the same background variant system as LayoutSection but without section semantics or inner Container framing. SurfaceBox applies overflow-hidden by default so content clips cleanly to any border-radius applied via class.
Rounding and padding are applied via Tailwind utilities on class, giving callers full control over the exact values without constraining them to a fixed set.
Who this is for
- Implementors building callout boxes, card panels, or highlighted content regions
- Developers composing section components inside constrained surfaces (e.g., a rounded CTA card)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
background | "default" | "soft" | "strong" | "contrast" | "inverted" | "primary" | "secondary" | "tertiary" | "default" | Surface background variant |
class | string | — | Additional CSS classes (use for rounding, padding, and other styling) |
All other HTML attributes (id, aria-*, data-*, etc.) are forwarded to the root <div> via attribute passthrough.
When to use
- SurfaceBox — styled box within content flow (callout, card-like panel, highlighted region). Apply rounding and padding via Tailwind utilities on
class(e.g.,class="rounded-xl p-lg"). - LayoutSection — semantic
<section>with inner Container framing for full-width page sections - Container — pure width/gutter constraint wrapper with no visual styling
CSS API
BEM root class: .surface-box
Background variants come from shared .surface--bg-* classes in components.css.
The root element applies overflow-hidden by default. This ensures content clips to any border-radius applied via class. If child elements use margin-bottom spacing, that margin may be clipped — apply spacing on outer wrappers instead.