Cards

<div class="grid">
  <article data-card data-tone="white">
<header><span data-eyebrow>Tone white</span><h3>White</h3></header>
<p>Cards are flat, bordered and square-ish.</p>
</article>
  <article data-card data-tone="sky">
<header><span data-eyebrow>Tone sky</span><h3>Sky</h3></header>
<p>Cards are flat, bordered and square-ish.</p>
</article>
  <article data-card data-tone="yellow">
<header><span data-eyebrow>Tone yellow</span><h3>Yellow</h3></header>
<p>Cards are flat, bordered and square-ish.</p>
</article>
  <article data-card data-tone="ink">
<header><span data-eyebrow>Tone ink</span><h3>Ink</h3></header>
<p>Cards are flat, bordered and square-ish.</p>
</article>
</div>

With image, header, footer

Feature

Media card

Body copy sits between header and footer.

Linked card

Whole card is a link

Hover or focus: it shifts and changes colour. No shadow.

Yellow linked

Hovers to sky.

Disabled

Dimmed card state.

<div class="grid">
  <article data-card>
    <img src="…" alt="" width="640" height="400">
    <header><span data-eyebrow>Feature</span><h3>Media card</h3></header>
    <p>Body copy sits between header and footer.</p>
    <footer><span>Updated today</span><a href="#">Details</a></footer>
  </article>
  <article data-card data-linked>
    <header><span data-eyebrow>Linked card</span><h3><a href="#">Whole card is a link</a></h3></header>
    <p>Hover or focus: it shifts and changes colour. No shadow.</p>
  </article>
  <article data-card data-linked data-tone="yellow">
    <header><h3><a href="#">Yellow linked</a></h3></header>
    <p>Hovers to sky.</p>
  </article>
  <article data-card aria-disabled="true">
    <header><h3>Disabled</h3></header>
    <p>Dimmed card state.</p>
  </article>
</div>

Feature rows and grid

Row

Text left, image right

Feature rows alternate image and text sides.

Learn more

<section data-feature>
  <div><span data-eyebrow>Row</span><h3>Text left, image right</h3><p>Feature rows alternate image and text sides.</p><a href="#">Learn more</a></div>
  <figure><img src="…" alt="Illustration" width="640" height="400"></figure>
</section>

Row

Image left, text right

Add data-reverse to flip the order on wide screens.

Learn more

<section data-feature data-reverse>
  <div><span data-eyebrow>Row</span><h3>Image left, text right</h3><p>Add data-reverse to flip the order on wide screens.</p><a href="#">Learn more</a></div>
  <figure><img src="…" alt="Illustration" width="640" height="400"></figure>
</section>

1. ConnectPoint at files or a database.
2. QueryWrite plain SQL.
3. SharePublish results to your team.
4. ScaleGrow without re-platforming.

<ol data-steps>
  <li><strong>Connect</strong>Point at files or a database.</li>
  <li><strong>Query</strong>Write plain SQL.</li>
  <li><strong>Share</strong>Publish results to your team.</li>
  <li><strong>Scale</strong>Grow without re-platforming.</li>
</ol>

Pricing

<div class="grid" data-min="14">
  <article data-card data-tier>
<header><h3>Free</h3><data value="0">$0<small> / mo</small></data></header>
<ul><li>1 user</li><li>10 GB storage</li><li data-off>Priority support</li></ul>
<a href="#">Get started</a>
</article>
  <article data-card data-tier data-featured>
<header><h3>Pro</h3><data value="25">$25<small> / mo</small></data></header>
<ul><li>5 users</li><li>100 GB storage</li><li>Priority support</li></ul>
<a href="#">Choose Pro</a>
</article>
  <article data-card data-tier>
<header><h3>Team</h3><data value="99">$99<small> / mo</small></data></header>
<ul><li>Unlimited users</li><li>1 TB storage</li><li>SSO</li></ul>
<a href="#">Contact sales</a>
</article>
</div>

Comparison

