Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    StatCard

    Shows the value of one measure, its change against a period and an optional trend in one tile.

    Storybook
    Storybook
    Source
    Source

    When to use

    Section titled “When to use”

    StatCard shows the current value of one measure and its change against a period at a glance: summary tiles at the top of a dashboard, the headline numbers of a report.

    When not to use

    Section titled “When not to use”
    • For many measures: use Table or DataTable for many values to compare.
    • For a detailed chart: use Chart when you need axes, labels and comparison; StatCard only takes a small trend line.
    • For mixed content and actions: use Card to group free content.
    • For key-value details: use DescriptionList for the fields of one record.

    Anatomy

    Section titled “Anatomy”
    1. Root: a surface built on Card; a named group (role="group") when it has a label.
    2. Label (StatCard.Label): the name of the measure; it names the group.
    3. Value (StatCard.Value): a 24 px semibold number with tabular figures.
    4. Delta (StatCard.Delta): an arrow, a screen reader word and the formatted value.
    5. Period (StatCard.Period): what the change is measured against.
    6. Trend (StatCard.Trend): a slot for a small chart, optional.
    7. Info (StatCard.Info): help text, optional.

    Behaviour

    Section titled “Behaviour”
    • A StatCard is static: it does not change on hover and is not a tab stop.
    • When the value changes, the new value fades in briefly; the number never counts or slides.
    • While loading, the value and the change are placeholders; the label stays, the trend is hidden.
    • Without a value a dash and its reason show; the tile is never left empty.
    • A long value wraps; the tile grows with its content.

    Guidelines

    Section titled “Guidelines”

    Carry the meaning in a word, not in colour

    Section titled “Carry the meaning in a word, not in colour”

    The direction of the change comes from the arrow and the word; colour only reinforces the meaning.

    Total items

    1.280
    artış 8 %vs last month
    DoThe arrow and the word give the direction; colour shows good or bad.
    +8 %
    Don'tThe change is only a coloured number.

    Set the sentiment where a fall is good

    Section titled “Set the sentiment where a fall is good”

    Direction and meaning are separate. For a measure that is better when it falls, pass sentiment.

    Pending items

    18
    azalış 5 %vs last month
    DoA decrease is positive: direction down, sentiment positive.

    Pending items

    18
    azalış 5 %vs last month
    Don'tA decrease that is good news is shown in red.

    Show a dash when there is no data

    Section titled “Show a dash when there is no data”

    Do not leave it blank and do not write zero; zero is a real value.

    Active users

    bilgi yok
    DoA dash and a reason: there is no measurement.

    Active users

    0
    Don'tZero shown when there is no data; it cannot be told from a real zero.

    Content

    Section titled “Content”
    • Write the label as a noun phrase in sentence case: “Total items”, “Completion rate”.
    • Have your app format the value with Intl; attach the unit to the value (“76 %”).
    • Write the period as a comparison: “vs last month”.
    • Keep the info text to one sentence.
    Section titled “Related components”
    • Card: the surface StatCard is built on.
    • DescriptionList: shows the fields of a record as key-value pairs.
    • Grid: lays tiles out in a grid.