# Project card

One project at a glance: its stage in words, three figures, its recent work and how many places are taken.

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, Badge, Sparkline, Capacity meter.

## Examples

### Usage

Live: the success badge, three figures, the work of the last weeks, and one of two agent places taken.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-project-card"
  aria-labelledby="project-live"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-project-card__top">
        <span class="site-project-card__mark" aria-hidden="true">SN</span>
        <div class="site-project-card__name">
          <h3 class="site-project-card__title" id="project-live">Studio Norte website</h3>
          <p class="site-project-card__address">studionorte.pt</p>
        </div>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-success smbk-badge--size-sm site-project-card__status">
          <span class="smbk-badge__label">Live</span>
        </span>
      </div>
      <dl class="site-project-card__facts">
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Issues</dt>
          <dd class="site-project-card__figure">18</dd>
        </div>
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Pull Requests</dt>
          <dd class="site-project-card__figure">2</dd>
        </div>
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Release</dt>
          <dd class="site-project-card__figure">0.1.3</dd>
        </div>
      </dl>
      <span
        data-entrance="load"
        class="smbk-sparkline smbk-sparkline--area"
        role="img"
        aria-label="Work over the last 12 weeks, rising"
      ><span class="smbk-sparkline__plot"><svg class="smbk-sparkline__svg" viewBox="0 0 100 32" preserveAspectRatio="none" focusable="false" aria-hidden="true"><path class="smbk-sparkline__area" d="M0 18 C3.03 17.5 6.06 16.5 9.09 16.5 C12.12 16.5 15.15 18 18.18 18 C21.21 18 24.24 15 27.27 15 C30.3 15 33.33 16.5 36.36 16.5 C39.39 16.5 42.42 15.5 45.45 15 C48.48 14.5 51.52 13.5 54.55 13.5 C57.58 13.5 60.61 15 63.64 15 C66.67 15 69.7 12 72.73 12 C75.76 12 78.79 13.5 81.82 13.5 C84.85 13.5 87.88 11.17 90.91 10.5 C93.94 9.83 96.97 9.5 100 9 L100 32 L0 32 Z"></path><path class="smbk-sparkline__line" d="M0 18 C3.03 17.5 6.06 16.5 9.09 16.5 C12.12 16.5 15.15 18 18.18 18 C21.21 18 24.24 15 27.27 15 C30.3 15 33.33 16.5 36.36 16.5 C39.39 16.5 42.42 15.5 45.45 15 C48.48 14.5 51.52 13.5 54.55 13.5 C57.58 13.5 60.61 15 63.64 15 C66.67 15 69.7 12 72.73 12 C75.76 12 78.79 13.5 81.82 13.5 C84.85 13.5 87.88 11.17 90.91 10.5 C93.94 9.83 96.97 9.5 100 9"></path></svg><span class="smbk-sparkline__dot" style="left:100.00000000000001%;top:28.125%"></span></span></span>
      <div class="site-project-card__footer">
        <div
          aria-label="Agent places"
          class="smbk-capacity-meter"
          role="meter"
          aria-valuemin="0"
          aria-valuemax="2"
          aria-valuenow="1"
          aria-valuetext="1 of 2 places"
        >
          <span class="smbk-capacity-meter__segments" aria-hidden="true">
            <span class="smbk-capacity-meter__segment smbk-capacity-meter__segment--filled"></span>
            <span class="smbk-capacity-meter__segment"></span>
          </span>
          <span class="smbk-capacity-meter__words" aria-hidden="true">1 of 2 places</span>
        </div>
        <span class="site-project-card__time">updated 2 h ago</span>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Sparkline } from './design-system/components/sparkline/sparkline.js';
import { CapacityMeter } from './design-system/components/capacity-meter/capacity-meter.js';

