---
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 %}