box()

Apply Box styles to any element via a directive.

import { box } from 'mates-ui';
import { html } from 'mates';

html`
  <main ${box({ maxw: '960px', mx: 'auto', py: 3, px: 2 })}>
    Page content
  </main>
`

html`
  <article ${box({ p: 2, bgcolor: 'var(--md-color-surface)', br: '8px' })}>
    Card content
  </article>
`

html`
  <span ${box({ display: 'inline-flex', px: '0.75rem', py: '0.2rem', br: '9999px' })}>
    Badge
  </span>
`;

Overview

Pass an options object with box-model shorthands: p, m, w, maxw, bgcolor, br, display, grow, and more.

Numbers use the 8px scale; strings pass through as CSS.

Constrained card via box()

Centered max-width panel with an inline badge — no extra nodes.

import { html, renderApp } from 'mates';

import { box } from 'mates-ui';

const App = () => {

return () => html`

<h3>Constrained card</h3>

box() applies the same shorthand props as <x-box> without an extra node.

</p>

<span ${box({

display: 'inline-flex',

mt: 1,

px: '0.75rem',

py: '0.2rem',

br: '9999px',

bgcolor: 'var(--m-bg)',

})} class="hint">Badge</span>

</main>

</div>

};

renderApp(App, document.getElementById('app'));

API — box()

import { box } from 'mates-ui';

Prop / Option	Type	Default	Description
`box(opts?)`	`DirectiveResult`	—	Applies box-model shorthands (p, m, w, maxw, bgcolor, br, grow, display, …) to the host element.