Component overview - Storybook
- Nick Harris
Accordion
The Accordion component lets users show and hide sections of related content on a page.
Read this component’s documentation
Asset item
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.
Read this component’s documentation
Breadcrumbs
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.
Read this component’s documentation
Button
Buttons are clickable elements that allow users to perform an action.
Read this component’s documentation
Card
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.
Read this component’s documentation
Carousel
The Carousel is an interactive component that allows multiple pieces of content to occupy a single, defined space.
Read this component’s documentation
Container
The Container component is a basic layout component that is designed to wrap content and provide appropriate padding.
Read this component’s documentation
CTA Block
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.
Read this component’s documentation
Disclosure
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.
Read this component’s documentation
Fluid grid
Read this component’s documentation
Footer
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.
Read this component’s documentation
Global Header
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.
Read this component’s documentation
Grid
The Grid component provides basic layout flexibility allowing a variety of layouts to be achieved.
Read this component’s documentation
Heading block
The Heading Block is a non interactive text layout designed to introduce sections of content. Headings support overlines, headline, and description.
Read this component’s documentation
Icon
The Icon component acts as a container for the icon set available in the default design system theme.
Read this component’s documentation
Image
The Image component is a container for image based media.
Read this component’s documentation
Image + Text
The Image + Text component is a side-by-side layout component consisting of an image and text area.
Read this component’s documentation
Image block
The Image Block is a container for the Image component that allows you to pass through a caption. This component will render your image and caption to meet accessibility best practices.
Read this component’s documentation
Link
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.
Read this component’s documentation
Page Block
Read this component’s documentation
Page card
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.
Read this component’s documentation
Page header
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.
Read this component’s documentation
Picto item
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.
Read this component’s documentation
Product card
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.
Read this component’s documentation
Product header
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.
Read this component’s documentation
Product Overview
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.
Ready this component’s documentation
Section
Read this component’s documentation
Spacer
The Spacer is a simple invisible utility component that allows you to space out content when creating your own components or block. Spacer’s sizes are tied to css variables which can be overridden changing the spacing across the whole site.
Read this component’s documentation
Teaser
The Teaser Component is designed to promote content on another page or site which is complementary to or related to the current page content.
Read this component’s documentation
Typography
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.
Read this component’s documentation
Video
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.
Read this component’s documentation