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.
- 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.
- 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.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.