<Card layout="compact" className="site-project-card" aria-labelledby="project-live">
  <CardBody type="slot">
    <div className="site-project-card__top">
      <span className="site-project-card__mark" aria-hidden="true">SN</span>
      <div className="site-project-card__name">
        <h3 className="site-project-card__title" id="project-live">Studio Norte website</h3>
        <p className="site-project-card__address">studionorte.pt</p>
      </div>
      <Badge className="site-project-card__status" tone="success" size="sm">Live</Badge>
    </div>
    <dl className="site-project-card__facts">
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Issues</dt>
        <dd className="site-project-card__figure">18</dd>
      </div>
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Pull Requests</dt>
        <dd className="site-project-card__figure">2</dd>
      </div>
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Release</dt>
        <dd className="site-project-card__figure">0.1.3</dd>
      </div>
    </dl>
    <Sparkline values={[4, 5, 4, 6, 5, 6, 7, 6, 8, 7, 9, 10]} min={0} max={12} summary="Work over the last 12 weeks, rising" />
    <div className="site-project-card__footer">
      <CapacityMeter filled={1} segments={2} aria-label="Agent places" />
      <span className="site-project-card__time">updated 2 h ago</span>
    </div>
  </CardBody>
</Card>
```

### Building

Building: the info badge, and both places taken.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-project-card"
  aria-labelledby="project-building"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-project-card__top">
        <span class="site-project-card__mark" aria-hidden="true">SN</span>
        <div class="site-project-card__name">
          <h3 class="site-project-card__title" id="project-building">Studio Norte shop</h3>
          <p class="site-project-card__address">shop.studionorte.pt</p>
        </div>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-info smbk-badge--size-sm site-project-card__status">
          <span class="smbk-badge__label">Building</span>
        </span>
      </div>
      <dl class="site-project-card__facts">
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Issues</dt>
          <dd class="site-project-card__figure">31</dd>
        </div>
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Pull Requests</dt>
          <dd class="site-project-card__figure">4</dd>
        </div>
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Release</dt>
          <dd class="site-project-card__figure">None yet</dd>
        </div>
      </dl>
      <span
        data-entrance="load"
        class="smbk-sparkline smbk-sparkline--area"
        role="img"
        aria-label="Work over the last 12 weeks, rising"
      ><span class="smbk-sparkline__plot"><svg class="smbk-sparkline__svg" viewBox="0 0 100 32" preserveAspectRatio="none" focusable="false" aria-hidden="true"><path class="smbk-sparkline__area" d="M0 18 C3.03 17.5 6.06 16.5 9.09 16.5 C12.12 16.5 15.15 18 18.18 18 C21.21 18 24.24 15 27.27 15 C30.3 15 33.33 16.5 36.36 16.5 C39.39 16.5 42.42 15.5 45.45 15 C48.48 14.5 51.52 13.5 54.55 13.5 C57.58 13.5 60.61 15 63.64 15 C66.67 15 69.7 12 72.73 12 C75.76 12 78.79 13.5 81.82 13.5 C84.85 13.5 87.88 11.17 90.91 10.5 C93.94 9.83 96.97 9.5 100 9 L100 32 L0 32 Z"></path><path class="smbk-sparkline__line" d="M0 18 C3.03 17.5 6.06 16.5 9.09 16.5 C12.12 16.5 15.15 18 18.18 18 C21.21 18 24.24 15 27.27 15 C30.3 15 33.33 16.5 36.36 16.5 C39.39 16.5 42.42 15.5 45.45 15 C48.48 14.5 51.52 13.5 54.55 13.5 C57.58 13.5 60.61 15 63.64 15 C66.67 15 69.7 12 72.73 12 C75.76 12 78.79 13.5 81.82 13.5 C84.85 13.5 87.88 11.17 90.91 10.5 C93.94 9.83 96.97 9.5 100 9"></path></svg><span class="smbk-sparkline__dot" style="left:100.00000000000001%;top:28.125%"></span></span></span>
      <div class="site-project-card__footer">
        <div
          aria-label="Agent places"
          class="smbk-capacity-meter"
          role="meter"
          aria-valuemin="0"
          aria-valuemax="2"
          aria-valuenow="2"
          aria-valuetext="2 of 2 places"
        >
          <span class="smbk-capacity-meter__segments" aria-hidden="true">
            <span class="smbk-capacity-meter__segment smbk-capacity-meter__segment--filled"></span>
            <span class="smbk-capacity-meter__segment smbk-capacity-meter__segment--filled"></span>
          </span>
          <span class="smbk-capacity-meter__words" aria-hidden="true">2 of 2 places</span>
        </div>
        <span class="site-project-card__time">updated 2 h ago</span>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Sparkline } from './design-system/components/sparkline/sparkline.js';
import { CapacityMeter } from './design-system/components/capacity-meter/capacity-meter.js';

<Card layout="compact" className="site-project-card" aria-labelledby="project-building">
  <CardBody type="slot">
    <div className="site-project-card__top">
      <span className="site-project-card__mark" aria-hidden="true">SN</span>
      <div className="site-project-card__name">
        <h3 className="site-project-card__title" id="project-building">Studio Norte shop</h3>
        <p className="site-project-card__address">shop.studionorte.pt</p>
      </div>
      <Badge className="site-project-card__status" tone="info" size="sm">Building</Badge>
    </div>
    <dl className="site-project-card__facts">
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Issues</dt>
        <dd className="site-project-card__figure">31</dd>
      </div>
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Pull Requests</dt>
        <dd className="site-project-card__figure">4</dd>
      </div>
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Release</dt>
        <dd className="site-project-card__figure">None yet</dd>
      </div>
    </dl>
    <Sparkline values={[4, 5, 4, 6, 5, 6, 7, 6, 8, 7, 9, 10]} min={0} max={12} summary="Work over the last 12 weeks, rising" />
    <div className="site-project-card__footer">
      <CapacityMeter filled={2} segments={2} aria-label="Agent places" />
      <span className="site-project-card__time">updated 2 h ago</span>
    </div>
  </CardBody>
</Card>
```

