typography

Buttons

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

Button Ghost

typography

Chalk color palette

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

Black

#000000

Copy Color

Text Color Gray 900

White

#FFFFFF

Copy Color

Text Color White

Gray 900

#22272F

Copy Color

Gray 800

#333B47

Copy Color

Gray 700

#454F5F

Copy Color

Gray 600

#566376

Copy Color

Gray 500

#67768E

Copy Color

Gray 400

#7D8BA1

Copy Color

Gray 300

#ACB5C3

Copy Color

Gray 200

#C4CAD4

Copy Color

Gray 100

#DCDFE5

Copy Color

Gray 50

#EDEFF2

Copy Color

Gray 25

#F6F7F9

Copy Color

Gray 0

#F3F5F7

Copy Color

Purple 900

#230E76

Copy Color

Purple 800

#34178E

Copy Color

Purple 700

#4C25B1

Copy Color

Purple 600

#6836D3

Copy Color

Purple 500

#874AF6

Copy Color

Purple 400

#A976F9

Copy Color

Purple 300

#BF92FC

Copy Color

Purple 200

#D7B7FE

Copy Color

Purple 100

#ECDAFE

Copy Color

typography

Heading and Body text

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

The quick brown fox jumps over the lazy dog

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

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

The quick brown fox jumps over the lazy dog

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

SECTIONS

Section Layout

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

Section / X Large

144px Vertical Padding

Section / Large

120px Vertical Padding

Section / Regular

92px Vertical Padding

Section / Small

72px Vertical Padding

Section / XSmall

48px Vertical Padding

Containers

Container Layout

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

Container / X Large

1440px Container

Container / Large

1280px Container

Container / Regular

1140px Container

Container / Small

960px Container

Container / X Small

740px Container

SECTIONS

Grids

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

This is some text inside of a div block.

Align Content Left

Align Content Center
‍

Align C

WRAPS

Wrappers

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

Icons

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

RICH TEXT

Rich Text Element

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website.
You can also import your colors directly from Figma.

Rich Text Element by Flowbase

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Example List
Example List
Example List
Example List
Example List
Example List
Example List

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

INTERACTIONS

Prebuilt Interactions

Note: Note: These are premade interactions, that you can use to easily apply foundational interactions to your page without needing to create them from scratch. These interactions will be added into your interaction panel and you can apply them to elements on your page.