Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Mark Otto's avatar
    Enable flexbox grid CSS on our docs page · 8e9a9a59
    Mark Otto authored 
    - Creates new flexbox grid Sass file in our docs assets
- Updates the Gruntfile to compile said new Sass file and minify the output
- Update notice on flexbox docs page for how it works
- Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features)
    8e9a9a59
badge.md 2.45 KiB 
layout: docs
title: Badges
description: Documentation and examples for badges, our small count and labeling component.
group: 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 %}

Links

Using the .badge classes with the <a> element quickly provide actionable badges with hover and focus states.

{% example html %} Default Primary Success Info Warning Danger {% endexample %}