Typography

CreateX
UI Kit

Headings

  Show code

H1. Heading

Size: 48px, Weight: 900, Line height: 58px

H2. Heading

Size: 40px, Weight: 900, Line height: 48px

H3. Heading

Size: 34px, Weight: 900, Line height: 43px

H4. Heading

Size: 26px, Weight: 900, Line height: 34px
H5. Heading
Size: 21px, Weight: 900, Line height: 28px
H6. Heading
Size: 18px, Weight: 900, Line height: 25px

Displays

  Show code

Display 1

Size: 96px, Weight: 900, Line height: 106px

Display 2

Size: 88px, Weight: 900, Line height: 97px

Display 3

Size: 72px, Weight: 900, Line height: 79px

Display 4

Size: 56px, Weight: 900, Line height: 62px

Body copy

  Show code

Lead text. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.

Extra large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Normal text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Extra small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

List types

  Show code

  • Sed ut perspiciatis unde omnis iste natus error sit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Ut enim ad minima veniam
  • At vero eos et accusamus et iusto odio dignissimos ducimus
  1. Sed ut perspiciatis unde omnis iste natus error sit
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  3. Ut enim ad minima veniam
  4. At vero eos et accusamus et iusto odio dignissimos ducimus
  • Sed ut perspiciatis unde omnis iste natus error sit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Ut enim ad minima veniam, quis nostrum exercitationem
  • At vero eos et accusamus et iusto odio dignissimos ducimus
  • Sed ut perspiciatis unde omnis iste natus error sit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Ut enim ad minima veniam, quis nostrum exercitationem
  • At vero eos et accusamus et iusto odio dignissimos ducimus

Inline text elements

  Show code

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.

Blockquotes

  Show code

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo officia deserunt mollitia animi laborum.

Barbara Palson Graphic Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo officia deserunt mollitia animi laborum.

Barbara Palson Graphic Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo officia deserunt mollitia animi laborum.

Barbara Palson Graphic Designer

Description lists

  Show code

Description lists no icons
A description list is perfect for defining terms.
Malesuada porta
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit porto fegut harum quidem rerum facilis est et expedita distinctio.
Lorem ipsum dolor sit amet
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus adipisci velit.
Description lists with icons
A description list is perfect for defining terms.
Malesuada porta
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit porto fegut harum quidem rerum facilis est et expedita distinctio.
Lorem ipsum dolor sit amet
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus adipisci velit.

Drop caps

  Show code

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur numquam eius modi tempora incidunt ut labore et dolore?

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur numquam eius modi tempora incidunt ut labore et dolore ratione voluptatem sequi.

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat nulla pariatur numquam eius modi tempora.