Content

Tables & code

Tables keep technical data dense and legible. Code, keyboard input, and preformatted blocks use the shared monospace system.

Accessible tables

Use a caption for the table's purpose, scope="col" for column headers, and scope="row" for row headers. Wrap wide tables in .overflow-auto; a focusable, labelled wrapper lets keyboard users reach and identify the scroll region.

Query latency by operation
Operation	p50	p90	State
Vector query	14 ms	17 ms	Nominal
Text search	13 ms	18 ms	Nominal
Document write	165 ms	248 ms	Watching

<div class="overflow-auto" tabindex="0" role="region" aria-label="Query latency by operation">
  <table>
    <caption>Query latency by operation</caption>
    <thead>
      <tr>
        <th scope="col">Operation</th>
        <th scope="col">p50</th>
        <th scope="col">p90</th>
        <th scope="col">State</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Vector query</th><td>14 ms</td><td>17 ms</td><td>Nominal</td></tr>
      <tr><th scope="row">Text search</th><td>13 ms</td><td>18 ms</td><td>Nominal</td></tr>
      <tr><th scope="row">Document write</th><td>165 ms</td><td>248 ms</td><td>Watching</td></tr>
    </tbody>
  </table>
</div>

Table variants

Variants are opt-in and composable. .striped alternates body rows, .hoverable highlights the pointed row, .bordered adds vertical cell rules, and .compact reduces padding and type size. Hover is visual feedback only, so do not use it as the sole indication of selection or status.

Striped nodes
Node	Region
edge-01	us-east
edge-02	eu-west

Hoverable jobs
Job	State
backup	Running
reindex	Queued

Bordered limits
Resource	Limit
Indexes	24
Replicas	3

Compact settings
Key	Value
shards	12
refresh	30 s

<div class="overflow-auto" tabindex="0" role="region" aria-label="Table variant examples">
  <table class="striped">
    <caption>Striped nodes</caption>
    <thead><tr><th scope="col">Node</th><th scope="col">Region</th></tr></thead>
    <tbody><tr><th scope="row">edge-01</th><td>us-east</td></tr><tr><th scope="row">edge-02</th><td>eu-west</td></tr></tbody>
  </table>
  <table class="hoverable">
    <caption>Hoverable jobs</caption>
    <thead><tr><th scope="col">Job</th><th scope="col">State</th></tr></thead>
    <tbody><tr><th scope="row">backup</th><td>Running</td></tr><tr><th scope="row">reindex</th><td>Queued</td></tr></tbody>
  </table>
  <table class="bordered">
    <caption>Bordered limits</caption>
    <thead><tr><th scope="col">Resource</th><th scope="col">Limit</th></tr></thead>
    <tbody><tr><th scope="row">Indexes</th><td>24</td></tr><tr><th scope="row">Replicas</th><td>3</td></tr></tbody>
  </table>
  <table class="compact">
    <caption>Compact settings</caption>
    <thead><tr><th scope="col">Key</th><th scope="col">Value</th></tr></thead>
    <tbody><tr><th scope="row">shards</th><td>12</td></tr><tr><th scope="row">refresh</th><td>30 s</td></tr></tbody>
  </table>
</div>

Compose variants

Place multiple variant classes on the same table when their effects are useful together.

Recent deployments
Revision	Region	Result
r184	us-east	Passed
r183	eu-west	Passed

<div class="overflow-auto" tabindex="0" role="region" aria-label="Compact striped deployment table">
  <table class="striped hoverable bordered compact">
    <caption>Recent deployments</caption>
    <thead><tr><th scope="col">Revision</th><th scope="col">Region</th><th scope="col">Result</th></tr></thead>
    <tbody><tr><th scope="row">r184</th><td>us-east</td><td>Passed</td></tr><tr><th scope="row">r183</th><td>eu-west</td><td>Passed</td></tr></tbody>
  </table>
</div>

Inline code and keyboard input

Use code for identifiers and fragments, kbd for user input, and samp for program output.

Set data-theme="dark", press Command + K, and expect Theme updated.

<p>Set <code>data-theme="dark"</code>, press <kbd>Command</kbd> + <kbd>K</kbd>, and expect <samp>Theme updated</samp>.</p>

Code blocks

Wrap complete preformatted fragments in pre > code. Horizontal overflow remains scrollable and whitespace is preserved.

const query = {
  rankBy: ["vector", "ANN", embedding],
  topK: 10,
};

<pre><code>const query = {
  rankBy: ["vector", "ANN", embedding],
  topK: 10,
};</code></pre>

ASCII diagrams

Preformatted text also suits text diagrams. Add an accessible name when the surrounding prose does not explain the diagram.

client --API--> cache --> object storage
                    |
                    +---> search index

<pre role="img" aria-label="Request flow from client to cache and storage"><code>client --API--&gt; cache --&gt; object storage
                    |
                    +---&gt; search index</code></pre>