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
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 actions and 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.
Landmarks
Global Header BLOCK COMPONENT
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 BLOCK COMPONENT
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 COMPONENT
The Accordion component lets users show and hide sections of related content on a page.
Asset item COMPONENT
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 COMPONENT
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 COMPONENT
The Carousel is an interactive component that allows multiple pieces of content to occupy a single, defined space.
Disclosure COMPONENT
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 BLOCK COMPONENT
The Heading Block is a non interactive text layout designed to introduce sections of content. Headings support overlines, headline, and description.
Image + text BLOCK COMPONENT
The Image + Text component is a side-by-side layout component consisting of an image and text area.
Page card COMPONENT
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 BLOCK COMPONENT
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 COMPONENT
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 COMPONENT
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 BLOCK COMPONENT
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 COMPONENT
The Teaser component is designed to promote content on another page or site which is complementary to or related to the current page content.
Media
Video COMPONENT
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 COMPONENT
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 SNIPPET
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 SNIPPET
Page card listing SNIPPET
Picto item listing SNIPPET
Product card listing SNIPPET
Looking for something we don’t have yet?
You can request new components by filling in our CRF. The Design System Team will get in touch to discuss your needs.