# Data Display

Built-in tags for **showing** things — people, colors, statuses, keys, and content you
want to reveal on demand. Each is a single Markdown tag with no setup; for the underlying
component and every prop it accepts, follow the per-tag page.

- [Avatar](/components/data-display/avatar/) — a user image with a graceful initials/placeholder fallback.
- [Badge](/components/data-display/badge/) — labels, statuses, versions, and counts.
- [BackgroundImage](/components/data-display/backgroundimage/) — a box with an image background and content overlaid on top.
- [Card](/components/data-display/card/) — flashy content cards with icons, images, variants, links, and a responsive grid.
- [ColorSwatch](/components/data-display/colorswatch/) — a square swatch that displays a single color.
- [Icon](/components/data-display/icon/) — a Tabler, Font Awesome, image, or emoji glyph inline in text or a heading.
- [Image](/components/data-display/image/) — Mantine images with no-upscale sizing and a click-to-zoom lightbox.
- [Indicator](/components/data-display/indicator/) — a dot or count badge positioned over the corner of another element.
- [Kbd](/components/data-display/kbd/) — a keyboard key, for documenting shortcuts.
- [Spoiler](/components/data-display/spoiler/) — collapse long content behind a show-more toggle.

## Data & structure

- [Accordion](/components/data-display/accordion/) — collapsible sections whose bodies are full Markdown.
- [Timeline](/components/data-display/timeline/) — a vertical run of bullets joined by a line, each with a title and body.
- [NumberFormatter](/components/data-display/numberformatter/) — format a number with thousands separators, fixed decimals, and a prefix/suffix.
- [RollingNumber](/components/data-display/rollingnumber/) — an animated counter that rolls to its value, re-animating each time the value changes.
- [OverflowList](/components/data-display/overflowlist/) — a single-line row of labels that collapses overflow into a "+N" counter, re-fitting on resize.