# Site card

One site at a glance: whether it answers, in words, the version it shows, its last thirty days and three figures.

A block: a ready-made arrangement of components, to copy into a project. Its own classes carry the `site-` prefix; rename it to your project's own. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Built from: Card, Status dot, Tag, Uptime bar.

## Examples

### Usage

Up: the green dot and its word, the version the site shows, thirty days all up, and three figures.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-site-card"
  aria-labelledby="site-up"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-site-card__top">
        <span class="smbk-status-dot smbk-status-dot--tone-success">
          <span class="smbk-status-dot__dot" aria-hidden="true"></span>
          <span class="smbk-status-dot__label">Up</span>
        </span>
        <span class="smbk-tag smbk-tag--tone-default">
          <span class="smbk-tag__label">0.1.2-alpha</span>
        </span>
      </div>
      <div class="site-site-card__name">
        <h3 class="site-site-card__title" id="site-up">Website</h3>
        <p class="site-site-card__address">studionorte.pt</p>
      </div>
      <div class="smbk-uptime-bar">
        <div class="smbk-uptime-bar__bars" aria-hidden="true">
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 15: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 16: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 17: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 18: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 19: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 20: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 21: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 22: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 23: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 24: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 25: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 26: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 27: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 28: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 29: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 30: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 1: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 2: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 3: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 4: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 5: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 6: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 7: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 8: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 9: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 10: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 11: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 12: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 13: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 14: Up"
          ></span>
        </div>
        <p class="smbk-uptime-bar__caption" aria-hidden="true">
          <span class="smbk-uptime-bar__start">30 days ago</span>
          <span class="smbk-uptime-bar__uptime">100% up</span>
          <span class="smbk-uptime-bar__end">Today</span>
        </p>
        <p class="smbk-uptime-bar__hidden">30 days ago to Today: 100% up. No incidents.</p>
      </div>
      <dl class="site-site-card__facts">
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Answers in</dt>
          <dd class="site-site-card__figure">1.0 s</dd>
        </div>
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Up</dt>
          <dd class="site-site-card__figure">100%</dd>
        </div>
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Checked</dt>
          <dd class="site-site-card__figure">2 min ago</dd>
        </div>
      </dl>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { StatusDot } from './design-system/components/status-dot/status-dot.js';
import { Tag } from './design-system/components/tag/tag.js';
import { UptimeBar } from './design-system/components/uptime-bar/uptime-bar.js';

<Card layout="compact" className="site-site-card" aria-labelledby="site-up">
  <CardBody type="slot">
    <div className="site-site-card__top">
      <StatusDot tone="success">Up</StatusDot>
      <Tag>0.1.2-alpha</Tag>
    </div>
    <div className="site-site-card__name">
      <h3 className="site-site-card__title" id="site-up">Website</h3>
      <p className="site-site-card__address">studionorte.pt</p>
    </div>
    <UptimeBar periods={[{ status: "up", label: "Sep 15" }, { status: "up", label: "Sep 16" }, { status: "up", label: "Sep 17" }, { status: "up", label: "Sep 18" }, { status: "up", label: "Sep 19" }, { status: "up", label: "Sep 20" }, { status: "up", label: "Sep 21" }, { status: "up", label: "Sep 22" }, { status: "up", label: "Sep 23" }, { status: "up", label: "Sep 24" }, { status: "up", label: "Sep 25" }, { status: "up", label: "Sep 26" }, { status: "up", label: "Sep 27" }, { status: "up", label: "Sep 28" }, { status: "up", label: "Sep 29" }, { status: "up", label: "Sep 30" }, { status: "up", label: "Oct 1" }, { status: "up", label: "Oct 2" }, { status: "up", label: "Oct 3" }, { status: "up", label: "Oct 4" }, { status: "up", label: "Oct 5" }, { status: "up", label: "Oct 6" }, { status: "up", label: "Oct 7" }, { status: "up", label: "Oct 8" }, { status: "up", label: "Oct 9" }, { status: "up", label: "Oct 10" }, { status: "up", label: "Oct 11" }, { status: "up", label: "Oct 12" }, { status: "up", label: "Oct 13" }, { status: "up", label: "Oct 14" }]} start="30 days ago" end="Today" uptime="100% up" />
    <dl className="site-site-card__facts">
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Answers in</dt>
        <dd className="site-site-card__figure">1.0 s</dd>
      </div>
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Up</dt>
        <dd className="site-site-card__figure">100%</dd>
      </div>
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Checked</dt>
        <dd className="site-site-card__figure">2 min ago</dd>
      </div>
    </dl>
  </CardBody>
