Skip to content

box.md

Latest commit

 

History

History
99 lines (65 loc) · 3.34 KB

box.md

File metadata and controls

99 lines (65 loc) · 3.34 KB
Raw
raw true
title Box
description Pads its content on all sides, with an optional border.
nav_group Boxes and Stacks
nav_order 1

Box

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

Example

<iframe title="Box, live" srcdoc="<base href="/yeti/"><link rel="stylesheet" href="/yeti/yeti.css"><script type="module" src="/yeti/yeti.js"></script><body style="margin:0;padding:var(--yeti-space-md)"><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>"></iframe>
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.