Skip to content
Ben Hodgson

Search

Content

DisclosuresLink to this section

A card that opens to show more. It’s a native <details>, so it works without JavaScript, and disclosures with the same name form an accordion: opening one closes the others.

I have a linkOpen it to get in

Open the link from the email it came in.

I want accessAsk for an invite

Tell me who you are, and I’ll send a link.

<Disclosure name="access" title="I have a link" description="Open it to get in">
…
</Disclosure>
<Disclosure name="access" title="I want access" description="Ask for an invite" open>
…
</Disclosure>

Pass an icon, such as a 24 × 24 stroked <svg>, to show it in a tile that fills with the accent colour when open.

StepsLink to this section

  1. Open the link, from the email it came in.
  2. Share any page. Its address carries your code.
<Steps
items={[
  { title: "Open the link,", body: "from the email it came in." },
  { title: "Share any page.", body: "Its address carries your code." },
]}
/>

AnnotationsLink to this section

Point at part of an address, a command or a line of code, the way a drawing labels its parts. Mark the part with an accent highlight. In Astro, pass a rich note as a note slot.

example.com/?invite=acme-7k2x

your access code, part of the link

<Annotation note={<><span class="text-accent">your access code</span>, part of the link</>}>
<span class="text-muted">example.com/?invite=</span>
<Highlight tone="accent">acme-7k2x</Highlight>
</Annotation>

Stats and factsLink to this section

Stats is a row of headline figures; Facts is short facts with labels. Mark wide facts that need the full width on narrow screens.

Role
Lead engineer
Year
2025
Stack
TypeScript · Postgres

  • 4×

    faster builds

  • 12k

    places covered

  • 0

    manual steps

<Facts
items={[
  { term: "Role", detail: "Lead engineer" },
  { term: "Year", detail: "2025" },
  { term: "Stack", detail: "TypeScript · Postgres", wide: true },
]}
/>
<Stats
items={[
  { value: "4×", label: "faster builds" },
  { value: "12k", label: "places covered" },
  { value: "0", label: "manual steps" },
]}
/>

design-system is a Ben Hodgson projectGitHub