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.

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 2021 Nav symbol in actual projects.

Test modal

Navigation 2022 (updated)

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.

Navigation 2022 (Marketplace updates)

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.

Notification bar

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

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