Typography

Semantic Headings
Typography
Semantic H1

Progress and possibility

Semantic H2

Progress and possibility

Semantic H3

Progress and possibility

Semantic H4

Progress and possibility

Semantic H5
Progress and possibility
Semantic H6
Progress and possibility
Heading Styles
Typography
heading
heading-display

Progress and possibility

heading
heading-4xl

Progress and possibility

heading
heading-3xl

Progress and possibility

heading
heading-2xl

Progress and possibility

heading
heading-xl

Progress and possibility

heading
heading-lg

Progress and possibility

heading
heading-md

Progress and possibility

heading
heading-sm

Progress and possibility

heading
heading-xs

Progress and possibility

Paragraph Styles
Typography
paragraph
paragraph-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph
paragraph-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph
paragraph-xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Rich Text
Typography
rich-text

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C
Text link

Bold text

Emphasis

Superscript

Subscript

All Links
Text Link

Color

Primary
Color
Var:
--primary-yellow
Prop:
yellow
Value:
#CBFF54
Var:
--primary-pink
Prop:
pink
Value:
#F784E3
Neutral
Color
Var:
--neutral-dark
Prop:
dark
Value:
#17312F
Var:
--neutral-light
Prop:
light
Value:
#EEF1EA
Shade
Color
Var:
--shade-dark-50
Prop:
dark-50
Value:
rgba(23, 49, 47, 0.50)
Var:
--shade-light-5
Prop:
light-5
Value:
rgba(238, 241, 234, 0.05)
Var:
--shade-light-10
Prop:
light-10
Value:
rgba(238, 241, 234, 0.10)
Utility
Color
Var:
--utility-error
Prop:
error
Value:
#ff3131
Var:
--utility-focus
Prop:
focus
Value:
#CBFF54
Var:
--utility-default
Prop:
default
Value:
rgba(238, 241, 234, 0.10)

Elements

Element / Button
Elements
apply Now
Element / Field
Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sections

Section / Empty
Components
Section / Newsletter
Components

Globals

Global / Nav
Components
Global / Footer
Components
Primary
Secondary
Alternative
Taxt + Arrow
Inline - Text Link
Icons
Arrows

animations

1. Simply copy paste elements below to import animations to your project.
2. Delete elements, clear
classes and start applying
to your own elements!
Up
0.1 sec
Up
0.2 sec
Up
0.3 sec
Up
0.4 sec
Down
0.1 sec
Down
0.2 sec
Down
0.3 sec
Down
0.4 sec
Left
0.1 sec
Left
0.2 sec
Left
0.3 sec
Left
0.4 sec
Right
0.1 sec
Right
0.2 sec
Right
0.3 sec
Right
0.4 sec
Scale In
0.1 sec
Scale In
0.2 sec
Scale In
0.3 sec
Scale In
0.4 sec