### Paused

Paused: the gray badge, a steady line, and both places free.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-project-card"
  aria-labelledby="project-paused"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-project-card__top">
        <span class="site-project-card__mark" aria-hidden="true">SN</span>
        <div class="site-project-card__name">
          <h3 class="site-project-card__title" id="project-paused">Studio Norte blog</h3>
          <p class="site-project-card__address">blog.studionorte.pt</p>
        </div>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-default smbk-badge--size-sm site-project-card__status">
          <span class="smbk-badge__label">Paused</span>
        </span>
      </div>
      <dl class="site-project-card__facts">
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Issues</dt>
          <dd class="site-project-card__figure">6</dd>
        </div>
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Pull Requests</dt>
          <dd class="site-project-card__figure">0</dd>
        </div>
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Release</dt>
          <dd class="site-project-card__figure">1.2</dd>
        </div>
      </dl>
      <span
        data-entrance="load"
        class="smbk-sparkline smbk-sparkline--area"
        role="img"
        aria-label="Work over the last 12 weeks, steady"
      ><span class="smbk-sparkline__plot"><svg class="smbk-sparkline__svg" viewBox="0 0 100 32" preserveAspectRatio="none" focusable="false" aria-hidden="true"><path class="smbk-sparkline__area" d="M0 15 C3.03 14.5 6.06 13.5 9.09 13.5 C12.12 13.5 15.15 15 18.18 15 C21.21 15 24.24 15 27.27 15 C30.3 15 33.33 13.5 36.36 13.5 C39.39 13.5 42.42 15 45.45 15 C48.48 15 51.52 13.5 54.55 13.5 C57.58 13.5 60.61 15 63.64 15 C66.67 15 69.7 15 72.73 15 C75.76 15 78.79 13.5 81.82 13.5 C84.85 13.5 87.88 15 90.91 15 C93.94 15 96.97 15 100 15 L100 32 L0 32 Z"></path><path class="smbk-sparkline__line" d="M0 15 C3.03 14.5 6.06 13.5 9.09 13.5 C12.12 13.5 15.15 15 18.18 15 C21.21 15 24.24 15 27.27 15 C30.3 15 33.33 13.5 36.36 13.5 C39.39 13.5 42.42 15 45.45 15 C48.48 15 51.52 13.5 54.55 13.5 C57.58 13.5 60.61 15 63.64 15 C66.67 15 69.7 15 72.73 15 C75.76 15 78.79 13.5 81.82 13.5 C84.85 13.5 87.88 15 90.91 15 C93.94 15 96.97 15 100 15"></path></svg><span class="smbk-sparkline__dot" style="left:100.00000000000001%;top:46.875%"></span></span></span>
      <div class="site-project-card__footer">
        <div
          aria-label="Agent places"
          class="smbk-capacity-meter"
          role="meter"
          aria-valuemin="0"
          aria-valuemax="2"
          aria-valuenow="0"
          aria-valuetext="Both free"
        >
          <span class="smbk-capacity-meter__segments" aria-hidden="true">
            <span class="smbk-capacity-meter__segment"></span>
            <span class="smbk-capacity-meter__segment"></span>
          </span>
          <span class="smbk-capacity-meter__words" aria-hidden="true">Both free</span>
        </div>
        <span class="site-project-card__time">updated 5 days ago</span>
      </div>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Sparkline } from './design-system/components/sparkline/sparkline.js';
