Flags

figma:ready
react:ready
scss:ready
freemarker:ready
vue:ready
webComponent:ready
Usage
Code
Specs
Design

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;
}