Containers

Surfaces and grouping elements. article is the base surface; .card and dialog build on it.

Article

A raised surface on --surface-lc-2 with the shared --box-shadow. A <footer> inside gets a top border and right-aligns its contents.

Standard article

Default padding, radius, and shadow from the theme.

<article>
  <header>
    <h3>Standard article</h3>
  </header>
  <p>Default padding, radius, and shadow from the theme.</p>
  <footer>
    <button class="secondary">Dismiss</button>
    <button>Confirm</button>
  </footer>
</article>

Card

.card is the flat variant. It sits on --surface-lc-1 with a border instead of a shadow. Use it for lists of items where stacked shadows would get noisy.

Card one

Border, no shadow.

Card two

new

<div class="flex flip">
  <article class="card" style="flex: 1">
    <h3>Card one</h3>
    <p>Border, no shadow.</p>
  </article>
  <article class="card" style="flex: 1">
    <h3>Card two</h3>
    <p><small class="chip">new</small></p>
  </article>
</div>

.card works on any element, not just article. On a plain <div> you get the surface without the article padding rules.

Dialog

The native <dialog> is styled as a centered, backdrop-blurred modal. Open it with showModal(). Wrapping the content in <form method="dialog"> means the close button needs no JavaScript.

<button data-dialog="demo-dialog">Open dialog</button>

<dialog id="demo-dialog">
  <form method="dialog">
    <article>
      <header>
        <h3>Dialog heading</h3>
      </header>
      <p>
        Scrolls internally when the content exceeds the viewport, and locks
        scrolling on the page behind it.
      </p>
      <footer>
        <button value="cancel" class="secondary">Cancel</button>
        <button value="ok">OK</button>
      </footer>
    </article>
  </form>
</dialog>

The docs script wires [data-dialog] to showModal(). In your own app that is one line: dialog.showModal().

Details

What does the scale look like?

Nine steps, mirrored between light and dark. See the colors page.

Can I nest them?

Yes

Like this.

<details>
  <summary>What does the scale look like?</summary>
  <p>Nine steps, mirrored between light and dark. See the colors page.</p>
</details>
<details open>
  <summary>Can I nest them?</summary>
  <details>
    <summary>Yes</summary>
    <p>Like this.</p>
  </details>
</details>

Tables

Full width, collapsed borders, and a heavier rule under the header row.

Variable	Default	Purpose
`--color`	`rebeccapurple`	Base hue for the whole scale
`--border-radius`	`0.25rem`	Corner radius on every surface
`--padding`	`1rem`	Base spacing unit

<table>
  <thead>
    <tr>
      <th>Variable</th>
      <th>Default</th>
      <th>Purpose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>--color</code></td>
      <td><code>rebeccapurple</code></td>
      <td>Base hue for the whole scale</td>
    </tr>
    <tr>
      <td><code>--border-radius</code></td>
      <td><code>0.25rem</code></td>
      <td>Corner radius on every surface</td>
    </tr>
    <tr>
      <td><code>--padding</code></td>
      <td><code>1rem</code></td>
      <td>Base spacing unit</td>
    </tr>
  </tbody>
</table>

Progress

<progress value="25" max="100"></progress>
<progress value="70" max="100"></progress>
<progress></progress>

A progress with no value renders indeterminate.