import { CapacityMeter } from './design-system/components/capacity-meter/capacity-meter.js';

<Card layout="compact" className="site-project-card" aria-labelledby="project-paused">
  <CardBody type="slot">
    <div className="site-project-card__top">
      <span className="site-project-card__mark" aria-hidden="true">SN</span>
      <div className="site-project-card__name">
        <h3 className="site-project-card__title" id="project-paused">Studio Norte blog</h3>
        <p className="site-project-card__address">blog.studionorte.pt</p>
      </div>
      <Badge className="site-project-card__status" size="sm">Paused</Badge>
    </div>
    <dl className="site-project-card__facts">
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Issues</dt>
        <dd className="site-project-card__figure">6</dd>
      </div>
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Pull Requests</dt>
        <dd className="site-project-card__figure">0</dd>
      </div>
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Release</dt>
        <dd className="site-project-card__figure">1.2</dd>
      </div>
    </dl>
    <Sparkline values={[6, 7, 6, 6, 7, 6, 7, 6, 6, 7, 6, 6]} min={0} max={12} summary="Work over the last 12 weeks, steady" />
    <div className="site-project-card__footer">
      <CapacityMeter filled={0} segments={2} aria-label="Agent places">Both free</CapacityMeter>
      <span className="site-project-card__time">updated 5 days ago</span>
    </div>
  </CardBody>
</Card>
```

### Idea

An idea: no card yet, a sunken box with a dashed edge, and a line saying what it waits for.

```html
<article class="site-project-card site-project-card--stage-idea" aria-labelledby="project-idea">
  <div class="site-project-card__top">
    <span class="site-project-card__mark" aria-hidden="true">SN</span>
    <div class="site-project-card__name">
      <h3 class="site-project-card__title" id="project-idea">Studio Norte booking</h3>
      <p class="site-project-card__address">Not built yet</p>
    </div>
    <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-warning smbk-badge--size-sm site-project-card__status">
      <span class="smbk-badge__label">Idea</span>
    </span>
  </div>
  <p class="site-project-card__summary">An idea, not built yet. One decision waits for you before it can start.</p>
  <div class="site-project-card__footer">
    <div
      aria-label="Agent places"
      class="smbk-capacity-meter"
      role="meter"
      aria-valuemin="0"
      aria-valuemax="2"
      aria-valuenow="0"
      aria-valuetext="Both free"
    >
      <span class="smbk-capacity-meter__segments" aria-hidden="true">
        <span class="smbk-capacity-meter__segment"></span>
        <span class="smbk-capacity-meter__segment"></span>
      </span>
      <span class="smbk-capacity-meter__words" aria-hidden="true">Both free</span>
    </div>
    <span class="site-project-card__time">noted Oct 3</span>
  </div>
</article>
```

```tsx
import { Badge } from './design-system/components/badge/badge.js';
import { CapacityMeter } from './design-system/components/capacity-meter/capacity-meter.js';