</Card>
```

### Slow

Slow: the amber dot and its word, two slow days in the bar, and the answer time that made it slow. No edge: slow is not yet trouble.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-site-card"
  aria-labelledby="site-slow"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-site-card__top">
        <span class="smbk-status-dot smbk-status-dot--tone-warning">
          <span class="smbk-status-dot__dot" aria-hidden="true"></span>
          <span class="smbk-status-dot__label">Slow</span>
        </span>
        <span class="smbk-tag smbk-tag--tone-default">
          <span class="smbk-tag__label">0.1.2-alpha</span>
        </span>
      </div>
      <div class="site-site-card__name">
        <h3 class="site-site-card__title" id="site-slow">Shop</h3>
        <p class="site-site-card__address">shop.studionorte.pt</p>
      </div>
      <div class="smbk-uptime-bar">
        <div class="smbk-uptime-bar__bars" aria-hidden="true">
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 15: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 16: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 17: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 18: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 19: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 20: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 21: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 22: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 23: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 24: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 25: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 26: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 27: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 28: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 29: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 30: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 1: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 2: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 3: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 4: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 5: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-incident"
            title="Oct 6: Incident"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-incident"
            title="Oct 7: Incident"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 8: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 9: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 10: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 11: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 12: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 13: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 14: Up"
          ></span>
        </div>
        <p class="smbk-uptime-bar__caption" aria-hidden="true">
          <span class="smbk-uptime-bar__start">30 days ago</span>
          <span class="smbk-uptime-bar__uptime">99.9% up</span>
          <span class="smbk-uptime-bar__end">Today</span>
        </p>
        <p class="smbk-uptime-bar__hidden">30 days ago to Today: 99.9% up. Incident: Oct 6, Oct 7.</p>
      </div>
      <dl class="site-site-card__facts">
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Answers in</dt>
          <dd class="site-site-card__figure">3.4 s</dd>
        </div>
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Up</dt>
          <dd class="site-site-card__figure">99.9%</dd>
        </div>
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Checked</dt>
          <dd class="site-site-card__figure">2 min ago</dd>
        </div>
      </dl>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { StatusDot } from './design-system/components/status-dot/status-dot.js';
import { Tag } from './design-system/components/tag/tag.js';
import { UptimeBar } from './design-system/components/uptime-bar/uptime-bar.js';

<Card layout="compact" className="site-site-card" aria-labelledby="site-slow">
  <CardBody type="slot">
    <div className="site-site-card__top">
      <StatusDot tone="warning">Slow</StatusDot>
      <Tag>0.1.2-alpha</Tag>
    </div>
    <div className="site-site-card__name">
      <h3 className="site-site-card__title" id="site-slow">Shop</h3>
      <p className="site-site-card__address">shop.studionorte.pt</p>
    </div>
    <UptimeBar periods={[{ status: "up", label: "Sep 15" }, { status: "up", label: "Sep 16" }, { status: "up", label: "Sep 17" }, { status: "up", label: "Sep 18" }, { status: "up", label: "Sep 19" }, { status: "up", label: "Sep 20" }, { status: "up", label: "Sep 21" }, { status: "up", label: "Sep 22" }, { status: "up", label: "Sep 23" }, { status: "up", label: "Sep 24" }, { status: "up", label: "Sep 25" }, { status: "up", label: "Sep 26" }, { status: "up", label: "Sep 27" }, { status: "up", label: "Sep 28" }, { status: "up", label: "Sep 29" }, { status: "up", label: "Sep 30" }, { status: "up", label: "Oct 1" }, { status: "up", label: "Oct 2" }, { status: "up", label: "Oct 3" }, { status: "up", label: "Oct 4" }, { status: "up", label: "Oct 5" }, { status: "incident", label: "Oct 6" }, { status: "incident", label: "Oct 7" }, { status: "up", label: "Oct 8" }, { status: "up", label: "Oct 9" }, { status: "up", label: "Oct 10" }, { status: "up", label: "Oct 11" }, { status: "up", label: "Oct 12" }, { status: "up", label: "Oct 13" }, { status: "up", label: "Oct 14" }]} start="30 days ago" end="Today" uptime="99.9% up" />
    <dl className="site-site-card__facts">
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Answers in</dt>
        <dd className="site-site-card__figure">3.4 s</dd>
      </div>
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Up</dt>
        <dd className="site-site-card__figure">99.9%</dd>
      </div>
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Checked</dt>
        <dd className="site-site-card__figure">2 min ago</dd>
      </div>
    </dl>
  </CardBody>
</Card>
```

