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

Client-First Documentation

Browse Components

Resources

Chalk is a system based project, and it is required that you follow some basic setup to get the best experience. If you are familiar with Client-First then Chalk should feel familiar, but please review our complete getting started guide.

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

List item
List item
List item

Caption goes here

utility

Buttons

Sizes

button

is-xlarge

button

is-large

button

button

is-small

Variants

button

is-secondary

button

is-outline

button

is-tertiary

Icon Left

button

is-xlarge

is-icon-left

button

is-large

is-icon-left

button

is-icon-left

button

is-small

is-icon-left

button

is-secondary

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

Icon Only

button

is-xlarge

is-icon-only

button

is-large

is-icon-only

button

is-icon-only

button

is-small

is-icon-only

utility

Links

link

is-large

link

link

is-small

link

is-xsmall

link

is-underline

link

is-icon

utility

Forms

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