Components

Flags

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
Usage
Code
Specs
Design

Import

Import the settings, the font families mixin and the flag scss files.

@import 'settings-tools/_all-settings';
@include import-font-families();
@import 'components/_c.flag';

Basic usage

To create a flag you have one main class to apply mc-flag, and wrap the text inside the flag in a span.mc-flag__label. While the text without span will look mostly fine, we use it to opticaly align the characters baseline in the flag.

<div class="mc-flag">
  Flag label
</div>
Viewport: px 
<div class="example">
  <div class="mc-flag">
    Flag label
  </div>
</div>

Variations

Available themes

  • solid
  • bordered
  • solid-primary-02
  • bordered-primary-02
  • 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">
      Flag solid
    </div>
  </div>


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


  <div class="example__item">
    <div class="mc-flag mc-flag--solid-dark">
      Flag solid dark
    </div>
  </div>


  <div class="example__item example__item--light">
    <div class="mc-flag mc-flag--solid-light">
      Flag solid light
    </div>
  </div>


  <div class="example__item">
    <div class="mc-flag mc-flag--solid-danger">
      Flag solid danger
    </div>
  </div>
</div>

Bordered

Viewport: px 
<div class="example">
  <div class="example__item">
    <div class="mc-flag mc-flag--bordered">
      Flag bordered
    </div>
  </div>


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


  <div class="example__item">
    <div class="mc-flag mc-flag--bordered-dark">
      Flag bordered dark
    </div>
  </div>


  <div class="example__item example__item--light">
    <div class="mc-flag mc-flag--bordered-light">
      Flag bordered light
    </div>
  </div>


  <div class="example__item">
    <div class="mc-flag mc-flag--bordered-danger">
      Flag bordered danger
    </div>
  </div>
</div>

Multi-line flag

Warning

By default, the flag component can't extend over several lines.

Indeed, as indicated in the Do's and Dont's section of the documentation, it is not allowed to use too long text inside your flag.

However in rare exceptions where you don't have the possibility to make your content fit on a single line we provide you with the mc-flag--extend modifier which allows you to get a multi-line flag.

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