### Down

Down: the red dot and its word, the danger edge round the card, and no answer time.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact smbk-card--danger-edge site-site-card"
  aria-labelledby="site-down"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-site-card__top">
        <span class="smbk-status-dot smbk-status-dot--tone-danger">
          <span class="smbk-status-dot__dot" aria-hidden="true"></span>
          <span class="smbk-status-dot__label">Down</span>
        </span>
        <span class="smbk-tag smbk-tag--tone-default">
          <span class="smbk-tag__label">0.1.2-alpha</span>
        </span>
      </div>
      <div class="site-site-card__name">
        <h3 class="site-site-card__title" id="site-down">Blog</h3>
        <p class="site-site-card__address">blog.studionorte.pt</p>
      </div>
      <div class="smbk-uptime-bar">
        <div class="smbk-uptime-bar__bars" aria-hidden="true">
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 15: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 16: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 17: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 18: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 19: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 20: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 21: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 22: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 23: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 24: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 25: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-incident"
            title="Sep 26: Incident"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 27: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 28: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 29: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Sep 30: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 1: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 2: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 3: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 4: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 5: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 6: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 7: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 8: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-outage"
            title="Oct 9: Outage"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-incident"
            title="Oct 10: Incident"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 11: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 12: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 13: Up"
          ></span>
          <span
            class="smbk-uptime-bar__bar smbk-uptime-bar__bar--status-up"
            title="Oct 14: Up"
          ></span>
        </div>
        <p class="smbk-uptime-bar__caption" aria-hidden="true">
          <span class="smbk-uptime-bar__start">30 days ago</span>
          <span class="smbk-uptime-bar__uptime">98.7% up</span>
          <span class="smbk-uptime-bar__end">Today</span>
        </p>
        <p class="smbk-uptime-bar__hidden">30 days ago to Today: 98.7% up. Incident: Sep 26, Oct 10. Outage: Oct 9.</p>
      </div>
      <dl class="site-site-card__facts">
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Answers in</dt>
          <dd class="site-site-card__figure">No answer</dd>
        </div>
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Up</dt>
          <dd class="site-site-card__figure">98.7%</dd>
        </div>
        <div class="site-site-card__fact">
          <dt class="site-site-card__label">Checked</dt>
          <dd class="site-site-card__figure">2 min ago</dd>
        </div>
      </dl>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { StatusDot } from './design-system/components/status-dot/status-dot.js';
import { Tag } from './design-system/components/tag/tag.js';
import { UptimeBar } from './design-system/components/uptime-bar/uptime-bar.js';

<Card layout="compact" danger-edge className="site-site-card" aria-labelledby="site-down">
  <CardBody type="slot">
    <div className="site-site-card__top">
      <StatusDot tone="danger">Down</StatusDot>
      <Tag>0.1.2-alpha</Tag>
    </div>
    <div className="site-site-card__name">
      <h3 className="site-site-card__title" id="site-down">Blog</h3>
      <p className="site-site-card__address">blog.studionorte.pt</p>
    </div>
    <UptimeBar periods={[{ status: "up", label: "Sep 15" }, { status: "up", label: "Sep 16" }, { status: "up", label: "Sep 17" }, { status: "up", label: "Sep 18" }, { status: "up", label: "Sep 19" }, { status: "up", label: "Sep 20" }, { status: "up", label: "Sep 21" }, { status: "up", label: "Sep 22" }, { status: "up", label: "Sep 23" }, { status: "up", label: "Sep 24" }, { status: "up", label: "Sep 25" }, { status: "incident", label: "Sep 26" }, { status: "up", label: "Sep 27" }, { status: "up", label: "Sep 28" }, { status: "up", label: "Sep 29" }, { status: "up", label: "Sep 30" }, { status: "up", label: "Oct 1" }, { status: "up", label: "Oct 2" }, { status: "up", label: "Oct 3" }, { status: "up", label: "Oct 4" }, { status: "up", label: "Oct 5" }, { status: "up", label: "Oct 6" }, { status: "up", label: "Oct 7" }, { status: "up", label: "Oct 8" }, { status: "outage", label: "Oct 9" }, { status: "incident", label: "Oct 10" }, { status: "up", label: "Oct 11" }, { status: "up", label: "Oct 12" }, { status: "up", label: "Oct 13" }, { status: "up", label: "Oct 14" }]} start="30 days ago" end="Today" uptime="98.7% up" />
    <dl className="site-site-card__facts">
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Answers in</dt>
        <dd className="site-site-card__figure">No answer</dd>
      </div>
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Up</dt>
        <dd className="site-site-card__figure">98.7%</dd>
      </div>
      <div className="site-site-card__fact">
        <dt className="site-site-card__label">Checked</dt>
        <dd className="site-site-card__figure">2 min ago</dd>
      </div>
    </dl>
  </CardBody>
