Components

Flags

scss:Readyfigma:Ready
vue
:Ready
react
:Ready
freemarker
:Ready
webComponent
:Ready

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>
Viewport: px
<div class="example">
<div class="example__item">
<div class="mc-flag">
<span class="mc-flag__label">Flag label</span>
</div>
</div>
<div class="example__item">
<div class="mc-flag mc-flag--bordered">
<span class="mc-flag__label">This is a flag with a very long label</span>
</div>
</div>
</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>

Solid

Viewport: px
<div class="example">
<div class="example__item">
<div class="mc-flag">
<span class="mc-flag__label">Flag solid</span>
</div>
</div>
<div class="example__item">
<div class="mc-flag mc-flag--solid-dark">
<span class="mc-flag__label">Flag solid dark</span>
</div>
</div>
<div class="example__item example__item--light">
<div class="mc-flag mc-flag--solid-light">
<span class="mc-flag__label">Flag solid light</span>
</div>
</div>
<div class="example__item">
<div class="mc-flag mc-flag--solid-danger">
<span class="mc-flag__label">Flag solid danger</span>
</div>
</div>
</div>

Bordered

Viewport: px
<div class="example">
<div class="example__item">
<div class="mc-flag mc-flag--bordered">
<span class="mc-flag__label">Flag bordered</span>
</div>
</div>
<div class="example__item">
<div class="mc-flag mc-flag--bordered-dark">
<span class="mc-flag__label">Flag bordered dark</span>
</div>
</div>
<div class="example__item example__item--light">
<div class="mc-flag mc-flag--bordered-light">
<span class="mc-flag__label">Flag bordered light</span>
</div>
</div>
<div class="example__item">
<div class="mc-flag mc-flag--bordered-danger">
<span class="mc-flag__label">Flag bordered danger</span>
</div>
</div>
</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;
}