Score card

A compact card showing one dimension with its score, threshold tier, and most-recent-assessment timestamp. The smallest unit of a results grid.

Badge Card ScoreBar

Preview

Communication

Passing

4.2

Last assessment: 3 days ago

Source

apps/docs/app/recipes/score-card/recipe.tsx

import { Badge, Card, ScoreBar } from '@hey-mike/tungsten';

export default function ScoreCardRecipe() {
  return (
    <Card>
      <header className="mb-3 flex items-center justify-between gap-3">
        <h3 className="text-ink-1 text-sm font-medium">Communication</h3>
        <Badge variant="success" emphasis="subtle">
          Passing
        </Badge>
      </header>

      <ScoreBar score={4.2} max={5} />

      <p className="text-ink-3 mt-2 text-xs">Last assessment: 3 days ago</p>
    </Card>
  );
}

import { Badge, Card, ScoreBar } from '@hey-mike/tungsten';

export default function ScoreCardRecipe() {
  return (
    <Card>
      <header className="mb-3 flex items-center justify-between gap-3">
        <h3 className="text-ink-1 text-sm font-medium">Communication</h3>
        <Badge variant="success" emphasis="subtle">
          Passing
        </Badge>
      </header>

      <ScoreBar score={4.2} max={5} />

      <p className="text-ink-3 mt-2 text-xs">Last assessment: 3 days ago</p>
    </Card>
  );
}