]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Badges | |
4 | description: Documentation and examples for badges, our small count and labelling component. | |
5 | group: components | |
6 | --- | |
7 | ||
8 | Small and adaptive tag for adding context to just about any content. | |
9 | ||
10 | ## Contents | |
11 | ||
12 | * Will be replaced with the ToC, excluding the "Contents" header | |
13 | {:toc} | |
14 | ||
15 | ## Example | |
16 | ||
17 | Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. | |
18 | ||
19 | {% example html %} | |
20 | <h1>Example heading <span class="badge badge-default">New</span></h1> | |
21 | <h2>Example heading <span class="badge badge-default">New</span></h2> | |
22 | <h3>Example heading <span class="badge badge-default">New</span></h3> | |
23 | <h4>Example heading <span class="badge badge-default">New</span></h4> | |
24 | <h5>Example heading <span class="badge badge-default">New</span></h5> | |
25 | <h6>Example heading <span class="badge badge-default">New</span></h6> | |
26 | {% endexample %} | |
27 | ||
28 | ## Contextual variations | |
29 | ||
30 | Add any of the below mentioned modifier classes to change the appearance of a badge. | |
31 | ||
32 | {% example html %} | |
33 | <span class="badge badge-default">Default</span> | |
34 | <span class="badge badge-primary">Primary</span> | |
35 | <span class="badge badge-success">Success</span> | |
36 | <span class="badge badge-info">Info</span> | |
37 | <span class="badge badge-warning">Warning</span> | |
38 | <span class="badge badge-danger">Danger</span> | |
39 | {% endexample %} | |
40 | ||
41 | {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} | |
42 | {{ callout-include | markdownify }} | |
43 | ||
44 | ## Pill badges | |
45 | ||
46 | 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. | |
47 | ||
48 | {% example html %} | |
49 | <span class="badge badge-pill badge-default">Default</span> | |
50 | <span class="badge badge-pill badge-primary">Primary</span> | |
51 | <span class="badge badge-pill badge-success">Success</span> | |
52 | <span class="badge badge-pill badge-info">Info</span> | |
53 | <span class="badge badge-pill badge-warning">Warning</span> | |
54 | <span class="badge badge-pill badge-danger">Danger</span> | |
55 | {% endexample %} |