typography
table of content
- description
- component variations
- highlight text class
- regular text class
- quote class
- list element class
- label element class
- size 6XL modifier
- size 5XL modifier
- size 4XL modifier
- size 3XL modifier
- size 2XL modifier
- size XL modifier
- size L modifier
- size M modifier
- size S modifier
- default h1 tag
- default h2 tag
- default h3 tag
- default h4 tag
- default h5 tag
- default paragraph tag
- default list element tag
- default button tag
- default figcaption tag
- default label tag
- default small tag
- default sup tag
- default sub tag
- default bdo rtl tag
- default bdo ltr tag
- default em tag
- style scss
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 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
<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">'this text'</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>additional content
styles SCSS
/* stylelint-disable custom-property-empty-line-before */
/* stylelint-disable declaration-empty-line-before */
// Font Classes' Mixins
@mixin text-highlight {
font-weight: 700;
}
@mixin text-regular {
font-weight: 400;
}
@mixin text-quote {
font-weight: 400;
font-style: italic;
}
@mixin list-element {
font-weight: 400;
margin-bottom: 1rem;
}
@mixin label {
font-weight: 400;
}
// Size Modifier Mixins
@mixin size-6xl {
font-size: 5rem;
--font-size: 5rem;
line-height: 1.15;
--line-height: 1.15;
}
@mixin size-5xl {
font-size: 4rem;
--font-size: 4rem;
line-height: 1.2;
--line-height: 1.2;
}
@mixin size-4xl {
font-size: 3rem;
--font-size: 3rem;
line-height: 1.25;
--line-height: 1.25;
}
@mixin size-3xl {
font-size: 2.5rem;
--font-size: 2.5rem;
line-height: 1.3;
--line-height: 1.3;
}
@mixin size-2xl {
font-size: 2rem;
--font-size: 2rem;
line-height: 1.35;
--line-height: 1.35;
}
@mixin size-xl {
font-size: 1.5rem;
--font-size: 1.5rem;
line-height: 1.4;
--line-height: 1.4;
}
@mixin size-l {
font-size: 1.25rem;
--font-size: 1.25rem;
line-height: 1.5;
}
@mixin size-m {
font-size: 1rem;
--font-size: 1rem;
line-height: 1.5;
}
@mixin size-s {
font-size: 0.75rem;
--font-size: 0.75rem;
line-height: 1.5;
}
// 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-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-highlight;
}
bdo {
@include text-regular;
}