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. We recommend always using the class to make separating the tag from the style a habit. Avoid combo classes when possible.

Heading 1
h1

HTML H1

Heading 1

Heading 2
h2

HTML H2

Heading 2

Heading 3
h3

HTML Heading 3

Heading 3

Heading 4
h4

HTML Heading 4

Heading 4

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.

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.

text-sm

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

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

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

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.

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. cursus id rutrum lorem im

Rich text

Other HTML tag defaults

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.

Link inside the rich text element

Other

Other HTML tag defaults

Links
Unordered Lists
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Ordered Lists
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. 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

Secundary

Text

Text Muted

Action

Sections

Use the section class with its combo classes for all your sections to maintain consistency and avoid creating a new class for every new section. There are of course exceptions, but whenever possible, think of reusable ways to create elements.
These combo classes can be stacked.
If you find yourself stacking more than 3 classes, you should create a new combo class for that case.
You could also add more variations (i.e. cc-top-xl, cc-cta, ...)

section

Heading

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.

section
cc-top-0

Heading

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.

section
cc-bottom-0

Heading

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.

section
cc-top-sm

Heading

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.

section
cc-bottom-sm

Heading

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.

section
cc-top-lg

Heading

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.

section
cc-bottom-lg

Heading

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.

Containers

Sections usually need a container to keep layouts from becoming too wide. Containers also control the horizontal padding in order to maintain the same spacing throughout your project.
A default container acts as "12 columns", as it takes up the full design width (usually 1440px). That's why combo class names mention columns.

container

Heading

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.

Layout

Layouts will usually have more unique names depending on the design. In a lot of cases, there are some basic layout options that can act as building blocks.

grid-cols

Heading

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

mule pinata
grid-cols
cc-3col
mule pinata

Lorem ipsum dolor

mule pinata

Lorem ipsum dolor

mule pinata

Lorem ipsum dolor

image
mule pinata
mule pinata
mule pinata

image is set to cover by default and has combo classes to control its aspect ratio or set it to contain. You can add more or modify them. Default:
cc-1x1 cc-4x3 cc-16x9

image
cc-contain
mule pinata

Text Color

These can be added to any element, although it's recommended to place it as high as possible according to your needs.
For example, if you want a two text blocks to have this color and they are sibling elements, you could apply it to their parent element.
If you have a lot of colored headings, it is a good idea to apply it on the element instead of the parent or in a span, to make it easier to access next time.

u-text-main

Lorem ipsum dolor sit amet.

u-text-tint

Lorem ipsum dolor sit amet.

u-text-muted

Lorem ipsum dolor sit amet.

u-text-white

Lorem ipsum dolor sit amet.

u-text-error

Lorem ipsum dolor sit amet.

u-text-primary

Lorem ipsum dolor sit amet.

Font

Font utilities change the font and weight of an element.
You could replace sans & serif with other variations
(i.e. main & display).

u-font-regular

Lorem ipsum dolor sit amet.

u-font-medium

Lorem ipsum dolor sit amet.

u-font-manual

Lorem ipsum dolor sit amet.

u-font-manual-bold

Lorem ipsum dolor sit amet.

Alignment

Use to align text in layouts, or individual text elements.

u-text-left

Lorem ipsum dolor sit amet.

u-text-center

Lorem ipsum dolor sit amet.

u-text-right

Lorem ipsum dolor sit amet.

Other

Other decorations and styles.

u-text-underline
Lorem ipsum dolor sit amet.
u-text-strike
Lorem ipsum dolor sit amet.
u-text-uppercase
Lorem ipsum dolor sit amet.
u-text-lowercase
Lorem ipsum dolor sit amet.
u-text-capitalize
Lorem ipsum dolor sit amet.
u-text-no-wrap
Lorem ipsum dolor sit amet

Background.

Background modifiers also have a text property added to them, to avoid having to override all the text elements inside them.
You could use "u-bg-dark" to apply dark mode too, instead of the theme attribute.

u-bg-dark
This one is special.
u-bg-lightblue
Lorem ipsum dolor sit amet.
u-bg-white
Lorem ipsum dolor sit amet.

Other.

Other useful utilities.

u-hide

hidden

u-hide_tablet

it's hidden on tablet

u-hide_landscape

it's hidden on mobile landscape

u-hide_mobile

it's hidden on mobile portrait

u-align-center

margin-left: auto;
margin-right: auto;

u-width-full

width: 100%;

u-height-full

height: 100%;

u-height-screen

height: 100vh;