CHALK v2 - CLIENT-FIRST

Chalk Starter Project

The ultimate starting point for designers and developers to build beatuiful products faster than ever before.

Client-First Documentation
Browse Components

Typography

Headings

H1 Headings

The quick brown fox jumps over the lazy dog

heading-style-h1
The quick brown fox jumps over the lazy dog
H2 Headings

The quick brown fox jumps over the lazy dog

heading-style-h2
The quick brown fox jumps over the lazy dog
H3 Heading

The quick brown fox jumps over the lazy dog

heading-style-h3
The quick brown fox jumps over the lazy dog
H4 Heading

The quick brown fox jumps over the lazy dog

heading-style-h4
The quick brown fox jumps over the lazy dog
H5 Heading
The quick brown fox jumps over the lazy dog
heading-style-h5
The quick brown fox jumps over the lazy dog
H6 Heading
The quick brown fox jumps over the lazy dog
heading-style-h6
The quick brown fox jumps over the lazy dog

Other HTML Tags

All Paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may
All Links
All Links
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All unordered lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Text Classes

text-size-xlarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales laoreet gravida. In eu faucibus felis. Cras aliquet urna dui, vitae vestibulum felis commodo in.

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

text-size-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

overline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcapps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Colors

text-color-primary

text-color-primary

text-color-secondary

text-color-secondary

text-color-tertiary

text-color-tertiary

text-color-alternate

text-color-alternate

text-color-inherit

text-color-inherit

Text Weights

text-weight-xbold

text-weight-xbold

text-weight-bold

text-weight-bold

text-weight-semibold

text-weight-semibold

text-weight-medium

text-weight-medium

text-weight-normal

text-weight-normal

text-weight-light

text-weight-light

text-weight-thin

text-weight-thin

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Rich Text

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

Elements

Buttons

button
Button
button
is-small
Button
button
is-large
Button
button
is-secondary
Button
button
is-outline
Button
button
is-ghost
Button
button
is-icon-left
Button
button
is-icon-right
Button
button
is-icon-only

Forms

form_field-label
form_input
form_input
is-icon-left
form_input
is-icon-right
form_input
is-text-area
form_input
is-select-input
form_radio
form_checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icons

icon
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge

Avatars

avatar
avatar
is-small
avatar
is-large
avatar-group

Badges

badge
Badge
badge
is-small
Badge
badge
is-large
Badge

Layout

Background Colors

background-color-primary
background-color-secondary
background-color-tertiary

Utilities

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
image-cover

Structure

page-wrapper
main-wrapper
padding-global
section-small
section-medium
section-large
section-xlarge
button-group

Containers

container-xsmall
container-small
container-medium
container-large
container-xlarge

Columns

column
column-3x-small
column-2x-small
column-xsmall
column-small
column-medium
column-large
column-xlarge
column-2x-large
column-3x-large
column-left
column-center
column-right
column-right

Row

row
row-2x-small
row-xsmall
row-small
row-medium
row-large
row-xlarge
row-2x-large
row-top
row-bottom
row-left
row-right
row-center
row-space-between
row-wrap

Grids

grid-two-column
grid-three-column
grid-four-column

Max Widths

max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall

Paddings

Direction Classes

padding-top
padding-bottom
padding-left
padding-right
padding-vertical
padding-horizontal

Size Classes

padding-0
padding-3x-small
padding-2x-small
paddng-xsmall
paddng-small
paddng-medium
paddng-large
paddng-xlarge
paddng-2x-large
padding-3x-large

Margins

*Chalk uses columns and rows for spacing instead of margin wrappers, but these are available for those who prefer using margin over flex gap.

Direction Classes

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Size Classes

margin-0
margin-3x-small
margin-2x-small
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-2x-large
margin-3x-large