Stat Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Stat

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

The stat component is mainly used to display statistics and their change. It comes with 3 different sizes and should be used depending on your priority. You can show statistics such as change in price, stocks, or number of subscriber count etc.

When to use

When you have numerical data to be displayed in concise and easy to digest manner.
When you want to show live or periodical data change.

Anatomy

Leading Icon: Optionally add a leading icon to support the type of statistical data.
Stat content: Combination of overline, label and description text to set the context of stat. Label is often used for showing the numbers.
Badge: Optionally add a badge to show positive, neutral or negative change in data.

Best Practices

Use the label text to show the data.
In case of a periodic change in data, accompany it with a badge component.
Always set a context to the data you are showing. It can be shown via the Description text field.