Components
A sticker sheet of commonly used components with prebuilt interactions and accessibility standards. Component variations should use a combo class with the prefix of cc-.
Buttons
We use the arrow to the right when it's linked to a related page, and arrow going top-right for links that are open in a new tab. You can copy and paste these →↗️
Forms
We use a combination of Marketo forms, as well as our own Form element. There is styling and restructuring that needs to be set, in order for the from to look on brand.
We also have subscription forms across our .com, that should look like the case presented below.
Divider
Dividers are 1px tall, full-width divs, that can be colored with our Background Color classes (eg: u-bg-black to color it black).
Pill / Tag
These are used usually as eyebrows, but sometimes are placed in other parts, as tags. There is a main pill class and two sizes can be achieved by using a caption inside of it.
Background and text colors can be edited with global classes.
Cards
Cards are used in some pages to display information. All cards have a 1px outline, as well as a 4px border radius.
The class cc-card-link can be added for all cases where we are using the whole card as a clickable link (with a u-link-overlay element nested inside).
Whenever we need these cards over a black background, we can add the class cc-dark.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Break silos
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Cards are used in some pages to display information. All cards have a 1px outline, as well as a 4px border radius.
The class cc-card-link can be added for all cases where we are using the whole card as a clickable link (with a u-link-overlay element nested inside).
Whenever we need these cards over a black background, we can add the class cc-dark.
Rich-text Elements
The class rte is added to the rich-text elements, for the nested styling to work correctly. There is also custom code in the Global Designer Code component that addresses first childs for heading spacing.
Heading 1
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
- The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
- A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Heading 2
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Heading 3
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Heading 4
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Heading 5
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Heading 6
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Navigation
When placed as the first element inside the body the "Skip to main content" button will be hidden as intended.
The visual below uses a utility u-position-relative in order to display the nav on this page. This lives as a component in all of our projects.
The nav should be turned into a component, so that we can set up the "Visibility" toggle for the landing page nav.
In some cases, like our landing pages, or conversion-focused pages, we might want to use a simpler nav, that only has the three main call-to-actions. We can do that by toggling visibility from the "Settings" panel.
Whenever we want to use a dark navigation, we can achieve it by adding "dark" in the "Style" field, under the "Settings" panel. Custom CSS will make it dark as well as handling hover states.
Notification bar
Often used to callout an important announcement above the nav.
Footer CTA
Note the custom attribute "data-signup-cta=1" and ID used on the call-to-action button in order for this to work properly with the code that will change it to "View dashboard" button for logged-in users.
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
Footer
