Counters notify the user about an amount (1 to …) of notifications. These can be used in navigation or form elements.


There are two heights available. When possible, use the biggest version.


The minimum width of the counter equals its height. If there is not enough space to show the full number of notifications, a ‘+’-sign in combination with a tooltip is available. In other cases, the full content is shown.


When a counter is applied to an icon or visual, a 1px offset is visually separating the the two. In other cases, the counter is simply floating next to its parent.