Style Guide

Structure and classes based on the Client-First method of Finsweet

All Headings

HTML tags define default Heading styles.
All H1 Headings

All heading 1

All H2 Headings

All heading 2

All H3 Headings

All heading 3

All H4 Headings

All heading 4

All H5 Headings
All heading 5

Headings Class

Heading classes when typography style doesn't match the default HTML tag.
heading-style-h1
heading-style-h1
heading-style-h2
heading-style-h2
heading-style-h3
heading-style-h3
heading-style-h4
heading-style-h4
heading-style-h5
heading-style-h5

HTML Tags

HTML tags define default text styles.
All Paragraphs

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.

All Links
Text Link

Text Sizes

Text sizes classes when typography size doesn't match the default HTML tag.
text-size-xlarge

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-size-large

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-size-medium

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-size-regular

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-size-small

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-size-tiny

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 Weights

Text weight classes when typography weight doesn't match the default HTML tag.
text-weight-semibold

text-weight-semibold

text-weight-medium

text-weight-medium

text-weight-light

text-weight-light

Text Styles

Text style classes when typography weight doesn't match the default HTML tag.
text-style-italic

text-style-italic

text-style-strikethrough

text-style-strikethrough

text-style-allcaps

text-style-allcaps

Rich Text

Rich text collection.
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here

Buttons

button
Call to action
button
is--secondary
button
is--tertiary
Call to action

Colors system

black
#000000
blacksmoke
#323243
blackgray
#999999
greysmoke
#D9D9D9
whitesmoke
#F5F5F5
white
#FFFFFF