Indicator - Component
Code
Source (Nunjucks)
<span class="indicator {{ data.utilities }}">{{ data.count }}</span>Output
<span class="indicator bg-state-info-bg color-state-info-text">99</span>Information
Use the indicator to present a count to a user, such as in the browser
compatibility table. The sample uses a
<span>, but try to use an HTML element that semantically supports a count,
in context.
Key links
Variants
Error state
Code
Source (Nunjucks)
<span class="indicator {{ data.utilities }}">{{ data.count }}</span>Output
<span class="indicator bg-state-bad-bg color-state-bad-text">99</span>Success state
Code
Source (Nunjucks)
<span class="indicator {{ data.utilities }}">{{ data.count }}</span>Output
<span class="indicator bg-state-good-bg color-state-good-text">99</span>