Typography

Edit Text Styles and sizes in the 01 Typography variables. Once you edit these styles the changes will be reflected throughout the library.

Typeface

Plus Jakarta Sans

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%^&*()

Heading Styles

Edit the heading sizes in the 01 Typography variables.You will be able to see the mobile sizes as well here.

Line heights for all text components are set within the class and HTML element, not the variables

Headings use the Font Primary font-family variable

class

heading-style-h1

Font Size: 58px | Line height: 1.2-

Base HTML H1

heading-style-h1

class

heading-style-h2

Font Size: 52px | Line height: 1.2-

Base HTML H2

heading-style-h2

class

heading-style-h3

Font Size: 48px | Line height: 1.2-

Base HTML H3

heading-style-h3

class

heading-style-h4

Font Size: 40px | Line height: 1.2-

Base HTML H4

heading-style-h4

class

heading-style-h5

Font Size: 32px | Line height: 1.3-

Base HTML H5

heading-style-h5

class

heading-style-h6

Font Size: 28px | Line height: 1.3-

Base HTML H6

heading-style-h6

Body Styles

Headings use the Font Secondary font-family variable

class

text-size-large

Font Size: 22px | Line height: 1.5

Lorem ipsum dolor sit amet consectetur. Libero nulla pretium in vitae ut vivamus posuere id. Posuere bibendum pulvinar in ut velit enim id gravida. Venenatis arcu a nulla dui vulputate urna justo nibh vel. Amet lorem habitant risus id.

class

text-size-medium

Font Size: 20px | Line height: 1.5

class

text-size-regular

Font Size: 18px | Line height: 1.5

class

text-size-small

Font Size: 16px | Line height: 1.5-

Eyebrows

class

eyebrow-text

Font Size: 14px | Line height: 1.1-

This is some text inside of a div block.

Text Weight

class

text-weight-xbold

text-weight-xbold (800)

class

text-weight-bold

text-weight-bold (700)

class

text-weight-semibold

text-weight-semibold (600)

class

text-weight-medium

text-weight-medium (500)

class

text-weight-normal

text-weight-normal (400)

class

text-weight-light

text-weight-light (300)

Text Styles

class

text-style-italic

class

text-style-strikethrough

class

text-style-allcaps

class

text-style-nowrap

class

text-style-quote

class

text-style-2lines

Lorem ipsum dolor sit amet consectetur. Auctor suspendisse rhoncus tellus tellus ullamcorper ac dignissim elementum. Adipiscing ipsum tristique diam felis risus in...

class

text-style-3lines

Lorem ipsum dolor sit amet consectetur. Auctor suspendisse rhoncus tellus tellus ullamcorper ac dignissim elementum. Adipiscing ipsum tristique diam felis risus in Euismod nullam quisque pellentesque bibendum condimentum. Elementum a euism...

class

text-style-link

Text Link

Text Alignment

class

text-align-left

class

text-align-center

class

text-align-right

Lists

HTML

All Unordered Lists

Lorem ipusm
Lorem ipusm
Lorem ipusm

HTML

All Ordered Lists

Lorem ipusm
Lorem ipusm
Lorem ipusm

Rich Text Field

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

Text Link

Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus.

Item 1
Item 2
Item 3

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript