Box

Pads its content on all sides, with an optional border.

Example

View Code 
<section class="box" data-gap="lg" data-border>
    <h2>A bordered box</h2>
    <p>Prose inside a box keeps its rhythm; the box only adds room around it.</p>
</section>

When to use it

A box is the thing to reach for when content needs breathing room from its edges: a card body, a callout, a panel in a sidebar. Combine it with a stack inside for the spacing between its children and with a background or border to make it a surface.

How it works

padding on all four sides from data-gap, and a border of --yeti-border-width in --yeti-color-border when data-border is present. Nothing else. Unlike the spacing layouts, a box does not reset its children's margins, so paragraphs inside it keep their prose rhythm.

<div class="box" data-border>
    <div class="stack" data-gap="sm">
        <h3>Title</h3>
        <p>Body</p>
    </div>
</div>

Why this name

There is no plainer word for a padded rectangle. Foundation 6's Callout was a styled box with a colour scheme; the plain one had no name.

Attributes

Attribute Type Values Default Description
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md Padding on every side.
data-border boolean Draw a border of the border width, in the border colour.

Children

No structural requirements.

Tokens

Token Description
--yeti-space-md The default padding.
--yeti-color-border The border color when data-border is set.
--yeti-border-width Width of the border when data-border is set.
Internal tokens (may change between minor versions) - `--_yeti-gap`

Accessibility

  • Purely visual. A box has no semantics; use a section or article element when the content is one.

Browser support

  • Used without guards: nothing beyond the Baseline 2025 floor
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.