Scoreboard
A strip of key numbers at the top of a screen, like open invoices, revenue or overdue amount, each with an optional trend and spark chart.
Master
Switch between trends, spark charts and six cards. Past four cards the strip sits in a Conveyor, with arrows when the cards do not fit. Turn on selectable to pick a card.
Usage
Use Scoreboard for the 3 to 6 numbers that sum up a screen. It is one component: pass items as data. Each item is a card with a title, the metric, and optional badge, metadata line, trend (arrow, value and unit, colored by status) and spark chart (a small line drawn from points). Cards share the width and run side by side with no gap; every card but the last has a thin line down its right side, the full height of the card. selectable turns each card into a button: picking one marks it selected, like a filter for the list below, and picking it again clears it. Past four cards the Scoreboard puts itself in a Conveyor, so arrows at both ends move the row; the arrows show only when the cards do not fit. See contracts/scoreboard.json for the full contract. On a box narrower than 640px, the kit's mobile break, the cards take a smaller minimum so two are in view, the strip snaps card by card, and the Conveyor's arrows give way to swiping.
Do's
- The top of a list or dashboard screen, to sum it up in a few numbers.
- Numbers that filter the list below: make it selectable.
- More than four numbers: they stay in one strip, which the Conveyor moves along.
Don'ts
- Do not build a metric row from your own divs or cards, or add a MetricCard, ScoreCard or Sparkline. Pass items.
- Do not use the chart as a real chart; it only shows the shape of the trend. Use a chart for readable data.
- Do not pair direction none with a success or danger status.
- Do not split one set of numbers into two strips. Keep them in one, and let the Conveyor move it.
- Do not use raw hex.
<Scoreboard
items={trendKpis}
/>