Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Alert as default

The alert uses the base class .alert.

Check it out! This is a default alert.

Alert with success intent

The success alert uses the modifier class .alert--success.

Check it out! This is a success alert.

Alert with danger intent

The danger alert uses the modifier class .alert--danger.

Check it out! This is a danger alert.

Avatar

Avatar is used to represent a single person or group of people.

Avatar as default

The Avatar uses the base class .alert. An image is nested inside the Avatar using the base class .avatar__image.

Avatar sizes

The default size of the image nested is medium. The class .avatar__image can be modified with the class .avatar__image--small to render a small Avatar.

Button

A button enables the user to trigger an action or event with a single input. Buttons are best used to enable a user to commit a change or complete steps in a task.

Button as default

The Button uses the base class .btn.

Button as primary

The primary Button uses the modifier class .btn--primary.

Button with leading icon

Button with only icon

Card

Chip

dollar sign

Color

Brand

--dragonfruit-400

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-900

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-400

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-400

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-400

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-400

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-400

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.

Functional

‍--text-on-light-darkest
--text-on-light-dark
--text-on-light-light
--text-on-light-lightest

Semantic

--cherry-100

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-900

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-400

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.
--dragonfruit-400

Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.

Lozenge

Status

Skeleton

Text Field

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Tag

A tag is used to display a category when filtering content.

Default tag
Blue tag
Orange tag
Green tag

Typography

Heading 1

Heading 2

Heading 3

Heading 4

This is a paragraph. Cupcake pie wafer macaroon dessert. Wafer sesame snaps jelly pudding wafer marshmallow ice creamy. Bonbon lollipop powder cotton candy fruitcake jujubes jelly beans cheesecake icing. 
Carrot cake cheesecake chocolate ice cream icing.

This is a quote.