<div data-scroll role="region" aria-label="Plan comparison" tabindex="0">
<table data-compare>
  <caption>Compare plans</caption>
  <thead><tr><th scope="col">Feature</th><th scope="col">Free</th><th scope="col" data-featured>Pro</th><th scope="col">Team</th></tr></thead>
  <tbody>
    <tr><th scope="row">Users</th><td>1</td><td data-featured>5</td><td>Unlimited</td></tr>
    <tr><th scope="row">Priority support</th><td data-no><span class="visually-hidden">No</span></td><td data-yes data-featured><span class="visually-hidden">Yes</span></td><td data-yes><span class="visually-hidden">Yes</span></td></tr>
    <tr><th scope="row">SSO</th><td data-no><span class="visually-hidden">No</span></td><td data-no data-featured><span class="visually-hidden">No</span></td><td data-yes><span class="visually-hidden">Yes</span></td></tr>
  </tbody>
</table>
</div>

Testimonials

<div class="grid" data-min="20">
  <figure data-testimonial>
    <blockquote><p>We replaced three tools with one. Queries that took minutes now finish in seconds.</p></blockquote>
    <figcaption><img src="…" alt="" width="48" height="48"><strong>Ada Kim</strong><small>Head of Data, Acme</small></figcaption>
  </figure>
  <figure data-testimonial data-tone="sky">
    <blockquote><p>Setup took an afternoon. The team loves it.</p></blockquote>
    <figcaption><img src="…" alt="" width="48" height="48"><strong>Jo Lee</strong><small>CTO, Globex</small></figcaption>
  </figure>
</div>

Case studies and stats

Case study

Acme cuts spend by 70%

How Acme cut query times and cloud spend with a single-node analytics stack.

Cost saved

70%

Faster

12x

To launch

3 wks

Case study

Globex ships dashboards daily

How Globex cut query times and cloud spend with a single-node analytics stack.

Queries / day

5k

P95

2s

<div class="grid" data-min="18">
  <article data-card data-case data-linked>
<img src="…" alt="" width="640" height="400">
<header><span data-eyebrow>Case study</span><h3><a href="#">Acme cuts spend by 70%</a></h3></header>
<p>How Acme cut query times and cloud spend with a single-node analytics stack.</p>
<dl data-stats><div><dt>Cost saved</dt><dd>70%</dd></div><div><dt>Faster</dt><dd>12x</dd></div><div><dt>To launch</dt><dd>3 wks</dd></div></dl>
</article>
  <article data-card data-case data-linked>
<img src="…" alt="" width="640" height="400">
<header><span data-eyebrow>Case study</span><h3><a href="#">Globex ships dashboards daily</a></h3></header>
<p>How Globex cut query times and cloud spend with a single-node analytics stack.</p>
<dl data-stats><div><dt>Queries / day</dt><dd>5k</dd></div><div><dt>P95</dt><dd>2s</dd></div></dl>
</article>
</div>

Stat / metric

Users

12k

Queries / day

4.2M

Uptime

99.9%

<dl data-stats data-boxed>
  <div><dt>Users</dt><dd>12k</dd></div>
  <div><dt>Queries / day</dt><dd>4.2M</dd></div>
  <div><dt>Uptime</dt><dd>99.9%</dd></div>
</dl>

Logo strip

Badges, tags, chips

Highlighted text with mark.

Callouts

Blog post cards

Engineering

Faster joins in one line

A short excerpt that teases the article in a couple of lines of light body copy.

Product

What shipped this month

A short excerpt that teases the article in a couple of lines of light body copy.

Guides

Hybrid query execution

A short excerpt that teases the article in a couple of lines of light body copy.

Avatars

Stack

• 
• 
• 
• 
• +12

<ul data-logos data-label="Trusted by builders" aria-label="Trusted by builders">
<li><img src="…" alt="Acme" width="90" height="24"></li>
<li><img src="…" alt="Globex" width="100" height="24"></li>
<li><img src="…" alt="Initech" width="95" height="24"></li>
<li><img src="…" alt="Umbrella" width="130" height="24"></li>
<li><img src="…" alt="Hooli" width="80" height="24"></li>
</ul>
</section>

<section aria-labelledby="h-badge">
<h2 id="h-badge">Badges, tags, chips</h2>
<p><mark>Highlighted</mark> text with mark.</p>
<div class="cluster">
  <span data-badge>Default</span><span data-badge data-tone="sky">Sky</span><span data-badge data-tone="yellow">Yellow</span><span data-badge data-tone="ink">Ink</span><span data-badge data-tone="success">Success</span><span data-badge data-tone="danger">Danger</span><span data-badge data-tone="success" data-dot>Live</span>