<article className="site-project-card site-project-card--stage-idea" aria-labelledby="project-idea">
  <div className="site-project-card__top">
    <span className="site-project-card__mark" aria-hidden="true">SN</span>
    <div className="site-project-card__name">
      <h3 className="site-project-card__title" id="project-idea">Studio Norte booking</h3>
      <p className="site-project-card__address">Not built yet</p>
    </div>
    <Badge className="site-project-card__status" tone="warning" size="sm">Idea</Badge>
  </div>
  <p className="site-project-card__summary">An idea, not built yet. One decision waits for you before it can start.</p>
  <div className="site-project-card__footer">
    <CapacityMeter filled={0} segments={2} aria-label="Agent places">Both free</CapacityMeter>
    <span className="site-project-card__time">noted Oct 3</span>
  </div>
</article>
```

### In a grid

Projects side by side, as many as the room allows; an idea sits among them as a box still to fill.

```html
<article
  class="smbk-card smbk-card--surface-slab smbk-card--layout-compact site-project-card"
  aria-labelledby="project-grid-1"
>
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <div class="site-project-card__top">
        <span class="site-project-card__mark" aria-hidden="true">SN</span>
        <div class="site-project-card__name">
          <h3 class="site-project-card__title" id="project-grid-1">Studio Norte website</h3>
          <p class="site-project-card__address">studionorte.pt</p>
        </div>
        <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-success smbk-badge--size-sm site-project-card__status">
          <span class="smbk-badge__label">Live</span>
        </span>
      </div>
      <dl class="site-project-card__facts">
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Issues</dt>
          <dd class="site-project-card__figure">18</dd>
        </div>
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Pull Requests</dt>
          <dd class="site-project-card__figure">2</dd>
        </div>
        <div class="site-project-card__fact">
          <dt class="site-project-card__label">Release</dt>
          <dd class="site-project-card__figure">0.1.3</dd>
        </div>
      </dl>
      <span
        data-entrance="load"
        class="smbk-sparkline smbk-sparkline--area"
        role="img"
        aria-label="Work over the last 12 weeks, rising"
      ><span class="smbk-sparkline__plot"><svg class="smbk-sparkline__svg" viewBox="0 0 100 32" preserveAspectRatio="none" focusable="false" aria-hidden="true"><path class="smbk-sparkline__area" d="M0 18 C3.03 17.5 6.06 16.5 9.09 16.5 C12.12 16.5 15.15 18 18.18 18 C21.21 18 24.24 15 27.27 15 C30.3 15 33.33 16.5 36.36 16.5 C39.39 16.5 42.42 15.5 45.45 15 C48.48 14.5 51.52 13.5 54.55 13.5 C57.58 13.5 60.61 15 63.64 15 C66.67 15 69.7 12 72.73 12 C75.76 12 78.79 13.5 81.82 13.5 C84.85 13.5 87.88 11.17 90.91 10.5 C93.94 9.83 96.97 9.5 100 9 L100 32 L0 32 Z"></path><path class="smbk-sparkline__line" d="M0 18 C3.03 17.5 6.06 16.5 9.09 16.5 C12.12 16.5 15.15 18 18.18 18 C21.21 18 24.24 15 27.27 15 C30.3 15 33.33 16.5 36.36 16.5 C39.39 16.5 42.42 15.5 45.45 15 C48.48 14.5 51.52 13.5 54.55 13.5 C57.58 13.5 60.61 15 63.64 15 C66.67 15 69.7 12 72.73 12 C75.76 12 78.79 13.5 81.82 13.5 C84.85 13.5 87.88 11.17 90.91 10.5 C93.94 9.83 96.97 9.5 100 9"></path></svg><span class="smbk-sparkline__dot" style="left:100.00000000000001%;top:28.125%"></span></span></span>
      <div class="site-project-card__footer">
        <div
          aria-label="Agent places"
          class="smbk-capacity-meter"
          role="meter"
          aria-valuemin="0"
          aria-valuemax="2"
          aria-valuenow="1"
          aria-valuetext="1 of 2 places"
        >
          <span class="smbk-capacity-meter__segments" aria-hidden="true">
            <span class="smbk-capacity-meter__segment smbk-capacity-meter__segment--filled"></span>
            <span class="smbk-capacity-meter__segment"></span>
          </span>
          <span class="smbk-capacity-meter__words" aria-hidden="true">1 of 2 places</span>
        </div>
        <span class="site-project-card__time">updated 2 h ago</span>
      </div>
    </div>
  </div>
