Mozaic

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

@import 'settings-tools/_all-settings';
@import 'components/_c.divider';

Usage

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 -->
</div>

Viewport: px

<div class="example">
  <div class="example__element mc-divider-bottom">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at
      quisquam excepturi dolores deleniti aliquid porro et asperiores, quam
      sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?
    </p>
  </div>
</div>

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 position	default	dark	light	lightest
Horizontal top	`mc-divider-top`	`mc-divider-top--dark`	`mc-divider-top--light`	`mc-divider-top--lightest`
Horizontal bottom	`mc-divider-bottom`	`mc-divider-bottom--dark`	`mc-divider-bottom--light`	`mc-divider-bottom--lightest`
Vertical right	`mc-divider-right`	`mc-divider-right--dark`	`mc-divider-right--light`	`mc-divider-right--lightest`
Vertical left	`mc-divider-left`	`mc-divider-left--dark`	`mc-divider-left--light`	`mc-divider-left--lightest`

Viewport: px

<div class="example">
  <div class="example__title">
    Divider horizontal bottom
  </div>

  <div class="example__container">
    <div class="example__col">
      <div class="example__element mc-divider-bottom">
        <p>Divider Horizontal Bottom <strong>default</strong></p>
      </div>
    </div>
    <div class="example__col">
      <div class="example__element mc-divider-bottom mc-divider-bottom--dark">
        <p>Divider Horizontal Bottom <strong>dark</strong></p>
      </div>
    </div>
    <div class="example__col">
      <div class="example__element mc-divider-bottom mc-divider-bottom--light">
        <p>Divider Horizontal Bottom <strong>light</strong></p>
      </div>
    </div>
    <div class="example__col example__col--lightest">
      <div
        class="example__element mc-divider-bottom mc-divider-bottom--lightest"
      >
        <p>Divider Horizontal Bottom <strong>lightest</strong></p>
      </div>
    </div>
  </div>

  <div class="example__title">
    Divider Horizontal Top
  </div>

  <div class="example__container">
    <div class="example__col">
      <div class="example__element mc-divider-top">
        <p>Divider Horizontal Top <strong>default</strong></p>
      </div>
    </div>
    <div class="example__col">
      <div class="example__element mc-divider-top mc-divider-top--dark">
        <p>Divider Horizontal Top <strong>dark</strong></p>
      </div>
    </div>
    <div class="example__col">
      <div class="example__element mc-divider-top mc-divider-top--light">
        <p>Divider Horizontal Top <strong>light</strong></p>
      </div>
    </div>
    <div class="example__col example__col--lightest">
      <div class="example__element mc-divider-top mc-divider-top--lightest">
        <p>Divider Horizontal Top <strong>lightest</strong></p>
      </div>
    </div>
  </div>

  <div class="example__title">
    Divider Vertical Right
  </div>

  <div class="example__container">
    <div class="example__col">
      <div class="example__element mc-divider-right">
        <p>Divider Vertical Right <strong>default</strong></p>
      </div>
    </div>
    <div class="example__col">
      <div class="example__element mc-divider-right mc-divider-right--dark">
        <p>Divider Vertical Right <strong>dark</strong></p>
      </div>
    </div>
    <div class="example__col">
      <div class="example__element mc-divider-right mc-divider-right--light">
        <p>Divider Vertical Right <strong>light</strong></p>
      </div>
    </div>
    <div class="example__col example__col--lightest">
      <div class="example__element mc-divider-right mc-divider-right--lightest">
        <p>Divider Vertical Right <strong>lightest</strong></p>
      </div>
    </div>
  </div>

  <div class="example__title">
    Divider Vertical Left
  </div>

  <div class="example__container">
    <div class="example__col">
      <div class="example__element mc-divider-left">
        <p>Divider Vertical Left <strong>default</strong></p>
      </div>
    </div>
    <div class="example__col">
      <div class="example__element mc-divider-left mc-divider-left--dark">
        <p>Divider Vertical Left <strong>dark</strong></p>
      </div>
    </div>
    <div class="example__col">
      <div class="example__element mc-divider-left mc-divider-left--light">
        <p>Divider Vertical Left <strong>light</strong></p>
      </div>
    </div>
    <div class="example__col example__col--lightest">
      <div class="example__element mc-divider-left mc-divider-left--lightest">
        <p>Divider Vertical Left <strong>lightest</strong></p>
      </div>
    </div>
  </div>
</div>

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

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

Usage

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

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

parameters	available values
position	`top`, `right`, `bottom` (default), `left`
color	`default` (default), `dark`, `light`, `lightest`
size	`100%` (default)

Viewport: px

<div class="example">
  <div class="example__title">
    Divider horizontal (default)
  </div>
  <div class="example__element mc-divider example__element--default">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at
      quisquam excepturi dolores deleniti aliquid porro et asperiores, quam
      sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?
    </p>
  </div>

  <div class="example__title">
    Divider vertical
  </div>
  <div class="example__element mc-divider example__element--vertical">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at
      quisquam excepturi dolores deleniti aliquid porro et asperiores, quam
      sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?
    </p>
  </div>

  <div class="example__title">
    Divider horizontal - Custom width
  </div>
  <div class="example__element mc-divider example__element--custom-width">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at
      quisquam excepturi dolores deleniti aliquid porro et asperiores, quam
      sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?
    </p>
  </div>
</div>

Dividers

Implementing a divider - simple method

Import

Usage

Variations

Implementing a divider - advanced method

Import

Usage