Typography

Scale

Headings

Class name
Font Size
Line Height
Sample
Heading
XL
38px
44px

This is Extra Large (XL) Heading

Heading
L
32px
40px

This is Large (L) Heading

Heading
M
24px
32px

This is Medium (M) Heading

Heading
S
20px
28px

This is Small (S) Heading

Heading
XS
18px
28px
This is Extra Small (XS) Heading
Heading
XXS
16px
24px
This is Extra Extra Small (XXS) Heading

Body text

Class name
Font Size
Line Height
Sample
Body Text
L
18px
32px

This is Large (L) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body Text
M
16px
24px

This is Medium (M) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body Text
S
14px
20px

This is Small (S) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Components

Rich Text

This is Heading 1 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 2 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 3 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 4 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 5 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 6 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

Paragraph

  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  1. This is an ordered list item inside of a Rich Text
  2. This is an ordered list item inside of a Rich Text
  3. This is an ordered list item inside of a Rich Text
This is a block quote inside of a Rich Text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.
Rich Text Dark

This is Heading 1 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 2 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 3 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 4 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 5 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 6 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

Paragraph

  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  1. This is an ordered list item inside of a Rich Text
  2. This is an ordered list item inside of a Rich Text
  3. This is an ordered list item inside of a Rich Text
This is a block quote inside of a Rich Text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.
Tagline
This is a Tagline

Lists

Unordered list
  • This is an unordered list item
  • This is anunordered list item
  • This is anunordered list item
Ordered list
  1. This is an ordered list item
  2. This is an ordered list item
  3. This is an ordered list item
Unordered list with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon

Text Components

Rich Text

This is Heading 1 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 2 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 3 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 4 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 5 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 6 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

Paragraph

  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  1. This is an ordered list item inside of a Rich Text
  2. This is an ordered list item inside of a Rich Text
  3. This is an ordered list item inside of a Rich Text
This is a block quote inside of a Rich Text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.
Tagline
This is a Tagline

Lists

Unordered list
  • This is an unordered list item
  • This is anunordered list item
  • This is anunordered list item
Ordered list
  1. This is an ordered list item
  2. This is an ordered list item
  3. This is an ordered list item
Unordered list with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon

Alignment

You can set alignment for text elements by adding a class name from below.

T A L
This is some text inside of a div block.
T A C
This is some text inside of a div block.
T A R
This is some text inside of a div block.
T A J
This is some text inside of a div block.

Best Practices

Page Description

Typography can help create clear hierarchies, organize information, and guide users through a product or experience. Typography consists of basic text writing, including headings, body text, lists, and more.

Video tutorials

Coming soon...

© X systemflow.co - All rights reserved.
Designed with ❤️ by Mateusz Wierzbicki & Greg Rog.
arrow_upward