</div>
<div class="cluster mt-3">
  <span data-tag data-size="sm">Small</span><span data-tag>Default</span><span data-tag data-size="lg">Large</span><span data-tag data-tone="sky">Sky</span><span data-tag data-tone="yellow">Yellow</span><span data-tag data-tone="ink">Ink</span>
</div>
<div class="cluster mt-3">
  <span data-tag data-removable>SQL <button type="button" aria-label="Remove SQL">&times;</button></span>
  <span data-tag data-tone="sky" data-removable>Python <button type="button" aria-label="Remove Python">&times;</button></span>
  <span data-tag data-tone="yellow" data-removable>Rust <button type="button" aria-label="Remove Rust">&times;</button></span>
</div>
</section>

<section aria-labelledby="h-call">
<h2 id="h-call">Callouts</h2>
<aside data-callout data-tone="info" role="note"><h4>Heads up</h4><p>Informational note.</p></aside>
<aside data-callout data-tone="success" role="note"><h4>Done</h4><p>Your changes were saved.</p></aside>
<aside data-callout data-tone="warning" role="alert"><h4>Careful</h4><p>This action affects production.</p></aside>
<aside data-callout data-tone="danger" role="alert"><h4>Error</h4><p>Something went wrong. Try again.</p></aside>
</section>

<section aria-labelledby="h-blog">
<h2 id="h-blog">Blog post cards</h2>
<div class="grid">
  <article data-card data-linked data-post>
<img src="…" alt="" width="640" height="400">
<header><span data-eyebrow>Engineering</span><h3><a href="#">Faster joins in one line</a></h3></header>
<p>A short excerpt that teases the article in a couple of lines of light body copy.</p>
<footer><address><img src="…" alt="" width="32" height="32"><a rel="author" href="#">Ada Kim</a></address><time datetime="2026-11-03">Nov 3, 2026</time></footer>
</article>
  <article data-card data-linked data-post>
<img src="…" alt="" width="640" height="400">
<header><span data-eyebrow>Product</span><h3><a href="#">What shipped this month</a></h3></header>
<p>A short excerpt that teases the article in a couple of lines of light body copy.</p>
<footer><address><img src="…" alt="" width="32" height="32"><a rel="author" href="#">Jo Lee</a></address><time datetime="2026-10-28">Oct 28, 2026</time></footer>
</article>
  <article data-card data-linked data-post>
<img src="…" alt="" width="640" height="400">
<header><span data-eyebrow>Guides</span><h3><a href="#">Hybrid query execution</a></h3></header>
<p>A short excerpt that teases the article in a couple of lines of light body copy.</p>
<footer><address><img src="…" alt="" width="32" height="32"><a rel="author" href="#">Mia Ray</a></address><time datetime="2026-10-12">Oct 12, 2026</time></footer>
</article>
</div>
</section>

<section aria-labelledby="h-av">
<h2 id="h-av">Avatars</h2>
<div class="cluster">
  <img data-avatar data-size="xs" src="…" alt="Ada" width="24" height="24">
  <img data-avatar data-size="sm" src="…" alt="Jo" width="32" height="32">
  <img data-avatar src="…" alt="Mia" width="40" height="40">
  <img data-avatar data-size="lg" src="…" alt="Tom" width="56" height="56">
  <img data-avatar data-size="xl" src="…" alt="Ada" width="80" height="80">
  <img data-avatar data-shape="square" data-size="lg" src="…" alt="Jo" width="56" height="56">
</div>
<h3>Stack</h3>
<ul data-avatars aria-label="Team members">
  <li><img data-avatar src="…" alt="Ada" width="40" height="40"></li>
  <li><img data-avatar src="…" alt="Jo" width="40" height="40"></li>
  <li><img data-avatar src="…" alt="Mia" width="40" height="40"></li>
  <li><img data-avatar src="…" alt="Tom" width="40" height="40"></li>
  <li data-more aria-label="and 12 more">+12</li>
</ul>

Empty state

No queries yet

Run your first query to see results and history here.

New query

<section data-empty aria-labelledby="e1">
  <img src="…" alt="" width="80" height="80">
  <h3 id="e1">No queries yet</h3>
  <p>Run your first query to see results and history here.</p>
  <a href="#">New query</a>
</section>