blob: 09608931a2ff985f538c14adc5f7e32eb26226e4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
---
layout: docs
title: Tags
group: components
---
Small and adaptive tag for adding context to just about any content.
## Example
Tags scale to match the size of the immediate parent element by using relative font sizing and `em` units.
{% example html %}
<h1>Example heading <span class="tag tag-default">New</span></h1>
<h2>Example heading <span class="tag tag-default">New</span></h2>
<h3>Example heading <span class="tag tag-default">New</span></h3>
<h4>Example heading <span class="tag tag-default">New</span></h4>
<h5>Example heading <span class="tag tag-default">New</span></h5>
<h6>Example heading <span class="tag tag-default">New</span></h6>
{% endexample %}
## Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a tag.
{% example html %}
<span class="tag tag-default">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-success">Success</span>
<span class="tag tag-info">Info</span>
<span class="tag tag-warning">Warning</span>
<span class="tag tag-danger">Danger</span>
{% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
## Pill tags
Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
{% example html %}
<span class="tag tag-pill tag-default">Default</span>
<span class="tag tag-pill tag-primary">Primary</span>
<span class="tag tag-pill tag-success">Success</span>
<span class="tag tag-pill tag-info">Info</span>
<span class="tag tag-pill tag-warning">Warning</span>
<span class="tag tag-pill tag-danger">Danger</span>
{% endexample %}
|
