UI

UI elements are standalone components made up of one or more classes and elements.

Buttons

Buttons share one base class, and you can combine style and size combo classes to create your different variations, as long as each of them exists as its own combo class.
For example: button cc-small cc-outline

button
Learn more
button
cc-small
Learn more
button
cc-outline
Learn more
button
cc-small
cc-outline
Learn more
cta-wrapper
>
button

The CTA wrapper aligns the button and adds top margin.

Button

Use the component to show/remove the icon or replace it.

Link

Use the component to show/remove the icon or replace it.

Icons

These are useful wether you are adding icons as images or as SVGs inside embeds. When adding as HTML embed, change the SVG's height and width properties to 100%, and the fill/stroke to currentColor (if you needed)

icon
cc-sm

width: 1rem (16px)
height: same

icon

width: 1.5rem (24px)
height: same

icon
cc-lg

width: 2rem (32px)
height: same

Form

Form elements. For the label you can use text classes or create a new one.

form-wrapper
form
form_group
input-field
Label
input
input
cc-select
input
cc-text-area
checkbox-field
checkbox
radio-field
radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Components

Commonly used components of this project.

Card

Typical card shell