ds
Components
Accordion

Accordion

Sections that open in place, on the native details element.

How are pipeline runs billed?

By the second, for the time a task holds a worker. Queued time is free. A run that fails in the first minute is not billed.

Can I bring my own object storage?

Yes. Point the workspace at an S3 or GCS bucket and grant the service account read and write on one prefix. Nothing else in the bucket is touched.

Where does my data live?

In the region you pick when you create the workspace: ap-south-1, eu-west-1 or us-east-1. Backups stay in the same region.

Code

<div class="accs">
  <details class="acc" open>
    <summary>How are pipeline runs billed?</summary>
    <div class="acc-body"><p>By the second, for the time a task holds a worker. Queued time is free. A run that fails in the first minute is not billed.</p></div>
  </details>
  <details class="acc">
    <summary>Can I bring my own object storage?</summary>
    <div class="acc-body"><p>Yes. Point the workspace at an S3 or GCS bucket and grant the service account read and write on one prefix. Nothing else in the bucket is touched.</p></div>
  </details>
  <details class="acc">
    <summary>Where does my data live?</summary>
    <div class="acc-body"><p>In the region you pick when you create the workspace: ap-south-1, eu-west-1 or us-east-1. Backups stay in the same region.</p></div>
  </details>
</div>

Each row is a native details element, so it opens with a click, Enter or Space, works without JavaScript, and the browser's find-in-page opens a closed section when it matches. Rows are separated by hairlines, the same as every list in ds. Where the browser can animate to an auto height, the body slides open; elsewhere it appears at once.

Boxed, with metadata

Connectionpostgres · 3 fields

Host Database

Scheduleevery 15 min

Runs at :00, :15, :30 and :45, in UTC.

Alertsoff

Nobody is told when this pipeline fails.

Show code

<div class="accs boxed">
  <details class="acc" open>
    <summary><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><circle cx="12" cy="12" r="4"/></svg>Connection<small>postgres · 3 fields</small></summary>
    <div class="acc-body">
      <label class="fld"><span>Host</span><input class="inp mono" value="orders-db.internal:5432" /></label>
      <label class="fld"><span>Database</span><input class="inp mono" value="orders" /></label>
    </div>
  </details>
  <details class="acc">
    <summary><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>Schedule<small>every 15 min</small></summary>
    <div class="acc-body"><p>Runs at :00, :15, :30 and :45, in UTC.</p></div>
  </details>
  <details class="acc">
    <summary><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>Alerts<small>off</small></summary>
    <div class="acc-body"><p>Nobody is told when this pipeline fails.</p></div>
  </details>
</div>

.boxed puts the rows in a surface for settings and side panels. A small in the summary sits on the right and says what is inside, so people can scan without opening every section.

Exclusive

Free tier

Two pipelines, 500 task hours a month.

Team

Unlimited pipelines, SSO, audit log.

Enterprise

Private networking and a support contract.

Code

<div class="accs sm">
  <details class="acc" name="faq" open><summary>Free tier</summary><div class="acc-body"><p>Two pipelines, 500 task hours a month.</p></div></details>
  <details class="acc" name="faq"><summary>Team</summary><div class="acc-body"><p>Unlimited pipelines, SSO, audit log.</p></div></details>
  <details class="acc" name="faq"><summary>Enterprise</summary><div class="acc-body"><p>Private networking and a support contract.</p></div></details>
</div>

Give the details elements the same name and opening one closes the others. No script.

API

Class	On	What it does
`.accs`	div	The group. A rule on top; each row adds one below.
`.acc`	details	A row. Add `open` to start open, `name` to make a group exclusive.
`summary`	.acc	The heading. An icon first, a <small> for metadata on the right, the chevron last.
`.acc-body`	div	The content, up to 66 characters wide.
`.boxed`	.accs	In a bordered surface, with inner padding.
`.sm`	.accs	Tighter rows and smaller text.

Short summaries that work as headings.
Open the section most people need.

Don't

Hiding the one thing everyone has to read.
Accordions inside accordions.
A summary that is a whole sentence of content.

Accessibility

summary is a button to assistive technology and reports expanded or collapsed. Do not add a role.
If the summary text is not a good heading on its own, wrap it in an h3 inside the summary.