projects / ipfire.org.git / blame
| 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 %} |