Typography

Fonts

ES Rebond Grotesque

Title

Type: ESRebondGrotesque
Weights: Normal (400), Medium (500), Bold (700)

DM Sans

Body

Type: DM Sans
Weights: Normal (400), Medium (500), Bold (700)

Titles

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

title-xxlarge
Class
title-xlarge
Class
title-large
Class
title-medium
Class
title-small
Class
title-xsmall
Class
title-xxsmall
Class

Body

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

eyebrow
Lorem Ipsum
Trusted by over +10.000 businesses
Trusted by over +10.000 businesses
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Color

Background

Green-90

#65FEA2
u-bg-green-90

Green-60

#00A65D
u-bg-green-60

Green-04

#001306
u-bg-green-04

Blue-83

#BDCEFF
u-bg-blue-83

Blue-62

#6392FF
u-bg-blue-62

Blue-10

#001946
u-bg-blue-10

Neutral-100

#FFFFFF
u-bg-white

Neutral-97

#F9F6EF
u-bg-neutral-97

Neutral-95

#F5F0E6
u-bg-neutral-95

Neutral-90

#E7E2D8
u-bg-neutral-90

Neutral-70

#ADABA5
u-bg-neutral-70

Neutral-10

#1C1C18
u-bg-neutral-10

Highlight

#FF6334
u-bg-highlight

Text

Aa

Primary Dark

#1C1C18
u-text-primary
Aa

Primary Light

#FFFFFF
u-text-secondary
Aa

Secondary

#FFFFFF
u-text-secondary
Aa

Tertiary

#00A65D
u-text-black
Aa

Highlight

#FF6334
u-text-highlight
Aa

Blue-10

#001946
u-text-blue-10
Aa

Green-60

#00a65d
u-text-green-60
Aa

Green-90

#65fea2
u-text-green-90
Aa

Neutral-70

#ADABA5
u-text-neutral-70
Aa

Neutral-90

#E7E2D8
u-text-midgray

Components

Buttons

Try Tunify for Free

Default

btn
cc-default
Try for free

Default / Small

btn-small
cc-default
Button

Secondary

btn
cc-secondary
Button

Default / Light

btn
cc-light
Button

Default / Small / Light

btn-small
cc-light
Button

Default / Dark

btn
cc-dark
Button

Default / Small / Dark

btn-small
cc-dark
Button

Secondary / Light

btn
cc-secondary
cc-light
Button

Secondary / Small / Light

btn-small
cc-secondary
cc-light
Text

Text Link

All Links

Slider / Blue

All Links

Slider / Blue

All Links

Square button

btn-square

Square button

btn-square
cc-light
Nederlands (NL)

Language button

All Links

Card button

All Links

Forms

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Card

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Rich Text

Heading 1

Heading 2

Heading 3

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.

Heading 4

Image caption here
Block quote (same font size as paragraph-1.25)

Ordered list

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

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Inline code

Superscript

Subscript

Heading 1

Heading 2

Heading 3

Ordered list

  • Item 1
  • Item 2
  • Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Inline code

Superscript

Subscript

Prevent Style Clean Up

This is where you can store elements and classes used in custom code to prevent their classes/styles from being cleaned up.

Elements

Monthly
Yearly
Save 15%

Pricing Switch

View all
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Pills

Utilities

Margin

Top

u-mt-0
margin-top: 0;
u-mt-0.5
margin-top: 0.5em;
u-mt-1
margin-top: 1em;
u-mt-2
margin-top: 2em;
u-mt-3
margin-top: 3em;
u-mt-auto
margin-top: auto;

Bottom

u-mb-0
margin-bottom: 0;
u-mb-0.5
margin-bottom: 0.5;
u-mb-1
margin-bottom: 1em;
u-mb-2
margin-bottom: 2em;
u-mb-3
margin-bottom: 3em;

Other

u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-m-0.5
margin: 0.5;
u-mr-1
margin-right: 1em;
u-ml-1
margin-left: 1em;

Padding

Top

u-pt-0
padding-top: 0;
u-pt-0.5
padding-top: 0.5;
u-pt-1
padding-top: 1em;
u-pt-2
padding-top: 2em;
u-pt-3
padding-top: 3em;

Bottom

u-pb-0
padding-bottom: 0;
u-pb-0.5
padding-bottom: 0.5;
u-pb-1
padding-bottom: 1em;
u-pb-2
padding-bottom: 2em;
u-pb-3
padding-bottom: 3em;

Other

u-p-0
padding: 0;
u-p-0.5
padding: 0.5em;
u-p-1
padding: 1em;

Alignment / Style

u-text-center
text-align: center;
u-text-right
text-align: right;
u-text-left
text-align: left;
u-text-strikethrough
text-style: strikethrough;
u-text-bold
text-style: bold;
u-text-regular
text-style: regular;
u-text-medium
text-style: medium;

Overflow

u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;

Display + position

u-d-none
display: none;
u-d-block
display: block;
u-d-flex
display: flex;
u-d-inline-flex
display: inline-flex;
u-position-relative;
position: relative;
u-position-sticky;
position: sticky;

Size

u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height: 100vh;

Helpers

u-img-cover
Multiple properties
u-link-cover
Multiple properties
Open link
u-aspect-1x1
Multiple properties
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
Multiple properties
u-show-mobile-landscape
Multiple properties
u-hide-mobile-landscape
Multiple properties
u-two-lines
Multiple properties

Layout

Section

section

Container

container

Grid

col
col
col
col
col
col
col
col
col
col

Grid - Desktop

col
col-lg-1
col
col-lg-11
col
col-lg-2
col
col-lg-10
col
col-lg-3
col
col-lg-9
col
col-lg-4
col
col-lg-8
col
col-lg-5
col
col-lg-7
col
col-lg-6
col
col-lg-6
col
col-lg-12

Grid - Tablet

col
col-md-1
col
col-md-11
col
col-md-2
col
col-md-10
col
col-md-3
col
col-md-9
col
col-md-4
col
col-md-8
col
col-md-5
col
col-md-7
col
col-md-6
col
col-md-6
col
col-md-12

Grid - Mobile Landscape

col
col-sm-1
col
col-sm-11
col
col-sm-2
col
col-sm-10
col
col-sm-3
col
col-sm-9
col
col-sm-4
col
col-sm-8
col
col-sm-5
col
col-sm-7
col
col-sm-6
col
col-sm-6
col
col-sm-12

Grid - Mobile Portrait

col
col-xs-1
col
col-xs-11
col
col-xs-2
col
col-xs-10
col
col-xs-3
col
col-xs-9
col
col-xs-4
col
col-xs-8
col
col-xs-5
col
col-xs-7
col
col-xs-6
col
col-xs-6
col
col-xs-12

Align columns

row
row-align-center
col
col
col
row
row-align-end
col
col
col

Justify columns

row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
col

Reorder columns

col
col-lg-first
col
col-md-first
col
col-sm-first
col
col-xs-first
col
col-lg-last
col
col-md-last
col
col-sm-last
col
col-xs-last

Other columns modifiers

Shrink Column

col
col-shrink
col

Gutterless Column

row
row-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters
col
col-no-gutters