Components

Details

A styled <details> / <summary> — the “show the numbers behind this” pattern. The headline stays readable and the detail is one click away, with no JavaScript anywhere in it.

The disclosure

_78-details goes on a real <details> element. The kit removes the native marker — including Safari's ::-webkit-details-marker — and draws a chevron in its place that rotates when the element opens. The content goes in _78-details-body.

Because it is the browser's own element, the keyboard works, screen readers announce it as a disclosure with its expanded state, and Ctrl+F can find text inside a closed one and open it. None of that is the kit's to get right, which is the point of building on the native element rather than a div with a click handler.

How is the health score calculated?

Three inputs, weighted: usage against seats (50%), support tickets in the last 30 days (30%) and payment history (20%). A score under 70 flags the account for follow-up.

What counts as an active user?

Anyone who signed in at least once in the period. Service accounts and invitations that were never accepted are excluded.

_78-details

<div class="site-demo-block">
  <details class="_78-details">
    <summary>How is the health score calculated?</summary>
    <div class="_78-details-body">
      <p>Three inputs, weighted: usage against seats (50%), support tickets in the last 30 days (30%)
         and payment history (20%). A score under 70 flags the account for follow-up.</p>
    </div>
  </details>

  <details class="_78-details" open>
    <summary>What counts as an active user?</summary>
    <div class="_78-details-body">
      Anyone who signed in at least once in the period. Service accounts and invitations that were
      never accepted are excluded.
    </div>
  </details>
</div>

The second one carries the native open attribute, which is how you ship one already expanded. Consecutive _78-details siblings space themselves with a --space-2 gap, so a stack of them needs no margins of yours.

The meta slot

_78-details-meta is pushed to the right of the summary line: a count, a total, a badge — the number that makes the disclosure worth opening. It is inside the <summary>, so it is part of the control's accessible name and is read out with it.

Invoice breakdown $4,182.40

Team plan — 48 seats	$2,352.00
Additional storage — 400 GB	$1,600.00
Tax	$230.40

Accounts needing follow-up 5

Northwind, Contoso, Fabrikam, Tailspin and Proseware all scored below 70 this month.

_78-details-meta

<div class="site-demo-block">
  <details class="_78-details">
    <summary>
      Invoice breakdown
      <span class="_78-details-meta">$4,182.40</span>
    </summary>
    <div class="_78-details-body">
      <table class="_78-table _78-table-compact">
        <tbody>
          <tr><td>Team plan — 48 seats</td><td class="_78-right">$2,352.00</td></tr>
          <tr><td>Additional storage — 400 GB</td><td class="_78-right">$1,600.00</td></tr>
          <tr><td>Tax</td><td class="_78-right">$230.40</td></tr>
        </tbody>
      </table>
    </div>
  </details>

  <details class="_78-details">
    <summary>
      Accounts needing follow-up
      <span class="_78-details-meta"><span class="_78-badge _78-badge-warn">5</span></span>
    </summary>
    <div class="_78-details-body">
      Northwind, Contoso, Fabrikam, Tailspin and Proseware all scored below 70 this month.
    </div>
  </details>
</div>

Variants

Three, and they are about the box rather than the behavior. _78-details-plain removes the box entirely — use it inside a card, which already has one. _78-details-fill tints the summary bar the way a table head or a card foot is tinted. _78-details-sm makes the whole thing smaller.

Quarterly target

You are 72% of the way to $65,000 with five weeks left in the quarter.

Assumptions

Commission at 0.08%, renewals counted on the invoice date, and no allowance for churn.

Advanced settings 3 changed

A tinted summary bar reads as a header, which suits a disclosure that sits above content rather than beside it.

Raw response 1.4 KB

{ "status": "ok", "records": 128, "took_ms": 41 }

details variants

<div class="site-demo-block">
  <div class="_78-card">
    <div class="_78-card-title">Quarterly target</div>
    <p>You are 72% of the way to $65,000 with five weeks left in the quarter.</p>
    <details class="_78-details _78-details-plain">
      <summary>Assumptions</summary>
      <div class="_78-details-body _78-text-sm">
        Commission at 0.08%, renewals counted on the invoice date, and no allowance for churn.
      </div>
    </details>
  </div>

  <details class="_78-details _78-details-fill">
    <summary>Advanced settings <span class="_78-details-meta">3 changed</span></summary>
    <div class="_78-details-body">
      A tinted summary bar reads as a header, which suits a disclosure that sits above content
      rather than beside it.
    </div>
  </details>

  <details class="_78-details _78-details-sm">
    <summary>Raw response <span class="_78-details-meta">1.4 KB</span></summary>
    <div class="_78-details-body _78-mono">{ "status": "ok", "records": 128, "took_ms": 41 }</div>
  </details>
</div>

Class	What it is
`_78-details`	On the `<details>`: a `--bg2` surface, a `--border` edge, `--radius`, and clipped corners so the summary's hover tint cannot escape them.
`_78-details-summary`	Optional class on the `<summary>`. A direct `> summary` is styled without it — the class is for when yours is not a direct child.
`_78-details-meta`	Pushed to the right of the summary: a count, a total, a badge.
`_78-details-body`	The revealed content: `--space-3` padding, separated by a top border. Its first child's top margin is cleared for you.
`_78-details-plain`	No box, no padding at the edges — for a disclosure inside something that is already a box.
`_78-details-fill`	A `--bg3` summary bar, with the border moving under it when open.
`_78-details-sm`	Smaller type and padding throughout.
`open`	Native. Ships the disclosure expanded.

The chevron is two rotated borders, so there is no icon set to load and it follows the text color; [open] is what rotates it. Hover tints the summary with --row-hover and turns it accent, and focus is the kit's 2px accent outline, drawn inset so it is not clipped by those rounded corners.

Grouping them

There is no accordion component, and there does not need to be one: the browser has it. Give a set of <details> elements the same name and opening one closes the others — still no JavaScript.

Can I change plan mid-term?

Yes. The change is prorated to the day and appears on the next invoice.

What happens when a trial ends?

The workspace becomes read-only for 30 days, then is archived. Nothing is deleted.

Do you offer annual billing?

Yes, at two months' discount. Talk to us if you need a purchase order.

exclusive accordion

<div class="site-demo-block">
  <details class="_78-details" name="faq" open>
    <summary>Can I change plan mid-term?</summary>
    <div class="_78-details-body">Yes. The change is prorated to the day and appears on the next invoice.</div>
  </details>
  <details class="_78-details" name="faq">
    <summary>What happens when a trial ends?</summary>
    <div class="_78-details-body">The workspace becomes read-only for 30 days, then is archived. Nothing is deleted.</div>
  </details>
  <details class="_78-details" name="faq">
    <summary>Do you offer annual billing?</summary>
    <div class="_78-details-body">Yes, at two months' discount. Talk to us if you need a purchase order.</div>
  </details>
</div>

A graceful thing to lean on

name on <details> is a recent addition to HTML. Where a browser does not support it, the attribute is ignored and every disclosure simply opens independently — the content is all still reachable, which is exactly the failure you want.

Using it well

Keep the summary a real summary. “How is the health score calculated?” tells the reader what is behind it; “More” makes them open it to find out.
Do not hide what someone needs. A disclosure is for the working behind a number, the assumptions under an estimate, the raw payload under a result — not for a required form field or an error.
Put the number in the summary. Half the value of the pattern is that _78-details-meta can answer the question without the reader opening anything.

← Data-viz Contents rail →