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

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

Button - Outline

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

Button - Text

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

Card title

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 an example.
Add your project's components here