Typography

Base body font size

Font size: 100%
Line height: 1.5

Base Font

Open Sans Light

ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmn
opqrstuvwxyz
1234567890

Supporting Font

Open Sans Light

ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmn
opqrstuvwxyz
1234567890

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

Native HTML Typography

H1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H1
Font size: 2.75em
Line height: 1.2

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

H2
Font size: 2.25em
Line height: 1.2

H3 - 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.

H3
Font size: 1.75em
Line height: 1.3

H4 - 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.

H4
Font size:1.25em
Line Height: 1.3

H5 - 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.

H5
Font size: 1.125em
Line Height: 1.3

H6 - 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.

H6
Font size: 1em
Line Height: 1.5

Paragraph
Font size: 1em
Line height: 1.5 (inherited)

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.

Block Quote
Font size: 1em
Line height: 1.6 (inherited)

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.
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.
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.

Bullet List
‍Font size: 1em
Line height: 1.5 (inherited)

Lorem ipsum

Text Link
Font size: 1em
Line height: 1.5 (inherited)

Typgraphy Style Classes

Heading 1

.h1
Font size: 2.75 em
Line height: 1.25

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading 2

.h2
Font size: 2.25 em
Line height: 1.25

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading 3

.h3
Font size: 1.75 em
Line height: 1.3

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

Heading 4

.h4
Font size: 1.25 em
Line height: 1.3

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

Heading 5

.h5
Font size: 1.125 em
Line height: 1.5 (inherited)

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

Heading 6

.h6
Font size: 1 em
Line height: 1.5 (inherited)

.hero-tagline-large
Font size: 4.5 em
Line height: 1.125

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.hero-tagline-Medium
Font size: 3.75 em
Line height: 1.125

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.hero-tagline-small
Font size: 3.25 em
Line height: 1.2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.hero-sub-taglline
Font size: 2.25 em
Line height: 1.2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

.section-header
Font size: 2.25 em
Line height: 1.2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text - Extra Extra Large

.text-xxl
Font size: 2 em
Line height: 1.5 (inherited)

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.

Text - Extra Large

.text-xl
Font size: 1.5 em
Line height: 1.5 (inherited)

Text - Large

.text-lg
Font size: 1.25 em
Line height: 1.5 (inherited)

Text - Small

.text-sm
Font size: 0.9 em
Line height: 1.5 (inherited)

Text - Extra Small

.text-sm
Font size: 0.7 em
Line height: 1.5 (inherited)

Text - Light

.text-white
Font size: 1em
Line height: 1.5

All Caps

.all-caps‍

Letter Spaced 1

.letter-spaced-1

Letter Spaced 2

.letter-spaced-2

Letter Spaced 3

.letter-spaced-2

Colour

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Main colors

BRAND: CFT BLUE

CFT-BLUE-900

#001829

CFT-BLUE-800

#003152

CFT-BLUE-700

#00497A

CFT-BLUE-600

#00568F

CFT-BLUE-500

#0062A3

CFT-BLUE-400

#0066AA

CFT-BLUE-300

#0087E0

CFT-BLUE-200

#0A9DFF

CFT-BLUE-100

#33ADFF

CFT-BLUE-50

#5CBEFF

CFT-BLUE-25

#85CEFF

BRAND: CFT RED

CFT-Red-900

#230607

CFT-Red-800

#460B0D

CFT-Red-700

#6A1114

CFT-Red-600

#8D161A

CFT-Red-500

#B01C21

CFT-Red-400

#D62127

CFT-Red-300

#E13D42

CFT-Red-200

#E66065

CFT-Red-100

#EC8387

CFT-Red-50

#F1A7A9

CFT-Red-25

#F7CACC

STONE

STONE 900

#1C1917

STONE 800

#292524

STONE 700

#44403c

STONE 600

#57534e

STONE 500

#78716c

STONE 400

#a8a29e

STONE 300

#d6d3d1

STONE 200

#e7e5e4

STONE 100

#f5f5f4

STONE 50

#fafaf9

NEUTRAL

NEUTRAL 900

#171717

NEUTRAL 800

#262626

NEUTRAL 700

#404040

NEUTRAL 600

#57534e

NEUTRAL 500

#78716c

NEUTRAL 400

#a3a3a3

NEUTRAL 300

#d4d4d4

NEUTRAL 200

#e5e5e5

NEUTRAL 100

#f5f5f5

NEUTRAL 50

#fafafa

SLATE

SLATE 900

#0f172a

SLATE 800

#1e293b

NEUTRAL 700

#334155

SLATE 600

#475569

SLATE 500

#64748b

SLATE 400

#94a3b8

SLATE 300

#cbd5e1

SLATE 200

#e2e8f0

SLATE 100

#f1f5f9

SLATE 50

#f8fafc

RED

RED 900

#7f1d1d

RED 800

#991b1b

RED 700

#b91c1c

RED 600

#dc2626

RED 500

#ef4444

RED 400

#f87171

