Data Display

Spotlight

The one focal value of a screen, set at display size in neutral text, with an optional liveness dot and a caveat line for staleness directly under it.

import { Spotlight } from '@lostgradient/cinder';
focalvaluedisplay
01

Overview

Reference usage

Spotlight is the one focal value of a screen, such as "Ends in 45 min" or "2 need you". It is set at display size in the default text colour, never the accent, which is reserved for actions.

Show liveness with status and statusLabel, which draw a status dot and word above the value. The caveat snippet renders in warning text directly under the value and is where staleness goes ("Updated 12 min ago").

Usage

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

<Spotlight value="Ends in 45 min" status="online" statusLabel="Live">
  {#snippet caveat()}Updated 12 min ago{/snippet}
</Spotlight>
Live preview

One focal value with a caveat

Ends in 45 min

Updated 12 min ago

02

When to use

Use when
  • Giving a screen one value to read first, such as a deadline or the number of items that need you.
  • Showing that a value may be stale with a caveat directly under it.
Avoid when
  • Showing several metrics side by side — use statistic-group.
  • Showing a metric with a label and a change indicator — use statistic.
03

Examples

One focal value with a caveat

The value is display-size neutral text, never the accent. The caveat sits in warning text directly under it and says how fresh the value is.

Liveness as a status dot

Liveness is a status dot and word above the value, so the value itself stays neutral.

04

Props

Props for spotlight
Name
Type
Default
Description
value required text The one focal value of the screen, such as "Ends in 45 min" or "2 need you". It is set at display size in the default text colour, never the accent.
status 'online''offline''warning''danger''info''pending''neutral''success'
1 more members 'accent'
 Liveness of the value, drawn as a status dot with its word above the value. Set statusLabel to word it. Omit both for a value with no liveness.
statusLabel text The word beside the status dot, such as "Live" or "Paused". Left unset, a status draws the word its tone implies.
caveat snippet Staleness or a caution, such as "Updated 12 min ago", drawn in warning text directly under the value.