</article>
<article class="site-project-card site-project-card--stage-idea" aria-labelledby="project-grid-2">
  <div class="site-project-card__top">
    <span class="site-project-card__mark" aria-hidden="true">SN</span>
    <div class="site-project-card__name">
      <h3 class="site-project-card__title" id="project-grid-2">Studio Norte booking</h3>
      <p class="site-project-card__address">Not built yet</p>
    </div>
    <span class="smbk-badge smbk-badge--look-soft smbk-badge--tone-warning smbk-badge--size-sm site-project-card__status">
      <span class="smbk-badge__label">Idea</span>
    </span>
  </div>
  <p class="site-project-card__summary">An idea, not built yet. One decision waits for you before it can start.</p>
  <div class="site-project-card__footer">
    <div
      aria-label="Agent places"
      class="smbk-capacity-meter"
      role="meter"
      aria-valuemin="0"
      aria-valuemax="2"
      aria-valuenow="0"
      aria-valuetext="Both free"
    >
      <span class="smbk-capacity-meter__segments" aria-hidden="true">
        <span class="smbk-capacity-meter__segment"></span>
        <span class="smbk-capacity-meter__segment"></span>
      </span>
      <span class="smbk-capacity-meter__words" aria-hidden="true">Both free</span>
    </div>
    <span class="site-project-card__time">noted Oct 3</span>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Sparkline } from './design-system/components/sparkline/sparkline.js';
import { CapacityMeter } from './design-system/components/capacity-meter/capacity-meter.js';

<Card layout="compact" className="site-project-card" aria-labelledby="project-grid-1">
  <CardBody type="slot">
    <div className="site-project-card__top">
      <span className="site-project-card__mark" aria-hidden="true">SN</span>
      <div className="site-project-card__name">
        <h3 className="site-project-card__title" id="project-grid-1">Studio Norte website</h3>
        <p className="site-project-card__address">studionorte.pt</p>
      </div>
      <Badge className="site-project-card__status" tone="success" size="sm">Live</Badge>
    </div>
    <dl className="site-project-card__facts">
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Issues</dt>
        <dd className="site-project-card__figure">18</dd>
      </div>
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Pull Requests</dt>
        <dd className="site-project-card__figure">2</dd>
      </div>
      <div className="site-project-card__fact">
        <dt className="site-project-card__label">Release</dt>
        <dd className="site-project-card__figure">0.1.3</dd>
      </div>
    </dl>
    <Sparkline values={[4, 5, 4, 6, 5, 6, 7, 6, 8, 7, 9, 10]} min={0} max={12} summary="Work over the last 12 weeks, rising" />
    <div className="site-project-card__footer">
      <CapacityMeter filled={1} segments={2} aria-label="Agent places" />
      <span className="site-project-card__time">updated 2 h ago</span>
    </div>
  </CardBody>
</Card>
<article className="site-project-card site-project-card--stage-idea" aria-labelledby="project-grid-2">
  <div className="site-project-card__top">
    <span className="site-project-card__mark" aria-hidden="true">SN</span>
    <div className="site-project-card__name">
      <h3 className="site-project-card__title" id="project-grid-2">Studio Norte booking</h3>
      <p className="site-project-card__address">Not built yet</p>
    </div>
    <Badge className="site-project-card__status" tone="warning" size="sm">Idea</Badge>
  </div>
  <p className="site-project-card__summary">An idea, not built yet. One decision waits for you before it can start.</p>
  <div className="site-project-card__footer">
    <CapacityMeter filled={0} segments={2} aria-label="Agent places">Both free</CapacityMeter>
    <span className="site-project-card__time">noted Oct 3</span>
  </div>
