← →

Container

Container is an agent-native wrapper that uses ResizeObserver to measure its own width and exposes the current breakpoint via the data-size attribute (xs|sm|md|lg), working like a container query even where the CSS @container feature is not available. Use it when a block of content needs to react to the space it actually occupies (cards, panels, columns) instead of the window size. The machine-readable layer includes the global registry window.__puraContainers (a Map keyed by id, with size, width, el, and a query(size) helper), plus role="group" and the reflected data-size/data-width attributes, so agents can enumerate each container and its current size.

Preview

<pura-container id="product" center pad max="48rem" label="Product card">
  <div style="display:flex; gap:16px; flex-wrap:wrap; align-items:center;">
    <div style="flex:1; min-width:180px;">
      <h3>Aurora wireless headphones</h3>
      <p>Noise cancellation and 30h of battery life.</p>
    </div>
    <strong>$499.00</strong>
  </div>
</pura-container>
<script type="module">
  import "/pura/lib/container.js";
  const c = document.getElementById("product");
  c.addEventListener("pura-container:resize", (e) => {
    console.log("new breakpoint:", e.detail.size, e.detail.width);
  });
  // Agents can also read every container on the page:
  // window.__puraContainers.query("lg")
</script>

Attributes

Attribute	Type	Default	Description
`breakpoints`	string	sm:384, md:640, lg:896	Custom min-width thresholds in px as a comma-separated list, e.g. "sm:480, md:768, lg:1024". Anything below the smallest becomes xs.
`center`	boolean	false	Horizontally centers the inner box (margin-inline auto).
`max`	string	(none)	Optional max-width for the inner box (any CSS length, e.g. "72rem"); without it the container is fluid (100%).
`pad`	boolean	false	Applies symmetric inline padding that scales with the current breakpoint.
`label`	string	(none)	aria-label exposed on the host region.

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/container.js"></script>

JavaScript

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

Slots

default

Events

pura-container:resize