</Card>
```

## Purpose

Shows one site on an overview: whether it answers now, the version it shows, its name and address, its last thirty days as an uptime bar, and how fast it answers, how much of the time it was up and when it was last checked. Three statuses: up, slow and down.

## Anatomy

- The card, the Card component in its compact layout, its slot body holding the rest. A site that is down adds the card's danger edge.
- The top line: the status, the Status dot component with its word, and the version, the Tag component.
- The name in the large label style over its address.
- The Uptime bar component: one bar a day, with the start, the share up and the end under it.
- The figures, under a quiet line: three names in the extra small body style, each over its figure in the medium label style.

## When to use

- On an overview of the sites a team runs, where a reader checks that each one answers.

## When not to use

- For a site with no history of checks. Use a table row with its status and version.
- For one incident's story. Use a page with its timeline.

## Behavior

The page sets the status: the dot's tone and word, and for a site that is down the danger edge. Slow has no edge: it is worth a look, not yet trouble. The card takes no focus; to open a site's details from it, put a link in its title.

## Accessibility

### What it does for you

- The card is an article named by its title.
- The status is said in words beside its dot, never only by the dot's color or the edge.
- The uptime bar is read as one summary in words; its bars and caption are hidden from assistive technology.
- The figures are a description list.

### What you must do

- Make the title a heading at the level the page needs.
- Write a figure with no value in words, such as "No answer", rather than a dash.

### How to test

- With a screen reader, each card is read as an article by its title, its status in words, the uptime as one summary, and the figures as names and values.
- In a forced-color mode, a site that is down still says so in words beside its dot.

## Usage rules

### Do

- Check the sites often enough that "Checked" stays a few minutes old.
- Keep the version in the tag short.

### Don't

- Show that a site is down by the edge alone.
- Put the danger edge on a slow site.

## Stylesheet

```css
/* site-site-card — Site card, a block: one site at a glance, whether it answers, the version it shows, its last
 * thirty days and three figures. Copy it into your project and rename site- to your project's own prefix. The frame
 * is the Card component in its compact layout, a site that is down with its danger edge; the status dot, tag and
 * uptime bar are the system's own. The block draws only the lines inside the card's body and the figures' line. */

.site-site-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--smbk-space-inline-sm);
}

.site-site-card__name {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-2);
}

.site-site-card__title {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-lg-font-family);
  font-size: var(--smbk-typography-label-lg-font-size);
  font-weight: var(--smbk-typography-label-lg-font-weight);
  line-height: var(--smbk-typography-label-lg-line-height);
  letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
}

.site-site-card__address,
.site-site-card__label {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-xs-font-family);
  font-size: var(--smbk-typography-body-xs-font-size);
  font-weight: var(--smbk-typography-body-xs-font-weight);
  line-height: var(--smbk-typography-body-xs-line-height);
  letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}

/* Three figures side by side under a quiet line, the same room above and below the line. */
.site-site-card__facts {
  display: flex;
  gap: var(--smbk-space-inline-md);
  margin: 0;
  padding-block-start: var(--smbk-space-inset-lg);
  border-block-start: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}

.site-site-card__fact {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--smbk-space-2);
  min-width: 0;
}

.site-site-card__figure {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
  font-variant-numeric: tabular-nums;
}
```