Paweł Kuna
2.3 KiB
title, menu, description, bootstrap-link, done
| title | menu | description | bootstrap-link | done |
|---|---|---|---|---|
| Badges | docs.badges | A small count and labeling component. | components/badge/ | true |
Default markup
{% capture code %} {% for color in site.colors %} {{ color[0] }} {% endfor %} {% endcapture %} {% include example.html code=code %}
Pill badges
To make a pill bagde (with rounded corners) add .bagde-pill class.
{% capture code %} {% for color in site.colors %} {{ forloop.index }} {% endfor %} {% endcapture %} {% include example.html code=code %}
Soft badges
Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% capture code %} {% for color in site.colors %} {{ color[0] }} {% endfor %} {% endcapture %} {% include example.html code=code %}
Links
Make a badge work as a link by putting it into an <a> element.
{% capture code %} {% for color in site.colors %} {{ color[0] }} {% endfor %} {% endcapture %} {% include example.html code=code %}
Empty badges
If you don't want your badge to contain any text you can do it by leaving the html element empty.
{% capture code %} {% for color in site.colors %} {% endfor %} {% endcapture %} {% include example.html code=code %}
Badge addons
You can add badge addon by adding .badge-addon class.
{% capture code %} {% include ui/badge.html text="task" color="green" addon="finished" %} {% include ui/badge.html text="bundle" color="purple" addon="passing" %} {% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %} {% endcapture %} {% include example.html code=code %}
Badge avatars
If you want to add an avatar to your badge just create .badge-avatar class.
{% capture code %} {% include ui/badge.html person-id=1 color="blue" %} {% include ui/badge.html person-id=2 color="blue" %} {% include ui/badge.html person-id=3 color="blue" %} {% include ui/badge.html person-id=4 color="blue" %} {% include ui/badge.html person-id=5 color="blue" %} {% endcapture %} {% include example.html code=code %}