Badge

A Badge looks much like a lozenge. You can define different styles and sizes and also combine it with an HTML heading or a Bootstrap button. The shortcode adds a element. If you need an empty space before or after you need to add it manually.

Examples

[bsv-badge style="danger"]New![/bsv-badge]
[bsv-badge style="warning" displayas="button" buttonlink="https://www.lewe.com" target="_blank" prefix="Button"]1234[/bsv-badge]
[bsv-badge style="success" type="pill" displayas="h4" prefix="Button"]1234[/bsv-badge]

Format

[bsv-badge parameter="value" ...]your content here[/bsv-badge]

Parameters

ParameterDescriptionDefault

style

Defines the Bootstrap style. Supported values:

  • danger

  • dark

  • info

  • light

  • primary

  • secondary

  • success

  • warning

primary

type

Allowed values:

  • badge

  • pill

badge

displayas

The badge can be combined with a button or heading. Supported values:

  • button

  • h1

  • h2

  • h3

  • h4

  • h5

  • h6

no value

prefix

If combined with a button or heading, this will be the text of it.

This parameter only works in combination with a displayas value.

no value

buttonstyle

If combined with a button, this defines the button style. Supported values:

  • danger

  • dark

  • info

  • light

  • primary

  • secondary

  • success

  • warning

This parameter only works in combination with a displayas value.

primary

buttonlink

If combined with a button, the button can link to a URL. Define it here.

no value

target

If combined with a linked button, this defines the target of the link.

_self

customtextcolor

If you want to change the text color of the badge style you can do it here by providing the hex color code in CSS format, e.g. #99000.

no value

custombgcolor

If you want to change the background color of the badge style you can do it here by proividng the hex color code in CSS format, e.g. #000099.

no value

Last updated