UI

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

Buttons

Buttons share one base class, and you can combine style and size combo classes to create your different variations, as long as each of them exists as its own combo class.
For example: button cc-small cc-secondary

button
Button
Button
button
cc-secondary
Button
Button
button
cc-small
Button
Button
button
cc-small
cc-secondary
Button
Button

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
Submit
Submit
Submit
Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Components

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

CTA Components

Commonly used CTA components of this project.

[Component] Primary Button

This is the Primary Button component to use in slots.
NOTE: Use the class cc-small to make it small.

[Component] Secondary Button

This is the Secondary Button component to use in slots.
NOTE: Use the class cc-small to make it small. 

[Component] Link

Use the component to show/remove arrow icon.

Card Components

Commonly used shell components of this project.

[Component] Card Shell

Typical card shell.
NOTE: Use the class cc-white to change to the white variant.

[Component] Card Testimonial Full
Quotes icon

Duis aute irure dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Client Name
Client Position

This is the Testimonial Card Full.

[Component] Card Testimonial Simple

“ZEST named a sample vendor offering Preemptive Exposure Management”

This is the Testimonial Card Simple.

[Component] Card Stats Center
Over 62%
of incidents originate from backlogged risks that weren’t remediated in time.

This is the Stats Center Card.

[Component] Card Icon Top

Remediation pathways

Simulate all potential remediation options and identify the most effective actions, tailored to your environment.

This is the Icon Top Card.

[Component] Card Stats
90%
Existing attack paths mitigated using cloud-native guardrails

This is the Stats Card.

Form Components

Commonly used form components of this project.

[Forms] Form Book a Demo
Submit
Submit
By submitting the form you are agreeing to our Privacy Policy and Terms and Conditions.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

This is the main Contact form.

Navigation Components

Main Navigation components

[Navigation] Navbar

This is the main Navbar.
NOTE: It has Variants for DARK/LIGHT mode/pages.

[Navigation] Footer

This is the main Footer.

[Navigation] Top Banner

This is the Top Banner component.