diff options
Diffstat (limited to 'docs/components/tag.md')
| -rw-r--r-- | docs/components/tag.md | 50 |
1 files changed, 0 insertions, 50 deletions
diff --git a/docs/components/tag.md b/docs/components/tag.md deleted file mode 100644 index d292cad22..000000000 --- a/docs/components/tag.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -layout: docs -title: Tags -description: Documentation and examples for tags, our small label-badge component. -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 %} |