RED 300

#cbd5e1

RED 200

#fecaca

RED 100

#fee2e2

RED 50

#fef2f2

AMBER

AMBER 900

#78350f

AMBER 800

#92400e

AMBER 700

#b45309

AMBER 600

#d97706

AMBER 500

#f59e0b

AMBER 400

#fbbf24

AMBER 300

#fcd34d

AMBER 200

#fde68a

AMBER 100

#fef3c7

AMBER 50

#fffbeb

GREEN

GREEN 900

#14532d

GREEN 800

#166534

GREEN 700

#15803d

GREEN 600

#16a34a

GREEN 500

#22c55e

GREEN 400

#4ade80

GREEN 300

#86efac

GREEN 200

#bbf7d0

GREEN 100

#dcfce7

GREEN 50

#f0fdf4

SKY

SKY 900

#0c4a6e

SKY 800

#075985

SKY 700

#0369a1

SKY 600

#0284c7

SKY 500

#0ea5e9

SKY 400

#38bdf8

SKY 300

#7dd3fc

SKY 200

#bae6fd

SKY 100

#e0f2fe

SKY 50

#f0f9ff

PURPLE

PURPLE 900

#581c87

PURPLE 800

#6b21a8

PURPLE 700

#7e22ce

PURPLE 600

#9333ea

PURPLE 500

#a855f7

PURPLE 400

#c084fc

PURPLE 300

#d8b4fe

PURPLE 200

#e9d5ff

PURPLE 100

#f3e8ff

PURPLE 50

#faf5ff

ROSE

ROSE 900

#881337

ROSE 800

#9f1239

ROSE 700

#be123c

ROSE 600

#e11d48

ROSE 500

#f43f5e

ROSE 400

#fb7185

ROSE 300

#fda4af

ROSE 200

#fecdd3

ROSE 100

#f3e8ff

ROSE 50

#fff1f2

Logo

These are sample logo SVGs that can be downloaded straight from the site, or you could set up a download link that links with the file that's hosted with your cloud storage application of choice.

MAIN LOGO BLACK

MAIN LOGO BLACK

MAIN LOGO WHITE

MAIN LOGO WHITE

Components

These are a few example components.

STANDARD BUTTON

WHITE BUTTON

GREEN BUTTON

ORANGE BUTTON

BLUE BUTTON

BLUE BUTTON

BLUE BUTTON

SMALL BUTTON

LARGE BUTTON

BLOCK BUTTON

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Heading

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

Heading

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

Heading

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

SEO Friendly Image Text

Lorem ipsum dolor sit amet

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

Date and Time

Jan 15, 2023

6:30 pm

9:30 pm

SEO Friendly Image Text

Lorem ipsum dolor sit amet

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

Date and Time

Jan 15, 2023

6:30 pm

9:30 pm

SEO Friendly Image Text

Lorem ipsum dolor sit amet

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

Date and Time

Jan 15, 2023

6:30 pm

9:30 pm

FEB 25 2023

8PM

SEO Friendly Image Text

Lorem ipsum dolor sit amet

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

FEB 25 2023

8PM

SEO Friendly Image Text

Lorem ipsum dolor sit amet

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

FEB 25 2023

8PM

SEO Friendly Image Text

Lorem ipsum dolor sit amet

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

SEO Friendly Image Text

Monday, January 1, 2020

Lorem ipsum dolor sit amet

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

Button

SEO Friendly Image Text

Monday, January 1, 2020

Lorem ipsum dolor sit amet

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

Button

SEO Friendly Image Text

Monday, January 1, 2020

Lorem ipsum dolor sit amet

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

Button

SEO Friendly Image Text

Monday, January 1, 2020

Lorem ipsum dolor sit amet

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

Button

SEO Friendly Image Text

Monday, January 1, 2020

Lorem ipsum dolor sit amet

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

Button

SEO Friendly Image Text

Monday, January 1, 2020

Lorem ipsum dolor sit amet

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

Button

SEO Friendly Image Text

Monday, January 1, 2020

Lorem ipsum dolor sit amet

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

Button

SEO Friendly Image Text

Monday, January 1, 2020

This is a really really really really long header

SEO Friendly Image Text

Monday, January 1, 2020

This is a really really really really long header

SEO Friendly Image Text

Monday, January 1, 2020

This is a really really really really long header

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium, nunc consectetur varius egestas, nisl ligula sollicitudin mi, id euismod orci nunc et turpis. Sed nibh eros, cursus eget vehicula ornare, pulvinar nec justo. Nullam elit mi, fermentum vel ultricies a, egestas sit amet enim. Duis et lectus tortor, id fermentum est. Sed elementum fermentum ultricies. Vestibulum vitae ipsum a mauris lobortis posuere in eu lacus. Cras eu metus lacus. Sed vel nisl vitae quam fermentum pulvinar. Ut eleifend, est ut lobortis pharetra, lorem felis rhoncus mauris, sed pellentesque ligula nisi vel ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit?