Docs

Badge

Use the badge shortcode to enrich headings.
Overview   Heading Badges   Colored Badges   Pill Badges   Styling   Arguments  

Overview  

Added in v0.19.0     

Badges can be added to headings. Check the Button component on how to add a badge to a button.

Heading Badges  

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

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

Colored Badges  

Set a background color with contrasting foreground color with the color argument.

primary secondary success danger warning info light dark
markdown 
{{< 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" >}}

Pill Badges  

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

primary secondary success danger warning info light dark
markdown 
{{< 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" >}}

Styling  

Check the Bootstrap documentation  for additional styling options.

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select secondary Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select secondary
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
On this page