Typography

Basic Mainsail typography classes are available.

Headings
Body text
Label text
Button text

Headings#

Example

<h1>Hello World Hero</h1><h2>Hello World H2</h2><h3>Hello World H3</h3><h4>Hello World H4</h4>

Hello World Hero

Hello World H2

Hello World H3

Hello World H4

info

You may also use .h1, .h2, .h3, .h4 classes when needed

Body text#

4 sizes of body text exist: lg, md (default), sm and xs.

Example

<p className="body-text lg">    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, accusamus.</p>
<p className="body-text md">    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, accusamus.</p>
<p className="body-text sm">    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, accusamus.</p>
<p className="body-text xs">    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, accusamus.</p>

Lorem ipsum, dolor sit amet consectetur adipisicing elit

Label text#

1 size of label text exists:sm.

caution

This is a text style for labeling UI content and not specifically for <label/> elements

Example

<span className="label-text sm text-neutral-3">Labeling Text</span>

Labeling Text

Button text#

2 sizes of button text exist: md & sm (md can be omitted).

Example

<p className="button-text text-neutral-2">Button Text</p><p className="button-text sm text-neutral-2">Button Text</p>

Regular Button Text

Small Button Text