UI Elements
Global Components
Card Components
Form Components

UI Elements

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

Text

There are 2 basic text elements, Heading and Paragraph. Use these component to manage fast your texts in the project.

Heading

Heading text

Paragraph

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.

Image

Use this comonent to quickly get images in your project.

Image

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

Text Buttons

Button
Button Text
Primary LG Solid
Button Text
Primary MD Solid
Button Text
Primary SM Solid
Button Text
Primary LG Solid Star
Button Text
Primary MD Solid Star
Button Text
Primary SM Solid Star
Button Text
Primary LG Outlined
Button Text
Primary MD Outlined
Button Text
Primary SM Outlined
Button Text
Secondary LG Solid
Button Text
Secondary MD Solid
Button Text
Secondary SM Solid
Button Text
Secondary LG Outlined
Button Text
Secondary MD Outlined
Button Text
Secondary SM Outlined
Button Text
Tertiary LG Solid
Button Text
Tertiary MD Solid
Button Text
Tertiary SM Solid
Button Text
Tertiary LG Solid Lime
Button Text
Tertiary MD Solid Lime
Button Text
Tertiary SM Solid Lime
Button Text
Tertiary LG Outlined
Button Text
Tertiary MD Outlined
Button Text
Tertiary SM Outlined
Button Text

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.

icon
cc-sm
icon
icon
cc-lg

Tags

Tags are used in Blog Posts to determine the category, as filter markers to give useful information to the user, and much more. There are several types and here we have the 2 more commonly used.

[UI] Tag
Tag text
tag
tag name
[UI] Tag X
tag name
tag-x
tag name

Card Components

First this is the structure of a normal card with the general classes that we will modify depending on the card we are developing.

card
card_header
card_main
card_footer

Cards

And here are the different variants of cards in the project.

[CARD] Top Image
Card Title

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

Button Text
[CARD] Testimonial

"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."

Author Name
Job Position

Form Components

The first thing is to set the style of the form fileds and elements.

form_wrapper
form
form_group
input_label
input
input
cc-select
input
cc-textarea
form_group
cc-submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Forms

And here are the different variants of cards in the project.