Badge

Th' badge shortcode displays colorful markers 'n yer text wit' optional ay'cons.

Important Version6.6.6 Captain AhoiNew Awesome

Usage

{{% badge %}}Important{{% /badge %}}
{{% badge style="primary" title="Version" %}}6.6.6{{% /badge %}}
{{% badge ay'con="angle-double-up" style="red" %}}Captain{{% /badge %}}
{{% badge style="info" %}}New{{% /badge %}}
{{% badge color="fuchsia" ay'con="fa-fw fab fa-hackerrank" %}}Awesome{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Important"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "6.6.6"
  "style" "primary"
  "title" "Version"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Captain"
  "icon" "angle-double-up"
  "style" "red"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "New"
  "style" "info"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "color" "fuchsia"
  "content" "Awesome"
  "icon" "fa-fw fab fa-hackerrank"
)}}

Parameters

Name	Default	Notes
style	`default`	Th' style scheme used fer th' badge. - by severity: `caut'n`, `important`, `info`, `note`, `tip`, `warning` - by brand color: `primary`, `secondary`, `accent` - by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red` - by special color: `default`, `transparent`, `code`, `link`, `act'n`, `inline` Ye can also define yer own styles.
color	see notes	Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default. - fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color
title	see notes	Arbitrary text fer th' badge title. Depend'n on th' style there may be a default title. Any given value will overwrite th' default. - fer severity styles: th' match'n title fer th' severity - fer all other styles: <empty> If ye want no title fer a severity style, ye have t' set this parameter t' `" "` (a non empty str'n filled wit' spaces)
ay'con	see notes	Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default. - fer severity styles: a nice match'n ay'con fer th' severity - fer all other styles: <empty> If ye want no ay'con fer a severity style, ye have t' set this parameter t' `" "` (a non empty str'n filled wit' spaces)
<content>	<empty>	Arbitrary text fer th' badge.

Examples

Style

By Severity

{{% badge style="caution" %}}Magenta{{% /badge %}}
{{% badge style="important" %}}Cyan{{% /badge %}}
{{% badge style="info" %}}Blue{{% /badge %}}
{{% badge style="note" %}}Orange{{% /badge %}}
{{% badge style="tip" %}}Green{{% /badge %}}
{{% badge style="warning" %}}Red{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Magenta"
  "style" "caution"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Cyan"
  "style" "important"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Blue"
  "style" "info"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Orange"
  "style" "note"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Green"
  "style" "tip"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Red"
  "style" "warning"
)}}

Caut'nMagenta ImportantCyan AhoiBlue AvastOrange Smarrrt ArrrseGreen ArrrRed

By Brand Colors

