description:Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
bootstrap-link:components/badge/
---
## Default markup
The default badges are square and come in the basic set of colours.
To make a pill bagde (with rounded corners) add `.bagde-pill` class.
Use the `.bagde-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
{% capture code %}
{% for color in site.colors %}
...
...
@@ -28,9 +30,9 @@ To make a pill bagde (with rounded corners) add `.bagde-pill` class.
{% include example.html code=code centered=true %}
## Soft badges
## Soft colour 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.
You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here]({% docs_url colors %}) to see the list of available colours and choose ones that best suit your design.
{% capture code %}
{% for color in site.colors %}
...
...
@@ -42,7 +44,7 @@ Creates a soft variant of a corresponding contextual badge variation. You can cl
## Links
Make a badge work as a link by putting it into an `<a>` element.
Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
{% capture code %}
{% for color in site.colors %}
...
...
@@ -54,7 +56,7 @@ Make a badge work as a link by putting it into an `<a>` element.
## Empty badges
If you don't want your badge to contain any text you can do it by leaving the html element empty.
Leave the HTML element empty if you want to create badges without any text. Empty badges are particularly useful if you want to make an interface element more noticeable regardless of limited space.
{% capture code %}
{% for color in site.colors %}
...
...
@@ -64,9 +66,9 @@ If you don't want your badge to contain any text you can do it by leaving the ht
{% include example.html code=code centered=true %}
### Badge addons
### Badge add-ons
You can add badge addon by adding `.badge-addon` class.
Add the `.badge-addon` class to create an add-on that will customise your badge and make it more noticeable. You can use any colour variants and combine them as you see fit.
{% capture code %}
{% include ui/badge.html text="task" color="green" addon="finished" %}
...
...
@@ -78,7 +80,7 @@ You can add badge addon by adding `.badge-addon` class.
### Badge avatars
If you want to add an avatar to your badge just create `.badge-avatar` class.
Create the `.badge-avatar` class to add an avatar that will make a badge more personalised.
{% capture code %}
{% include ui/badge.html person-id=1 color="blue" %}
description:Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
description:Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
bootstrap-link:components/breadcrumb/
---
## Default markup
The dividers are automatically created in the content of the `:before` pseudo-element of li tags. You can inform the current page using the `active` modifier in a `li` tag. It will disable the navigation of inner links.
Add the `:before` pseudo-element in `li` tags to use the default separators. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
{% capture code %}
{% include ui/breadcrumb.html %}
...
...
@@ -18,7 +18,7 @@ The dividers are automatically created in the content of the `:before` pseudo-el
## Breadcrumb variations
You can add more variations by modify `$breadcrumb-variants` variable in Tabler config.
If you wish to use different separators, modify the `$breadcrumb-variants` variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-dots" %}
...
...
@@ -38,6 +38,8 @@ You can add more variations by modify `$breadcrumb-variants` variable in Tabler
## Alternate version
Use the `breadcrumb-alternate` class to make the breadcrumb colours more neutral, retaining its function of showing the current location within an interface.
{% capture code %}
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
description:A divider visually segments content into groups
description:Dividers help organise content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
bootstrap-link:components/dropdowns/#dividers
done:true
---
...
...
@@ -8,6 +8,8 @@ done: true
## Default markup
Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
{% capture code %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
...
...
@@ -22,6 +24,8 @@ done: true
## Text position
You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
{% capture code %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
...
...
@@ -44,7 +48,7 @@ done: true
## Divider color
Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
Customise the colour of dividers to make them go well with your design. Click [here]({% docs_url colors %}) to see the list of available colours.
