Badge

Little badge multi-purpose labels.

• Default badge

Sizes

Badges comes in 3 different sizes. You can change the size by applying the is-medium or is-large modifier. Default size is small.

Rounded

You can make a rounded badge by adding the modifier is-rounded.

List of badges

There will be times when you will need a list of badges, for example, in blog posts ( tags). You can easily achieve this by using the badges container.

• By default the gap between badges is 5px:

Variables

  :root {
    --badges-gap      : .3125rem;
    --badge-gap       : .5rem;
    --badge-color     : #296fa8;
    --badge-background: #eff5fb;
  }