Implementing a divider in your code can be done in two ways: (1.) a simple method or (2.) a slightly more advanced method. We detail below these two implementation modes.

Implementing a divider - simple method

The simple way of implementing a divider is to be used when you don't want to control the parameters of the divider (its width, margins around the divider, etc...).

If this is the case, here is how to implement the divider on your element:


@import 'settings-tools/all-settings';
@import 'components/c.divider';


You must apply one of these classes on your HTML element according to the desired position for your divider:

  • Horizontal top: mc-divider-top
  • Horizontal bottom: mc-divider-bottom
  • Vertical right: mc-divider-right
  • Vertical left: mc-divider-left

<div class="your-element-class mc-divider-bottom">
<!-- your content -->


Color variations

The divider is available with 4 color variations:

  • default
  • dark
  • light
  • lightest

You can use these color variations by adding one of the following modifiers to the basic css class (see above):

divider positiondefaultdarklightlightest
Horizontal topmc-divider-topmc-divider-top--darkmc-divider-top--lightmc-divider-top--lightest
Horizontal bottommc-divider-bottommc-divider-bottom--darkmc-divider-bottom--lightmc-divider-bottom--lightest
Vertical rightmc-divider-rightmc-divider-right--darkmc-divider-right--lightmc-divider-right--lightest
Vertical leftmc-divider-leftmc-divider-left--darkmc-divider-left--lightmc-divider-left--lightest

Size variations

The divider is available with 3 size variations:

available sizesize value
s (default)1px
m$mu025 (4px)
l$mu050 (8px)

You can use these size variations by adding one of the following modifiers to the basic css class (see above):

divider positiondefaultml
Horizontal topmc-divider-topmc-divider-top--mmc-divider-top--l
Horizontal bottommc-divider-bottommc-divider-bottom--mmc-divider-bottom--l
Vertical rightmc-divider-rightmc-divider-right--mmc-divider-right--l
Vertical leftmc-divider-leftmc-divider-left--mmc-divider-left--l

Implementing a divider - advanced method

The advanced method is to be used in case you want to control more finely the rendering of your divider.

For this purpose we provide you with the set-divider mixin.


@import 'settings-tools/all-settings';


.your-element-class {
@include set-divider('bottom', 'dark', '100%', 'm');

The set-divider mixin allows you to act on the following parameters:

parametersavailable values
positiontop, right, bottom (default), left
colordefault (default), dark, light, lightest
width100% (default)
sizes (default) , m, l,