Counter

Provide number of items contained in page, list or category
and display number of hidden elements due to lack of space.

When to use counter?

Counters are small components that are used to display the total number of items contained in list or provide information about items hidden due to lack of space. They can be integrated in tabs, titles, navigation items, notifications or when you need to give information about number of something.

 

Good practices

DO

DO

Use to display the number of hidden elements.

Use to display the number of hidden elements.

Use to display the number of specific items in list, category, page.

Use to display the number of specific items in list, category, page.

Examples:

In tabs

To be used in tabs to provide information on the number of items in the element. This provides a quick and clear order of measurement for the user, who doesn't have to waste time consulting an empty tab.

 

In tabs (navigation)

To be used in tabs (navigation) to warn of notifications/events. The counter can also be used to differentiate between tabs containing lists of items and tabs containing detail pages.

In table/list

Use in tables/lists to make visible items that cannot be displayed for lack of space. The counter then adopts a specific content "+(number of hidden elements)". Example: "+12 ".