Typography

Additional Typography

Utility Elements

Layout

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

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

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

Buttons

Sizes

button

is-xlarge

button

is-large

button

button

is-small

Icon Left

button

is-xlarge

is-icon-left

button

is-large

is-icon-left

button

is-icon-left

button

is-small

is-icon-left

Icon Right

button

is-xlarge

is-icon-right

button

is-large

is-icon-right

button

is-icon-right

button

is-small

is-icon-right

Variants

button

is-secondary

button

is-outline

button

is-tertiary

button

is-icon-only

button

is-icon-only

button

is-icon-only

button

is-icon-only

TYPOGRAPHY

Links

link

link

is-small

link

is-xsmall

link

is-underline

link

is-icon

TYPOGRAPHY

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

TYPOGRAPHY

Icons

icon-height-large

TYPOGRAPHY

Icon Embeds

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-custom1

icon-embed-custom2

TYPOGRAPHY

Icon Wrappers

icon-wrapper-xlarge

icon-wrapper-large

icon-wrapper-medium

icon-wrapper-small

icon-wrapper-xsmall

icon-rounded-lg

icon-rounded-large

icon-rounded-medium

icon-rounded-sm

icon-rounded-xs

TYPOGRAPHY

Avatars

avatar-medium

avatar-large

avatar-xlarge

avatar-2xl

avatar-gigantic

avatar-group

+1

TYPOGRAPHY

Badges

badge

Badge

badge

is-xsmall

Badge

badge

is-small

Badge

badge

is-large

Badge

TYPOGRAPHY

Tags

tag

tag

tag

is-small

tag

TYPOGRAPHY

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

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

background-color-black

background-color-white

background-color-primary

background-color-secondary

background-color-tertiary

background-color-alternative

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

List item
List item
List item

Caption goes here