Typography
HTML Headings
Headings
HTML Tags
Text Sizes
Labels
Oveline
Additional Typography
Rich Text
Utility Elements
Buttons
Links
Forms
Icons
Icon Embeds
Icon Wrappers
Avatars
Badges
Tags
Utility
Layout
Structure
Containers
Max Widths
Margin
Padding
CHALK - CLIENT-FIRST v1.1

Chalk Starter Project

Chalk UI is the ultimate starting point for designers and developers to build beatuiful products faster than ever before. Browse through 1,000+ wireframe UI components and paste them into this project for optimized development.

Clone Starter Project
Learn More
Browse Components
Resources

When using Chalk we recommend downloading the Flowbase Chrome Extension to gain access to our Class Merger feature. This feature helps you avoid duplicate classes when adding components to your project. With this extension installed, in Webflow you will get a prompt to merge classes. Learn about getting started

TYPOGRAPHY

HTML Headings

H1 Headings

The quick brown fox jumps over the lazy dog

H2 Headings

The quick brown fox jumps over the lazy dog

H3 Heading

The quick brown fox jumps over the lazy dog

H4 Heading

The quick brown fox jumps over the lazy dog

H5 Heading
The quick brown fox jumps over the lazy dog
H6 Heading
The quick brown fox jumps over the lazy dog
TYPOGRAPHY

Heading Classes

heading-style-h1

The quick brown fox jumps over the lazy dog

heading-style-h2

The quick brown fox jumps over the lazy dog

heading-style-h3

The quick brown fox jumps over the lazy dog

heading-style-h4

The quick brown fox jumps over the lazy dog

heading-style-h5
The quick brown fox jumps over the lazy dog
heading-style-h6
The quick brown fox jumps over the lazy dog
TYPOGRAPHY

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

Text Sizes

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

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.

TYPOGRAPHY

Labels

label-large

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

label-regular

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

label-small

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

label-xsmall

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

TYPOGRAPHY

Overline

overline-large

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

overline-medium

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

overline-small

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

overline-xsmall

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

TYPOGRAPHY

Text Colors

text-color-white

text-color-white

text-color-black

text-color-black

text-color-secondary

text-color-secondary

text-color-gray-200

text-color-gray-200

text-color-gray-300

text-color-gray-300

text-color-gray-400

text-color-gray-400

text-color-gray-500

text-color-gray-500

text-color-gray-600

text-color-gray-600

text-color-gray-700

text-color-gray-700

text-color-gray-800

text-color-gray-800

text-color-gray-900

text-color-gray-900

TYPOGRAPHY

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

TYPOGRAPHY

Text Alignments

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

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-italic

text-style-italic

text-style-link

text-style-link

text-style-muted

text-style-muted

text-style-allcapps

text-style-allcaps

text-style-nowrap

text-style-nowrap

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.

TYPOGRAPHY

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
utility

Buttons

Sizes
button
Button
button
is-xlarge
Button
button
is-large
Button
button
is-small
Button
Variants
button
is-secondary
Button Text
button
is-outline
Button Text
button
is-tertiary
Button Text
Icon Left
button
is-icon-left
Button Text
button
is-xlarge
is-icon-left
Button
button
is-large
is-icon-left
Button
button
is-small
is-icon-left
Button Text
Icon Right
button
is-icon-right
Button
button
is-xlarge
is-icon-right
Button
button
is-large
is-icon-right
Button
button
is-small
is-icon-right
Button
Icon Only
button
is-icon-only
button
is-xlarge
is-icon-only
button
is-large
is-icon-only
button
is-small
is-icon-only
utility

Forms

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

Icons

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
utility

Icon Embeds

icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-custom1
icon-embed-custom2
utility

Icon Wrappers

icon-wrapper-xlarge
icon-wrapper-large
icon-wrapper-medium
icon-wrapper-small
icon-wrapper-xsmall
icon-rounded-xlarge
icon-rounded-large
icon-rounded-medium
icon-rounded-small
icon-rounded-xsmall
utility

Avatars

avatar-medium
avatar-large
avatar-xlarge
avatar-2xl
avatar-gigantic
avatar-group
+1
utility

Badges

badge
Badge
badge
is-xsmall
Badge
badge
is-small
Badge
badge
is-large
Badge
utility

Tags

tag
tag
tag
is-small
tag
tag
is-large
tag
utility

Utility System

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
utility

Background Colors

background-color-white
background-color-primary
background-color-black
background-color-secondary
background-color-tertiary
background-color-alternative
LAYOUT

Structure Classes

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

Containers

container-xsmall
container-small
container-medium
container-large
LAYOUT

Max Widths

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

Margins

Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
LAYOUT

Paddings

Direction Classes
padding-top
padding-bottom
padding-left
padding-right
padding-vertical
padding-horizontal
Size Classes
margin-xhuge
padding-tiny
paddng-xxsmall
paddng-small
paddng-medium
paddng-large
paddng-xlarge
paddng-
paddng-huge
paddng-xhuge
paddng-xxhuge
paddng-
paddng-
paddng-
paddng-xsmall