Typography

The objective of typography in Design System is to provide a clean, attractive and simple default styles for basic elements.

Use the $font-family-base, $font-size-base, and var(--line-height-base) variables as our typographic base applied to the <body>.
Set the global link color via $link-color and apply link underline style on :hover if required.

The global variables are defined in scss/settings/typography. Make sure to set $font-size-base in rem.

headings

All HTML headings, <h1> through <h6>, are available. Need to use classes .h1 to .h6.

Heading Example
<h1 class="h1"></h1> h1. heading
<h2 class="h2"></h2> h2. heading
<h3 class="h3"></h3> h3. heading
<h4 class="h4"></h4> h4. heading
<h5 class="h5"></h5> h5. heading
<h6 class="h6"></h6> h6. heading

For Semantic Coding, avoid skipping heading levels for example, after h1 use h2 and so on. This also provides good readability to screen readers and improves page indexing.

Display headings

All Display headings, .display-1 through .display-4, are available.

Example heading
<h1 class="display-1"></h1> Display 1
<h2 class="display-2"></h2> Display 2
<h3 class="display-3"></h3> Display 3
<h4 class="display-4"></h4> Display 4

Paragraphs

Paragraph are having default styling from settings/_typography.scss

There are some addons which can be added on paragraphs.

Lead

Make a paragraph stand out by adding .lead for example:

Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document

Inline text elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

  <p>You can use the mark tag to <mark>highlight</mark> text.</p>
  <p><del>This line of text is meant to be treated as deleted text.</del></p>
  <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
  <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
  <p><u>This line of text will render as underlined</u></p>
  <p><small>This line of text is meant to be treated as fine print.</small></p>
  <p><strong>This line rendered as bold text.</strong></p>
  <p><em>This line rendered as italicized text.</em></p>

Lists

- Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
      <ul>
        <li>Phasellus iaculis neque</li>
        <li>Purus sodales ultricies</li>
        <li>Vestibulum laoreet porttitor sem</li>
        <li>Ac tristique libero volutpat at</li>
      </ul>
    </li>
    <li>Faucibus porta lacus fringilla vel</li>
    <li>Aenean sit amet erat nunc</li>
    <li>Eget porttitor lorem</li>
  </ul>

- Inline Lists

Remove a list’s bullets and apply some light margin with a combination of two classes, .list--inline and .list--inline--item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list--inline">
      <li class="list--inline--item">Lorem ipsum</li>
      <li class="list--inline--item">Phasellus iaculis</li>
      <li class="list--inline--item">Nulla volutpat</li>
</ul>

Text utilities

Change text alignment, transform, style, weight, and color with our text utilities and color utilities.

Text alignment

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

<p class="text--left">Left aligned text on all viewport sizes.</p>

<p class="text--center">Center aligned text on all viewport sizes.</p>

<p class="text--right">Right aligned text on all viewport sizes.</p>

Left aligned text on viewports sized SM (small) or wider.
Center aligned text on viewports sized MD (medium) or wider.
Right aligned text on viewports sized LG (large) or wider.
Center aligned text on viewports sized XL (extra-large) or wider.

<p class="text--sm--left">Left aligned text on viewports sized SM (small) or wider </p>

<p class="text--md--center">Center aligned text on viewports sized MD (medium) or wider </p>

<p class="text--lg--right">Right aligned text on viewports sized LG (large) or wider </p>

<p class="text--xl--center">Center aligned text on viewports sized XL (extra-large) or wider </p>

Word break

Prevent long strings of text from breaking your components’ layout by using .text--break to set word-wrap: break-word.

mmmmmdddmdnsjdfsdivdsjisdsdmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text--break">Long text without spaces</p>

Text transform

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

CapiTaliZed text.

<p class="text--lowercase">Lowercased text.</p>

<p class="text--uppercase">Uppercased text.</p>

<p class="text--capitalize">CapiTaliZed text.</p>

Font weight and italics

Quickly change the weight (boldness) of text or italicize text.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

<p class="font--weight--bold">Bold text.</p>

<p class="font--weight--bolder">Bolder weight text (relative to the parent element).</p>

<p class="font--weight--normal">Normal weight text.</p>

<p class="font--weight--light">Light weight text.</p>

<p class="font--weight--lighter">Lighter weight text (relative to the parent element).</p>

<p class="font--italic">Italic Font.</p>