Style guide

This project utilizes Client-first as style system. You can read the docs here.

Check the instructions page for a basic tutorial about this template.

Structure

Core

page-wrapper
main-wrapper
padding-global

Container

container-tiny
container-xxsmall
container-xsmall
container-small
container-medium
container-large
container-full

Max Width

max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full-mobile
max-width-full-tablet
max-width-full

Typography

Heading

Heading 1
heading-style-h1

h1

Heading 2
heading-style-h2

h2

Heading 3
heading-style-h3

h3

Heading 4
heading-style-h4

h4

Heading 5
heading-style-h5

h5

Heading 6
heading-style-h6

h6

Other elements

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.

Block Quote

"The Block quote element lets you add and style a quotation to make it stand out from the rest of your text."

Unordered Lists

Sample text is being used as a placeholder.
Sample text is being used as a placeholder.
Sample text is being used as a placeholder.

Ordered Lists

Sample text is being used as a placeholder.
Sample text is being used as a placeholder.
Sample text is being used as a placeholder.

Link

Text Link

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.
text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.
text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.
text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

Text style

text-style-label

Label
text-style-strikethrough

Strikethrough
text-style-italic

Italic
text-style-muted

Muted
text-style-all-caps

All caps
text-style-nowrap

nowrap
text-style-link

Link

Text Weight

text-weight-black

Black
text-weight-xbold

Xbold
text-weight-bold

Bold
text-weight-semibold

Semibold
text-weight-medium

Medium
text-weight-normal

Normal
text-weight-light

Text light
text-weight-xlight

Text xlight
text-weight-thin

Text thin

Text Alignment

text-align-left

Left
text-align-center

Center
text-align-right

Right

Rich Text

Text Rich Text

H1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

Caption text

Sample text is being used as a placeholder.
Sample text is being used as a placeholder.
Sample text is being used as a placeholder.

Sample text is being used as a placeholder.
Sample text is being used as a placeholder.
Sample text is being used as a placeholder.

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.