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
Actions & Inputs
Breadcrumbs
| Status | ||||
|---|---|---|---|---|
|
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 | ||||
|---|---|---|---|---|
|
Buttons are clickable elements that allow users to perform an action.
CTA Block
| Status | ||||
|---|---|---|---|---|
|
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 actions and generally takes the form of a button or hyperlink.
Link
| Status | ||||
|---|---|---|---|---|
|
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.
Landmarks
Global Header
| Status | ||||
|---|---|---|---|---|
|
The Global Header is the key branding and navigational device that allows users to quickly understand where they are and the content that the site offers.
Footer
| Status | ||||
|---|---|---|---|---|
|
The Footer sits at the bottom of the page and delivers navigation paths to key content that aren’t delivered in the header. This is traditionally legal and policy content and social pathways.
Layouts
Accordion
| Status | ||||
|---|---|---|---|---|
|
The Accordion component lets users show and hide sections of related content on a page.
Asset item
| Status | ||||
|---|---|---|---|---|
|
The Asset Item component is a simple media layout used to used to emphasise key points within the context of a larger story. They can be grouped together to form a list (ordered or unordered) or used on their own.
Card
| Status | ||||
|---|---|---|---|---|
|
Cards are interactive components that group information into flexible containers. When used in a list they allow users to browse a collection of related items and show a summary of information they link to.
Carousel
| Status | ||||
|---|---|---|---|---|
|
The Carousel is an interactive component that allows multiple pieces of content to occupy a single, defined space.
Disclosure
| Status | ||||
|---|---|---|---|---|
|
The Disclosure component lets users show and hide sections of content on a page. Content within disclosures are generally considered supporting content that only a subset of users will find relevant.
Heading block
| Status | ||||
|---|---|---|---|---|
|
The Heading Block is a non interactive text layout designed to introduce sections of content. Headings support overlines, headline, and description.
Image + text
| Status | ||||
|---|---|---|---|---|
|
The Image + Text component is a side-by-side layout component consisting of an image and text area.
Page card
| Status | ||||
|---|---|---|---|---|
|
Cards group information into flexible containers to let users browse a collection of related items and actions. Page cards feature other pages of the website allowing users to navigate to related content.
Page header
| Status | ||||
|---|---|---|---|---|
|
Page headers hold the key introductory and visual content of the page. Every page has a page header, though in rare cases (such as the home page) the page header is visually hidden.
Picto item
| Status | ||||
|---|---|---|---|---|
|
The Picto Item component is a simple media layout used to used to emphasise key points within the context of a larger story. They can be grouped together to form a list (ordered or unordered) or used on their own.
Product card
| Status | ||||
|---|---|---|---|---|
|
The product card component is a sibling of the Card component. Product cards are designed to be used for products and allow you to feature a set of attributes that summarise the product. Product cards link to a product’s PDP where the user can obtain more information.
Product header
| Status | ||||
|---|---|---|---|---|
|
The Product Header serves as the entry point for a PDP and allows the user to configure a set of attributes like quantity and product variant. Product headers also contains the primary call to action for a PDP, adding to basket or linking through to approved retailers.
Teaser
| Status | ||||
|---|---|---|---|---|
|
The Teaser component is designed to promote content on another page or sitewhich is complementary to or related to the current page content.
Media
Video
| Status | ||||
|---|---|---|---|---|
|
The Video component is an advanced media component that provides the functionality to play back and interact with digital video data from different media sources.
Text
Typography
| Status | ||||
|---|---|---|---|---|
|
The Typography component is a simple text component that makes it easy to apply a default set of font weights and sizes to your website. Typography helps to create hierarchies, organise information, and guide users through pages.
Snippets
Product overview
| Status | ||||
|---|---|---|---|---|
|
The Product Overview is a snippet (not a true component) and is designed to follow the Product Header with introductory content in a larger font size.
To be added:
Asset item listing
| Status | ||||
|---|---|---|---|---|
|
Page card listing
| Status | ||||
|---|---|---|---|---|
|
Picto item listing
| Status | ||||
|---|---|---|---|---|
|
Product card listing
| Status | ||||
|---|---|---|---|---|
|
| Panel | ||
|---|---|---|
| ||
Looking for something we don’t have yet? |