Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
Components in Chameleon fall into three categories:
FOUNDATIONS
These components handle space and layout.
COMPONENTS
Components are the most common component and represent basic building blocks. They can be reused in many places.
BLOCK COMPONENTS
Block components deliver chunks of UI dedicated to specific use cases.
SNIPPETS
You’ll also find snippets. These are not components but are ready to use blocks of code that form common patterns and save you the time of creating them from scratch.
All components
Foundational components
Container FOUNDATION
A very brief description
Fluid grid FOUNDATION
A very brief description
Grid FOUNDATION
A very brief description
Actions & Inputs
Breadcrumbs COMPONENT
Breadcrumbs are a secondary navigation component used to show a user's location in a hierarchical structure. They communicate the path a user has taken to the current page and offer a quick way to navigate back up the path.
CTA Block BLOCK COMPONENT
The Call to Action block is used to draw a users attention to an action they can perform or link to more relevant information. CTA’s are typically written as commands or action generally takes the form of a button or hyperlink.
Link COMPONENT
A Link is a basic navigational element that allows users to navigate through your website or application. They may appear on their own, within a sentence or paragraph, or directly following content.
Layouts
Media
Text
Snippets
Insert snippets here