</article>
```

## Purpose

Shows one project on an overview: its name and address, its stage, three figures a reader checks first, how busy it has been lately and how many of its places are taken. Four stages: live, building, paused and an idea.

## Anatomy

- The card, the Card component in its compact layout, its slot body holding the rest.
- The top line: the project's mark, its initials on a small dark square; its name in the large label style over its address; its stage as a small badge.
- The figures: three names in the extra small body style, each over its figure in the large label style.
- The line, the Sparkline component, of its work over the last weeks, with a summary in words.
- The footer, under a quiet line: the places taken, the Capacity meter component, and when it last changed.
- An idea is not a card yet: a sunken box with a dashed edge, the top line, a line saying what it waits for, and the footer.

## When to use

- On an overview of projects, where a reader checks which are live, which are moving and which wait.

## When not to use

- For one project's whole story. Use its own page, with these figures at its top.
- For a long list of projects. Use a table.

## Behavior

The page sets the stage: the badge and its words, and for an idea the dashed box in place of the card. The card takes no focus; to open a project from it, put a link in its title.

## Accessibility

### What it does for you

- The card is an article named by its title.
- The stage is said in words in the badge.
- The figures are a description list: each name is the term and its figure the detail.
- The places are a meter, its value in words.
- The mark is hidden from assistive technology, since the title names the project.

### What you must do

- Make the title a heading at the level the page needs.
- Give the line a summary in words, such as "Work over the last 12 weeks, rising"; without one, hide it.
- Name the places for what they count, such as "Agent places".

### How to test

- With a screen reader, each card is read as an article by its title, then its stage, its figures as names and values, the line's summary and the places taken.
- In a forced-color mode, the stage still reads in the badge's words.

## Usage rules

### Do

- Choose figures that answer the reader's first question about a project.
- Keep an idea in the same grid as the projects that are built.

### Don't

- Show the stage by the badge's color alone.
- Draw an idea as a card: it has nothing to measure yet.

## Stylesheet

```css
/* site-project-card — Project card, a block: one project at a glance, its stage in words, three figures, how busy
 * it has been and how many of its places are taken. Copy it into your project and rename site- to your project's
 * own prefix. Live, building and paused are the Card component in its compact layout, with the Badge, Sparkline
 * and Capacity meter inside; the block draws only the lines inside the card's body and the footer's line. An idea
 * is not a card yet: the block draws it as a sunken box with a dashed edge, which no component has. */

.site-project-card__top,
.site-project-card__footer {
  display: flex;
  align-items: center;
}

.site-project-card__top {
  gap: var(--smbk-space-inline-md);
}

/* The project's mark: its initials on a small dark square. */
.site-project-card__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--smbk-size-40);
  height: var(--smbk-size-40);
  border-radius: var(--smbk-radius-control-md);
  background: var(--smbk-color-surface-inverse);
  color: var(--smbk-color-text-inverse);
  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);
}

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

.site-project-card__title,
.site-project-card__figure {
  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-project-card__address,
.site-project-card__label,
.site-project-card__time {
  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);
}

.site-project-card__status {
  flex: none;
}

/* Three figures side by side, each a name over its figure. */
.site-project-card__facts {
  display: flex;
  gap: var(--smbk-space-inline-md);
  margin: 0;
}

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

.site-project-card__figure {
  font-variant-numeric: tabular-nums;
}

/* The footer: a quiet line above it, the same room above and below the line, the places at the start and when it
   last changed at the end. */
.site-project-card__footer {
  gap: var(--smbk-space-inline-sm);
  padding-block-start: var(--smbk-space-inset-lg);
  border-block-start: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}

.site-project-card__time {
  margin-inline-start: auto;
  text-align: end;
}

/* An idea: no card yet, a sunken box with a dashed edge, as the card's compact layout spaces it. */
.site-project-card--stage-idea {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
  padding: var(--smbk-space-inset-lg);
  border: var(--smbk-border-width-hairline) dashed var(--smbk-color-border-strong);
  border-radius: var(--smbk-radius-container-md);
  background: var(--smbk-color-surface-sunken);
}

.site-project-card__summary {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
```