Foundations

Body styles

scss:Readyfigma:Ready
Usage
Code

Base text classes

Base typography classes does not apply any external margins nor font-colors, because they are contextuals. This mean that color and margins will be either inherited or applied through new classes set on your dom elements, depending on their position and usage.

You can import all base typography scss files by importing the _a.all-base-typography sub-bundle from the atoms directory

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


@import 'typography/_t.all-base-typography';

Body classes

Each body atom come with a modifier to set the font-weight to 'semi bold' and a modifier to use an alternative line-height. Body classes font-size do not vary depending on the viewport, because thoses font-sizes are optimized for any viewport.

Import

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


@import 'typography/_t.bodys';

usage

<p class="mt-body-m">Lorem ipsum...</p>
<p class="mt-body-m mt-body-m--semi-bold">Lorem ipsum...</p>
<p class="mt-body-m mt-body-m--line-height-m">Lorem ipsum...</p>
<p class="mt-body-m mt-body-m--line-height-m mt-body-m--semi-bold">
  Lorem ipsum...
</p>
Viewport: px 
<div class="example ml-flexy ml-flexy--gutter">
  <div class="ml-flexy__col">
    <div class="example__title">
      body-l
    </div>
  </div>
  <div class="ml-flexy__col">
    <div class="example__title">
      body-m
    </div>
  </div>
  <div class="ml-flexy__col">
    <div class="example__title">
      body-s
    </div>
  </div>
  <div class="ml-flexy__col ml-flexy__col--full">
    <br />
  </div>
  <div class="ml-flexy__col">
    <p class="mt-body-l">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
  <div class="ml-flexy__col">
    <p class="mt-body-m">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
  <div class="ml-flexy__col">
    <p class="mt-body-s">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
  <div class="ml-flexy__col ml-flexy__col--full">
    <br />
  </div>


  <div class="ml-flexy__col">
    <span class="example__modifier">mt-body-l--semi-bold</span>
    <p class="mt-body-l mt-body-l--semi-bold">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
  <div class="ml-flexy__col">
    <span class="example__modifier">mt-body-m--semi-bold</span>
    <p class="mt-body-m mt-body-m--semi-bold">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
  <div class="ml-flexy__col">
    <span class="example__modifier">mt-body-s--semi-bold</span>
    <p class="mt-body-s mt-body-s--semi-bold">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
  <div class="ml-flexy__col ml-flexy__col--full">
    <br />
  </div>
  <div class="ml-flexy__col">
    <span class="example__modifier">mt-body-l--line-height-m</span>
    <p class="mt-body-l mt-body-l--line-height-m">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
  <div class="ml-flexy__col">
    <span class="example__modifier">mt-body-m--line-height-m</span>
    <p class="mt-body-m mt-body-m--line-height-m">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
  <div class="ml-flexy__col">
    <span class="example__modifier">mt-body-s--line-height-m</span>
    <p class="mt-body-s mt-body-s--line-height-m">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
      distinctio eaque aperiam minima laudantium, harum temporibus adipisci
      repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa
      officia unde asperiores cum sapiente.
    </p>
  </div>
</div>
Class namesfont-size (any viewport)line-heightweight
body L
.mt-body-l06 : 18px (1.125mu)L : 28px (1.175mu)regular
.mt-body-l .mt-body-l--semi-bold06 : 18px (1.125mu)L : 28px (1.175mu)semi bold
.mt-body-l .mt-body-l--line-height-m06 : 18px (1.125mu)M : 24px (1.5mu)regular
body M
.mt-body-m05 : 16px (1mu)L : 24px (1.5mu)regular
.mt-body-m .mt-body-m--semi-bold05 : 16px (1mu)L : 24px (1.5mu)semi-bold
.mt-body-m .mt-body-m--line-height-m05 : 16px (1mu)M : 22px (1.375mu)regular
body S
.mt-body-s04 : 14px (0.875mu)L : 22px (1.375mu)regular
.mt-body-s .mt-body-s--semi-bold04 : 14px (0.875mu)L : 22px (1.375mu)semi-bold
.mt-body-s .mt-body-s--line-height-m04 : 14px (0.875mu)M : 18px (1.125mu)regular