Flags

Import

Import the settings and the flag scss files.

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

Basic usage

The creation of a Flag component in your code is done using the following HTML structure:

<div class="mc-flag">Flag label</div>

Variations

Available themes

• solid
• bordered
• solid-primary-02 (no longer maintened)
• bordered-primary-02 (no longer maintened)
• solid-dark
• bordered-dark
• solid-light
• bordered-light
• solid-danger
• bordered-danger

example :

<div class="mc-flag">Flag flag__label</div>

<div class="mc-flag mc-flag--bordered-primary-02">Flag bordered primary 02</div>

Customization and mixins

The set-flag-theme mixin

In case you need to create a new flag 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-flag-theme.

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

Then, it will generate something like this :

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