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:
| Argument | Required | Description |
|---|---|---|
| title | Yes | Required title of the badge. |
| class | No | Optional class attributes of the badge element. |
| color | No | Optional theme color of the element, either “primary”, “secondary” (default), “success”, “danger”, “warning”, “info”, “light”, “dark”, “white”, or “black”. |
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" >}}