Badge
Use the badge shortcode to enrich headings.
Badges can be added to headings and buttons. The badge for a button is part of a Custom Shortcode. The example below illustrates the shortcode for a heading.
Example heading of size four New
Example heading of size four {{< badge title="New" >}}
{.h4}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string | Class attribute of the badge element. | ||
| color | select | secondary | Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black]. | |
| title | string | yes | Title of the badge. |
| Name | Type | Required | Default |
|---|---|---|---|
| class | string | ||
| Class attribute of the badge element. | |||
| color | select | secondary | |
| Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black]. | |||
| title | string | yes | |
| Title of the badge. | |||
Use the badge shortcode to display a badge for a heading. See the Bootstrap Documentation for more information.
Badges scale to match the size of the immediate parent element by using relative font sizing and em units. Use Hugo’s Curly Brackets Syntax to apply a heading class.
Heading 1 New
Heading 2 New
Heading 3 New
Heading 4 New
Heading 5 New
Heading 6 New
Heading 1 {{< badge title="New" >}}
{.h1}
Heading 2 {{< badge title="New" >}}
{.h2}
Heading 3 {{< badge title="New" >}}
{.h3}
Heading 4 {{< badge title="New" >}}
{.h4}
Heading 5 {{< badge title="New" >}}
{.h5}
Heading 6 {{< badge title="New" >}}
{.h6}Set a background color with contrasting foreground color with the color argument.
{{< badge title="primary" color="primary" >}}
{{< badge title="secondary" color="secondary" >}}
{{< badge title="success" color="success" >}}
{{< badge title="danger" color="danger" >}}
{{< badge title="warning" color="warning" >}}
{{< badge title="info" color="info" >}}
{{< badge title="light" color="light" >}}
{{< badge title="dark" color="dark" >}}Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.
{{< badge title="primary" color="primary" class="rounded-pill" >}}
{{< badge title="secondary" color="secondary" class="rounded-pill" >}}
{{< badge title="success" color="success" class="rounded-pill" >}}
{{< badge title="danger" color="danger" class="rounded-pill" >}}
{{< badge title="warning" color="warning" class="rounded-pill" >}}
{{< badge title="info" color="info" class="rounded-pill" >}}
{{< badge title="light" color="light" class="rounded-pill" >}}
{{< badge title="dark" color="dark" class="rounded-pill" >}}