UI

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

DOM element

The DOM element is a flexible element that can be turned into anything and can be used in components to allow you to override classes and its HTML tag, or to overcome some limitations of Webflow's elements. Add into your page, then Unlink Instance to start modifying it.

DOM Element
Select the DOM element on the right:

Spacer

The Spacer element is a custom div element with a style attribute so that you add custom spacing without creating a new class. Useful when you have a specific amount of space only once and would prefer not to make a new class. Avoid relying on this too much.

Custom Spacer
Select the component on the right:

Buttons

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.

button

buttons have the text twice for the hover effect. Components make this easier.

button
cc-outline
cta-wrapper
>
button

The CTA wrapper aligns the button and adds top margin.

Button - Primary
Button - Primary sm
Button - Primary xs

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

Button - Secondary
Button - Secondary sm
Button - Secondary xs

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

outline-card
+
outline-card_gradient

A typical card

the outline-card class is used as a wrapper, while the inner card is the actual card and can be completely custom.

Inside outline-card, place an empty div with the gradient class for the hover effect. Next to that div you can put a new div for the actual class. Use inner cards radius variable for the radius, make it relative to be above the gradient, and set height to 100%

nav_menu
cc-open
About
Work
Resources

This only exists here to avoid deleting the "cc-open" class when cleaning unused styles

pro-tip
Pro tip: Start a line like this in a blog article to turn it into a highlighted element

Used for pro-tips in blog articles