Box
Box is a styled div primitive that turns common layout and visual attributes into CSS backed by --pura-* tokens. Spacing accepts a 0-6 scale or any raw CSS length, while background, color, border, radius, and shadow map to the theme. Use it as the building block for cards, panels, and arbitrary containers without writing custom CSS.
Preview
<script type="module" src="/pura/lib/box.js"></script>
<!-- Padded card with a subtle background -->
<pura-box p="4" bg="subtle" radius="md" border>
Card contents go here.
</pura-box>
<!-- Primary panel with shadow and vertical margin -->
<pura-box p="5" bg="primary" radius="lg" shadow="md" my="3">
Highlighted panel.
</pura-box>
<!-- Centered, full-width container -->
<pura-box px="6" py="3" mx="auto" w="full">
Centered content.
</pura-box>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
p | string | — | Padding on all sides. Scale 0-6 (--pura-space-N) or any CSS length. |
px | string | — | Horizontal padding (overrides p on the x axis). Scale 0-6 or any CSS length. |
py | string | — | Vertical padding (overrides p on the y axis). Scale 0-6 or any CSS length. |
m | string | — | Margin on all sides. Scale 0-6, any CSS length, or 'auto'. |
mx | string | — | Horizontal margin (overrides m on the x axis). Scale 0-6, any CSS length, or 'auto'. |
my | string | — | Vertical margin (overrides m on the y axis). Scale 0-6, any CSS length, or 'auto'. |
bg | string | — | Background color: bg | subtle | primary | transparent. The primary value also sets a readable foreground color. |
color | string | — | Text color: fg | muted | primary. Wins over the implicit color set by bg. |
border | string | — | Boolean for a 1px border, or 'strong' for a 1px stronger border. |
radius | string | — | Corner radius: sm | md | lg | full. |
shadow | string | — | Box shadow: sm | md | lg | none. |
w | string | — | Width: any CSS length or 'full' (100%). |
h | string | — | Height: any CSS length or 'full' (100%). |
display | string | block | Any CSS display value (block | flex | inline-flex | grid | inline | none ...). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/box.js"></script>import "./pura/lib/box.js";