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

Full component library

Buttons

Buttons have two sizes, small and large. We use the arrow to the right when it's linked to a related page, and arrow going top-right for links that go to other sections or open in a new tab.

Large

This is a button
This is a button
Buttoncc-largecc-primary
This is a button
This is a button
Buttoncc-largecc-black
This is a button
This is a button
Buttoncc-largecc-white

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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. Use the 2022 Nav symbol in actual projects.

Changelog

  • Pricing experiment currently activated in Products dropdown

Notification bar

Often used to callout an important announcement above the nav or on a specific page.

This is where the title of the notification goes.
Specific call-to-action

Footer CTA

Note the custom attribute and ID used on the Get started CTA button in order for this to work properly with the code that will change it to "View dashboard" button for logged in users.

Footer