# Key facts

Key facts: a free component, built on your design tokens, to use to give the details of one booking, order, place or product at a glance. The facts about one thing as label and value rows, with a short note where it helps and a status colour on values that are a status.

Prompt: Add the OpenDesigner component key-facts to this project: https://opendesigner.dev/library/key-facts.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: status value (success, warning, danger, info, accent), value with note, label over value on a phone.

Accessibility: A description list, so each value is read with its label; a status is said in the value's words, and its colour and dot only repeat it.

File: https://opendesigner.dev/library/key-facts.html

Catalog entry (parts, data limits, states, tokens): https://opendesigner.dev/library/key-facts.json

Download: `curl -fsSLo key-facts.html https://opendesigner.dev/library/key-facts.html`