typography


component variations

highlight text class

This is a sample text
<div class="highlight">This is a sample text</div>

regular text class

This is a sample text
<div class="text">This is a sample text</div>

quote class

This is a sample text
<div class="quote">This is a sample text</div>

list element class

This is a sample text
<div class="list-element">This is a sample text</div>

label element class

This is a sample text
<div class="label">This is a sample text</div>

size 6XL modifier

This is a sample text
<div class="-size-6xl">This is a sample text</div>

size 5XL modifier

This is a sample text
<div class="-size-5xl">This is a sample text</div>

size 4XL modifier

This is a sample text
<div class="-size-4xl">This is a sample text</div>

size 3XL modifier

This is a sample text
<div class="-size-3xl">This is a sample text</div>

size 2XL modifier

This is a sample text
<div class="-size-2xl">This is a sample text</div>

size XL modifier

This is a sample text
<div class="-size-xl">This is a sample text</div>

size L modifier

This is a sample text
<div class="-size-l">This is a sample text</div>

size M modifier

This is a sample text
<div class="-size-m">This is a sample text</div>

size SM modifier

This is a sample text
<div class="-size-sm">This is a sample text</div>

size S modifier

This is a sample text
<div class="-size-s">This is a sample text</div>

default h1 tag

Example headline

<h1>Example headline</h1>

default h2 tag

Example headline

<h2>Example headline</h2>

default h3 tag

Example headline

<h3>Example headline</h3>

default h4 tag

Example headline

<h4>Example headline</h4>

default h5 tag

Example headline
<h5>Example headline</h5>

default paragraph tag

Example paragraph

<p>Example paragraph</p>

default list element tag

  • First item
  • Second item
  • Third item
<ul class="a-list a-list--dot">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

default button tag

<button>Example button</button>

default figcaption tag

Example figcaption
<figcaption>Example figcaption</figcaption>

default label tag

<label>Example label</label>

default small tag

Example small

<small>Example small</small>

default sup tag

This is a sample text Example sup
<div class="text">
  This is a sample text
  <sup>Example sup</sup>
</div>

default sub tag

This is a sample text Example sub
<div class="text">
  This is a sample text
  <sub>Example sub</sub>
</div>

default bdo rtl tag

'this text' should be read from right to left
<div class="text">
  <bdo dir="rtl">&#x27;this text&#x27;</bdo>
  should be read from right to left
</div>

default bdo ltr tag

This in Hebrew written from right to left:
אה, אני אוהב להיות ליד חוף הים

And this is from left to right:
אה, אני אוהב להיות ליד חוף הים

<div class="text">
  <p>
    This in Hebrew written from right to left:
    <br />
    <bdo dir="rtl">אה, אני אוהב להיות ליד חוף הים</bdo>
  </p>
  <p>
    And this is from left to right:
    <br />
    <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo>
  </p>
</div>

default em tag

Example em

<em>Example em</em>

default i tag

Example i

<i>Example i</i>

default strong tag

Example strong

<strong>Example strong</strong>

default b tag

Example b

<b>Example b</b>

default del tag

Example del

<del>Example del</del>

default u tag

Example u

<u>Example u</u>

default q tag

Example q

<q>Example q</q>

additional content

styles SCSS

/* stylelint-disable custom-property-empty-line-before */
/* stylelint-disable declaration-empty-line-before */
// Font Classes' Definitions
.highlight {
  @include text-highlight;
}

.text {
  @include text-regular;
}

.quote {
  @include text-quote;
}

.list-element {
  @include list-element;
}

.label {
  @include label;
}

// Sizes' Definition

.-size-6xl {
  @include size-6xl;
}

.-size-5xl {
  @include size-5xl;
}

.-size-4xl {
  @include size-4xl;
}

.-size-3xl {
  @include size-3xl;
}

.-size-2xl {
  @include size-2xl;
}

.-size-xl {
  @include size-xl;
}

.-size-l {
  @include size-l;
}

.-size-m {
  @include size-m;
}

.-size-sm {
  @include size-sm;
}

.-size-s {
  @include size-s;
}

// HTML-Tag Standards

h1 {
  @include text-highlight;
  @include size-4xl;
}

h2 {
  @include text-highlight;
  @include size-3xl;
}

h3 {
  @include text-highlight;
  @include size-2xl;
}

h4 {
  @include text-highlight;
  @include size-xl;
}

h5 {
  @include text-highlight;
  @include size-l;
}

p {
  @include text-regular;
  @include size-m;
}

li {
  @include list-element;
  @include size-m;
}

button {
  @include label;
  @include size-m;
}

figcaption {
  @include text-regular;
  @include size-s;
}

label {
  @include label;
  @include size-s;
}

small {
  @include size-s;
}

sup {
  @include size-s;
}

sub {
  @include size-s;
}

em {
  @include text-em;
}

bdo {
  @include text-regular;
}