CSS Tags
Search

Theme
Theme creator

Tune semantic inputs, preview them live, then export a trailing CSS layer.

Starting points
Color
Shape and spacing
Typography
Export theme

Load the generated file after css-tags.

Using documentation defaults.
GitHub

Box

A declarative, token-friendly container for spacing, sizing, appearance, and small layout compositions.

Box is the low-level container primitive. Use it when a semantic element needs a few declarative presentation values and a more specialized component would add the wrong meaning.

Public hosts

<box>, [data-box], and .box share the same API. Prefer a semantic native element with data-box when the content already has a natural role.

Three host forms

Each host uses the same attribute contract while retaining its own content and semantic role.
Custom element
Concise for neutral layout regions.
Data host

A semantic article enhanced as a box.

Class host
Useful in class-oriented templates.
 
<box p="var(--space-md)">Custom element</box>
<article data-box p="var(--space-md)">Semantic data host</article>
<div class="box" p="var(--space-md)">Class host</div>

Padding and logical axes

p sets both axes. px and py override the inline and block axes independently, so the same markup remains writing-mode friendly.

Padding controls
p = xsp = lgwide inline

Width, maximum width, and centering

Combine width, max-width, and logical mx margins for a bounded region that remains fluid when the preview narrows.

Centered readable notice

Drag the preview edge: the notice stays fluid until it reaches its maximum width.

 
<aside data-box width="calc(100% - 1rem)" max-width="32rem" mx="auto">
  ...
</aside>

Horizontal composition

Set display="flex" and provide a gap for a compact row. Box intentionally exposes only the common display and spacing controls; use the Flex component when you need wrapping or axis alignment.

Inline action bar

Vertical composition

Grid display plus a gap creates a simple stack. For richer relationships and full-width child behavior, prefer layout-stack.

Notification stream
Build complete

Documentation finished without errors.

Review requested

Two files are ready for approval.

Deploy queued

The next release is waiting for its window.

Semantic surfaces

Box accepts full CSS values, including theme tokens. Pair every feedback surface with its matching text and outline tokens.

Feedback surfaces
Success: changes saved.
Warning: review required.
Error: deployment stopped.

Fixed and fluid dimensions

width and height accept functions, percentages, and tokens—not just fixed lengths.

Responsive media placeholder

The frame has a fixed block size but a fluid inline size.
min(100%, 38rem) × 10rem

Text alignment

The align attribute maps to text-align. It does not reposition the box itself or control flex/grid alignment.

Text alignment roles
StartCenterEnd

Complete composition

The primitive is most useful as connective tissue around semantic content, not as a replacement for every specialized component.

Account summary pattern
AG
Avery Gray

Workspace administrator

18
Projects
7
Members
99.9%
Uptime

Attribute reference

  • Layout: display, gap
  • Padding: p, px, py
  • Margin: m, mx, my
  • Sizing: width, height, max-width
  • Appearance: bg, color, border, radius
  • Typography: align

Values are raw CSS values, so tokens, functions, percentages, and logical keywords are valid. Box does not currently implement elevation; use an explicit shadow token in a class when elevation carries meaning.

Choosing the right primitive

  • Use Box for a small number of one-off container values.
  • Use semantic native elements as [data-box] hosts whenever possible.
  • Use Flex, Grid, or the layout primitives when the relationship between children is the main concern.
  • Promote repeated Box recipes into a component or semantic token instead of duplicating long attribute lists.