--- layout: default route: demonstration title: Demonstration --- {% capture badge_example %} {% endcapture %} {% capture badge_rounded_example %} {% endcapture %} {% capture badge_inline_example %} {% endcapture %} {% capture badge_colors_example %}
Notifications
Notifications
Notifications
Notifications
Notifications
Notifications
Notifications
{% endcapture %} {% capture badge_sizes_example %}
Small badge
Normal badge
Medium badge
Large badge
{% endcapture %} {% capture badge_positions_example %}
Top left badge
Top right (default)
Bottom left badge
Bottom right badge
{% endcapture %} {% capture badge_outlined_example %}
Notifications
Notifications
Notifications
Notifications
Notifications
Notifications
Notifications
{% endcapture %} {% capture badge_navbar_example %} {% endcapture %} {% capture badge_tabs_example %}
{% endcapture %} {% include snippet.html content=badge_example size="one-half" %} {% include anchor.html name="Rounded Style" %} {% include snippet.html content=badge_rounded_example size="one-half" %} {% include anchor.html name="Colors" %} {% include snippet.html is-horizontal="true" content=badge_colors_example horizontal=true more=true %} {% include anchor.html name="Sized" %} {% include snippet.html content=badge_sizes_example horizontal=true more=true %} {% include anchor.html name="Outlined" %}

You can display an outlined has-badge-rounded by using the .has-badge-outlined modifier.

{% include snippet.html content=badge_outlined_example horizontal=true more=true %} {% include anchor.html name="Styles" %}

You can change the has-badge-rounded position using one of the following modifiers: .has-badge-left .has-badge-bottom .has-badge-bottom-left .

{% include snippet.html content=badge_positions_example horizontal=true more=true %}

You can display badge inline using has-badge-inline modifier.

{% include snippet.html content=badge_inline_example horizontal=true more=true %} {% include anchor.html name="More examples" %} {% include snippet.html content=badge_navbar_example horizontal=true more=true %} {% include snippet.html content=badge_tabs_example horizontal=true more=true %}