← →

Spacer

Spacer renders an empty box used to create gaps in a layout. With a size attribute it produces a fixed gap from the spacing scale (steps 1 to 6) or any CSS length, working both in normal block flow and along the main axis of a flex container. Without size it grows to fill available room, pushing flex siblings apart.

Preview

<script type="module" src="/pura/lib/spacer.js"></script>

<!-- Fixed gap between two cards using a spacing-scale step -->
<div style="display: flex;">
  <div>Card A</div>
  <pura-spacer size="3"></pura-spacer>
  <div>Card B</div>
</div>

<!-- Flexible spacer to right-align an action in a toolbar -->
<div style="display: flex; align-items: center;">
  <span>Page title</span>
  <pura-spacer></pura-spacer>
  <button>New item</button>
</div>

<!-- Custom CSS length gap in block flow -->
<section>Intro text</section>
<pura-spacer size="48px"></pura-spacer>
<section>Following section after a 48px gap.</section>

Attributes

Attribute	Type	Default	Description
`size`	string	—	Spacing scale step (1-6, mapped to var(--pura-space-N)) or any raw CSS length (e.g. 2rem, 24px). When omitted, the spacer grows to fill available space (flex: 1) and is inert in normal block flow.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/spacer.js"></script>

JavaScript

import "./pura/lib/spacer.js";