2.0 KiB
2.0 KiB
| layout | title | description | group |
|---|---|---|---|
| docs | Badges | Documentation and examples for badges, our small count and labelling component. | components |
Small and adaptive tag for adding context to just about any content.
Contents
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
Example
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
{% example html %}
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
{% endexample %}Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
{% example html %} Default Primary Success Info Warning Danger {% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} {{ callout-include | markdownify }}
Pill badges
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.
{% example html %} Default Primary Success Info Warning Danger {% endexample %}