Overview Color palette Buttons Typography Blog Iconography Tables Tables Form elements Tab & Lists Modal boxes Alerts Cards

Overview

To create a clean and consistent design system which helps us to rapidly mockup and test our ideas with these flexible building blocks.

Core palette

Gold
#ffd500

Golden Rod
#ddb904

White Smoke
#f2f2f2

Background palette

Gold
#ffd500

Golden Rod
#ddb904

White Smoke
#f2f2f2

Buttons

Typography

H1 Black

H2 heading

H3 heading

H4 heading

H5 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

This is a block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

I am a hyperlink I am a hyperlink I am a hyperlink I am a hyperlink

This is a list item
This is a list item
This is a list item
This is a list item
This is a list item
This is a list item
This is a list item

Blog Styling

H2 header for blogs

H3 header for blogs

Static and dynamic content editing

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, block quotes, 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.

List item
List item
List item

Bullet item
Bullet item
Bullet item

Iconography

Tables

Table heading

Table heading

Table heading

Table heading

Table heading

Table heading

Form elements

+

Accordion heading one

+

Accordion heading one

Heading here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

+

Accordion heading three

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Tab & Lists

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Jan 17, 2018

List item heading

Jan 17, 2018

List item heading

Jan 17, 2018

List item heading

Jan 17, 2018

List item heading

Jan 17, 2018

List item heading

Jan 17, 2018

List item heading

Jan 17, 2018

5 mins ago

Tom

You don't win friends with salad.

5 mins ago

Tom

You don't win friends with salad.

Card heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

This is a tag

Another Tag 1

Yet another tag

Tag 1

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item heading

Descriptive text

List item

List item

List item

List item

List item

January

1

2

3

4

5

6

7

8

9

10

11

12

13

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

Alerts

Error Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Warning Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Success Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo.

Cards

Card heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.

Card heading 2

Suspendisse varius enim in eros elementum. Lorem ipsum dolor sit amet, consectetur adipiscing.

Card heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.

Card heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.

Text Lists Variations

Maecenas in ultricies ex.
Nunc quis eros commodo.
Tincidunt urna. Morbi dolor leo.

Maecenas in ultricies ex.
Nunc quis eros commodo.
Tincidunt urna. Morbi dolor leo.

Maecenas in ultricies ex.
Maecenas in ultricies ex.
Maecenas in ultricies ex.

What’s a Rich Text element?

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.

List item
List item

Static and dynamic content editing

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.