Base

We use text elements and classes only for sizing, not styling. Reason, this way we can create the component and different variants to maintain the Component Base approach of the framework.
‍
Usually these elements are wrapped with a title-wrapper or a text-wrapper to have access to frequently used modifiers as combo classes when used outside of the component. But we recommend using the components and play with the variants to achieve the desired look.

Headings

HTML tags have matching classes for their styles. Heading levels should follow the correct hierarchy in the HTML, but styles can be overriden with classes.

Note:
We recommend always using the class to make separating the tag from the style a habit. Also, avoid using combo classes when possible.

Heading 1

text-h1

HTML H1

Heading 1

Heading 2

text-h2

HTML H2

Heading 2

Heading 3

text-h3

HTML Heading 3

Heading 3

Heading 4

text-h4

HTML Heading 4

Heading 4

Heading 5

text-h5

HTML Heading 5

Heading 5

Heading 6

text-h6

HTML Heading 6

Heading 6

Text

Text classes are strictly used for font-size and line-height. If you need bigger sizes, you should use heading classes. Any other styling usually comes from a parent element. Sometimes you need to override the parent element's color or font-weight, in which case you can use combo classes or spans.

text-xl

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.

text-lg

text-md

(Base)

text-sm

text-xs

paragraph

Rich text

Other HTML tag defaults

Note:
In the global CSS we are removing the top margin from the first element and the bottom margin from the last element.

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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

Lists:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote: 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

Link inside the rich text element

1// Buttons animation
2const buttons = [...document.querySelectorAll('.button')];
3buttons.forEach(button => {
4	button.onmouseenter = () => button.classList.add('cc-hover')
5	button.onmouseleave = () => button.classList.remove('cc-hover')
6})

Other

Other HTML tag defaults

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

Links

Link

Note:
‍Avoid setting a font-size to links. Instead, add a link block and then add a text block to it.

Unordered Lists

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Ordered Lists

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Colors

This area is not to set specific classes, but rather a checkpoint to add your project's colors to the global swatches and describe how they're used.

Surface

Used as the main background color.

Surface Secondary

Used as the secondary background color.

Heading

Used for the headings.

Subheading

Used for the subheadings.

Text

Base text color of the project.

Text White

White variant text color of the project.

Text Muted

Slightly softer text color.