Data Display

KeyFacts

Row of typed facts, each an icon plus a value with an optional link, separated by space rather than a glyph, wrapping only between facts.

import { KeyFacts } from '@lostgradient/cinder';
factsmetadataicons
01

Overview

Reference usage

KeyFacts is a row of typed facts, each an icon and a value, such as a kind, a neighbourhood and a price band. Facts are separated by space; no separator glyph is drawn between them. The row wraps only between facts, so a fact never breaks across two lines, and a value longer than its row is cut with an ellipsis.

Each fact takes an optional icon, a value and an optional href that makes the value a link. The icon is decorative; give a fact a label such as "Neighborhood" to name its kind for assistive technology.

Usage

svelte 
<script lang="ts">
  import { KeyFacts } from '@lostgradient/cinder';
</script>

<KeyFacts
  label="Details"
  items={[
    { label: 'Kind', value: 'Cocktail bar' },
    { label: 'Neighborhood', value: 'LoDo', href: '/neighborhoods/lodo' },
    { label: 'Price', value: '$$' },
  ]}
/>
Live preview

Facts with icons

  • Kind: Cocktail bar
  • Neighborhood: LoDo
  • Price: $$

02

When to use

Use when
  • Showing a few short facts about one item, such as a category, a neighbourhood and a price band, on a detail header or a card.
  • Replacing a line of facts joined by a separator glyph with facts that wrap as whole units.
Avoid when
  • Showing labelled key and value pairs in a grid — use description-list.
  • Showing a status word — use status-dot.
03

Examples

Facts with icons

Each fact is an icon and a value, separated from the next by space. The row wraps between facts, never inside one, and draws no separator glyph.

04

Props

Props for key-facts
Name
Type
Default
Description
items required KeyFact[] The facts in reading order. A fact wraps to the next line as a whole, and no separator glyph is drawn between facts.
label text Accessible name of the list, such as "Details". Left unset, the list is unnamed.