Mozaic

Import

Import the settings and the badge scss files.

@import 'settings-tools/all-settings';
@import 'components/_c.badge';

Basic usage

To create a badge you have one main class to apply mc-badge.

<div class="mc-badge">
  Badge label
</div>

Viewport: px

<div class="example">
  <div class="example__item">
    <div class="mc-badge">Badge info</div>
  </div>

  <div class="example__item">
    <div class="mc-badge mc-badge--success">Badge sucess</div>
  </div>

  <div class="example__item">
    <div class="mc-badge mc-badge--warning">Badge warning</div>
  </div>

  <div class="example__item">
    <div class="mc-badge mc-badge--danger">badge danger</div>
  </div>

  <div class="example__item">
    <div class="mc-badge mc-badge--neutral">BADGE NEUTRAL</div>
  </div>
</div>

Variations

Available themes

success
warning
danger
neutral

example :

<div class="mc-badge">
  Badge info
</div>

<div class="mc-badge mc-badge--success">
  Badge success
</div>

Customization and mixins

The set-badge-theme mixin

In case you need to create a new badge theme you'll need to define a new SASS map, see below :

$my-map: (
  'color-theme': (
    'background': white,
    'border': blue,
    'text': red,
  ),
);

Once the map of your theme is defined you can use the mixin set-badge-theme.

.mc-badge--my-custom-theme {
  @include set-badge-theme($my-map);
}

Then, it will generate something like this :

.mc-badge--my-custom-theme {
  color: red;
  border: 1px solid blue;
  background-color: white;
}