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:
| Status | ||
|---|---|---|
|
| Panel | ||
|---|---|---|
| ||
These components handle space and layout. |
| Status | ||||
|---|---|---|---|---|
|
| Panel | ||
|---|---|---|
| ||
Components are the most common component and represent basic building blocks. They can be reused in many places. |
| Status | ||||
|---|---|---|---|---|
|
| Panel | ||
|---|---|---|
| ||
Block components deliver chunks of UI dedicated to specific use cases. |
| Status | ||||
|---|---|---|---|---|
|
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
| Panel | ||||
|---|---|---|---|---|
| ||||
A very brief description |
| Panel | ||||
|---|---|---|---|---|
| ||||
Fluid grid
A very brief description |
| Panel | ||||
|---|---|---|---|---|
| ||||
Grid
A very brief description |
| Panel | ||||
|---|---|---|---|---|
| ||||
Section
A very brief description |
| Panel | ||||
|---|---|---|---|---|
| ||||
Spacer
A very brief description |
Actions & Inputs
Breadcrumbs
| Status | ||||
|---|---|---|---|---|
|
A very brief description 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.
Button
| Status | ||||
|---|---|---|---|---|
|
A very brief description Buttons are clickable elements that allow users to perform an action.
CTA Block
| Status | ||||
|---|---|---|---|---|
|
A very brief description 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
| Status | ||||
|---|---|---|---|---|
|
A very brief description 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.
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
Breadcrumbs
|
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
Button
|
Landmarks
Layouts
Media
Text
Snippets
| Warning |
|---|
Insert snippets here |
Looking for something else?
| Child pages (Children Display) |
|---|