Tables

<div
  class="sl-table-wrap"
  role="region"
  aria-labelledby="projects-caption"
  tabindex="0"
>
  <table class="sl-table sl-table--responsive" role="table">
    <caption id="projects-caption">
      Example project directory
    </caption>
    <thead role="rowgroup">
      <tr role="row">
        <th scope="col" role="columnheader">Project</th>
        <th scope="col" role="columnheader">Category</th>
        <th scope="col" role="columnheader">Status</th>
        <th scope="col" role="columnheader">Owner</th>
      </tr>
    </thead>
    <tbody role="rowgroup">
      <tr role="row">
        <th scope="row" role="rowheader">Studio notebook</th>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Category</span
          ><span>Portfolio</span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Status</span
          ><span><span class="sl-badge">Ready</span></span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Owner</span><span>Alex</span>
        </td>
      </tr>
      <tr role="row">
        <th scope="row" role="rowheader">Field notes</th>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Category</span
          ><span>Editorial</span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Status</span
          ><span><span class="sl-badge">Draft</span></span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Owner</span><span>Sam</span>
        </td>
      </tr>
      <tr role="row">
        <th scope="row" role="rowheader">The component garden</th>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Category</span
          ><span>Documentation</span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Status</span
          ><span><span class="sl-badge">In progress</span></span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Owner</span
          ><span>Jordan</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="sl-table-wrap" role="region" aria-labelledby="modules-caption" tabindex="0">
  <table class="sl-table sl-table--responsive" role="table">
    <caption id="modules-caption">
      Choose your building blocks
    </caption>
    <thead role="rowgroup">
      <tr role="row">
        <th scope="col" role="columnheader">Module</th>
        <th scope="col" role="columnheader">Purpose</th>
        <th scope="col" role="columnheader">Required</th>
      </tr>
    </thead>
    <tbody role="rowgroup">
      <tr role="row">
        <th scope="row" role="rowheader">Core</th>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Purpose</span
          ><span>Tokens, base, layouts, utilities, components</span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Required</span
          ><span>Yes</span>
        </td>
      </tr>
      <tr role="row">
        <th scope="row" role="rowheader">Prose</th>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Purpose</span
          ><span>Long-form text rhythm</span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Required</span><span>No</span>
        </td>
      </tr>
      <tr role="row">
        <th scope="row" role="rowheader">Tables</th>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Purpose</span
          ><span>Data table styling</span>
        </td>
        <td role="cell">
          <span class="sl-table-label" aria-hidden="true">Required</span><span>No</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="sl-table-wrap" role="region" aria-label="Framework sizes" tabindex="0">
  <table class="sl-table">
    <caption>
      Source of truth
    </caption>
    <thead>
      <tr>
        <th scope="col">Metric</th>
        <th scope="col">Where to find it</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Core and modules</th>
        <td><a href="/downloads/size-report.json">Framework size report</a></td>
      </tr>
      <tr>
        <th scope="row">Website per-page CSS</th>
        <td><a href="/css-size-report.json">Website size report</a></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="sl-table-wrap" role="region" aria-label="Example module list" tabindex="0">
  <table class="sl-table">
    <caption>
      Optional building blocks
    </caption>
    <thead>
      <tr>
        <th scope="col">Module</th>
        <th scope="col">Includes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Variants</th>
        <td>Button sizes and surfaces</td>
      </tr>
      <tr>
        <th scope="row">Motion</th>
        <td>Hover, reveal, split text</td>
      </tr>
      <tr>
        <th scope="row">Responsive</th>
        <td>1200 / 1023 / 991 / 767px</td>
      </tr>
    </tbody>
  </table>
</div>