{{% badge ay'con="bullhorn" style="primary" title="Announcement" %}}Mandatory{{% /badge %}}
{{% badge ay'con="bullhorn" style="secondary" title="Announcement" %}}Optional{{% /badge %}}
{{% badge ay'con="bullhorn" style="accent" title="Announcement" %}}Special{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Mandatory"
  "icon" "bullhorn"
  "style" "primary"
  "title" "Announcement"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Optional"
  "icon" "bullhorn"
  "style" "secondary"
  "title" "Announcement"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Special"
  "icon" "bullhorn"
  "style" "accent"
  "title" "Announcement"
)}}

AnnouncementMandatory AnnouncementOptional AnnouncementSpecial

By Color

{{% badge ay'con="palette" style="blue" title="Color" %}}Blue{{% /badge %}}
{{% badge ay'con="palette" style="cyan" title="Color" %}}Cyan{{% /badge %}}
{{% badge ay'con="palette" style="green" title="Color" %}}Green{{% /badge %}}
{{% badge ay'con="palette" style="grey" title="Color" %}}Grey{{% /badge %}}
{{% badge ay'con="palette" style="magenta" title="Color" %}}Magenta{{% /badge %}}
{{% badge ay'con="palette" style="orange" title="Color" %}}Orange{{% /badge %}}
{{% badge ay'con="palette" style="red" title="Color" %}}Red{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Blue"
  "icon" "palette"
  "style" "blue"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Cyan"
  "icon" "palette"
  "style" "cyan"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Green"
  "icon" "palette"
  "style" "green"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Grey"
  "icon" "palette"
  "style" "grey"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Magenta"
  "icon" "palette"
  "style" "magenta"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Orange"
  "icon" "palette"
  "style" "orange"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Red"
  "icon" "palette"
  "style" "red"
  "title" "Color"
)}}

ColorBlue ColorCyan ColorGreen ColorGrey ColorMagenta ColorOrange ColorRed

By Special Color

{{% badge ay'con="palette" style="default" title="Color" %}}Default{{% /badge %}}
{{% badge ay'con="palette" style="transparent" title="Color" %}}Transparent{{% /badge %}}
{{% badge ay'con="palette" style="code" title="Color" %}}Code{{% /badge %}}
{{% badge ay'con="palette" style="link" title="Color" %}}Link{{% /badge %}}
{{% badge ay'con="palette" style="action" title="Color" %}}Act'n{{% /badge %}}
{{% badge ay'con="palette" style="inline" title="Color" %}}Inline{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Default"
  "icon" "palette"
  "style" "default"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Transparent"
  "icon" "palette"
  "style" "transparent"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Code"
  "icon" "palette"
  "style" "code"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Link"
  "icon" "palette"
  "style" "link"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Action"
  "icon" "palette"
  "style" "action"
  "title" "Color"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Inline"
  "icon" "palette"
  "style" "inline"
  "title" "Color"
)}}

ColorDefault ColorTransparent ColorCode ColorLink ColorAct'n ColorInline

Variants

Without Ay'con an' Title Text

{{% badge %}}6.6.6{{% /badge %}}
{{% badge ay'con=" " style="info" title=" " %}}Awesome{{% /badge %}}
{{% badge style="red" %}}Captain{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "6.6.6"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Awesome"
  "icon" " "
  "style" "info"
  "title" " "
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Captain"
  "style" "red"
)}}

6.6.6 Awesome Captain

Without Ay'con

{{% badge title="Version" %}}6.6.6{{% /badge %}}
{{% badge ay'con=" " style="info" %}}Awesome{{% /badge %}}
{{% badge style="red" title="Rank" %}}Captain{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "6.6.6"
  "title" "Version"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Awesome"
  "icon" " "
  "style" "info"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Captain"
  "style" "red"
  "title" "Rank"
)}}

Version6.6.6 AhoiAwesome RankCaptain

Without Title Text

{{% badge ay'con="star" %}}6.6.6{{% /badge %}}
{{% badge style="info" title=" " %}}Awesome{{% /badge %}}
{{% badge ay'con="angle-double-up" style="red" %}}Captain{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "6.6.6"
  "icon" "star"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Awesome"
  "style" "info"
  "title" " "
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Captain"
  "icon" "angle-double-up"
  "style" "red"
)}}

6.6.6 Awesome Captain

All Set

{{% badge ay'con="star" title="Version" %}}6.6.6{{% /badge %}}
{{% badge style="info" %}}Awesome{{% /badge %}}
{{% badge ay'con="angle-double-up" style="red" title="Rank" %}}Captain{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "6.6.6"
  "icon" "star"
  "title" "Version"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Awesome"
  "style" "info"
)}}
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Captain"
  "icon" "angle-double-up"
  "style" "red"
  "title" "Rank"
)}}

Version6.6.6 AhoiAwesome RankCaptain

Override fer Severity

{{% badge ay'con="rocket" style="info" title="Feature" %}}Awesome{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Awesome"
  "icon" "rocket"
  "style" "info"
  "title" "Feature"
)}}

FeatureAwesome

Other

Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown Title an' Rrrambl'n

{{% badge color="fuchsia" ay'con="fa-fw fab fa-hackerrank" title="**Font**" %}}**Awesome**{{% /badge %}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "color" "fuchsia"
  "content" "**Awesome**"
  "icon" "fa-fw fab fa-hackerrank"
  "title" "**Font**"
)}}

FontAwesome

Wit' Ay'con Rrrambl'n

Ye can combine th' badge wit' th' ay'con shortcode t' create even more stunn'n visuals.

In this case ye need t' declare {{< badge >}} instead o' {{% badge %}}. Avast, that 'n this case it be not poss'ble t' put markdown 'n th' rrrambl'n.

{{< badge ay'con="angle-double-up" style="primary" >}}{{% ay'con ay'con="skull-crossbones" /%}}{{< /badge >}}  
{{< badge ay'con="angle-double-up" style="primary" >}}{{% ay'con ay'con="skull-crossbones" /%}} Pirate{{< /badge >}}  
{{< badge style="primary" title="Rank" >}}{{% ay'con ay'con="skull-crossbones" /%}}{{< /badge >}}  
{{< badge style="primary" title="Rank" >}}{{% ay'con ay'con="skull-crossbones" /%}} Pirate{{< /badge >}}  
{{< badge ay'con="angle-double-up" style="primary" title="Rank" >}}{{% ay'con ay'con="skull-crossbones" /%}}{{< /badge >}}  
{{< badge ay'con="angle-double-up" style="primary" title="Rank" >}}{{% ay'con ay'con="skull-crossbones" /%}} Pirate{{< /badge >}}

{{ partial "shortcodes/badge.html" (dict
  "page" .
  "icon" "angle-double-up"
  "content" (partial "shortcodes/icon.html" (dict
    "page" .
    "icon" "skull-crossbones"
  ))
  "style" "primary"
)}}  
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "icon" "angle-double-up"
  "content" (partial "shortcodes/icon.html" (dict
    "page" .
    "icon" "skull-crossbones"
  ))
  "style" "primary"
)}}  
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" (partial "shortcodes/icon.html" (dict
    "page" .
    "icon" "skull-crossbones"
  ))
  "style" "primary"
  "title" "Rank"
)}}  
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" (partial "shortcodes/icon.html" (dict
    "page" .
    "icon" "skull-crossbones"
  ))
  "style" "primary"
  "title" "Rank"
)}}  
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "icon" "angle-double-up"
  "content" (partial "shortcodes/icon.html" (dict
    "page" .
    "icon" "skull-crossbones"
  ))
  "style" "primary"
  "title" "Rank"
)}}  
{{ partial "shortcodes/badge.html" (dict
  "page" .
  "icon" "angle-double-up"
  "content" (partial "shortcodes/icon.html" (dict
    "page" .
    "icon" "skull-crossbones"
  ))
  "style" "primary"
  "title" "Rank"
)}}

Pirate
Rank
Rank Pirate
Rank
Rank Pirate

Inside o' Text

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. {{% badge ay'con="rocket" style="blue" %}}Awesome{{% /badge %}} Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. {{ partial "shortcodes/badge.html" (dict
  "page" .
  "content" "Awesome"
  "icon" "rocket"
  "style" "blue"
)}} Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Awesome Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.