Components

The Accordion list module (M120): a section title beside or above a list of expandable rows — FAQs, steps, office lists. Each row is a native <details> with a title, an optional step counter or badge, and a body of text with an optional CTA group. Three layouts: stacked, side by side, and side by side with a narrow title column.

A user, company or AI representation — photo, initials or icon, with optional status, grouping and label.

A small label for status, category or count — pill or square, tinted, outlined or modern, with optional icon, dot, avatar or dismiss button.

The primary call to action — seven hierarchies from solid brand to plain link, four sizes, optional leading/trailing icon, and a branch variant for branded dark surfaces.

The row under a carousel: a status line (count, caption) on the left and previous / next arrow buttons on the right. Two sizes, optional top border.

The Details module — the "Case Details" header of a customer case: a section title beside a grid of labelled facts (location, customer, sector, style, age group, capacity). A value is text, a row of Tags or Badges, or a list of words. Default, Branch (brand background) and panel (grey box) sections. Built from the Tag and Badge atoms.

Input fields allow users to enter text into a UI. They typically appear in forms and dialogs. Input fields on mobiles should be at least 16px text size to avoid auto zoom on mobile browsers.

The Media module (M70): a page section that presents photos or video — a single visual at three widths, a pair, two grids, and two carousels — with an optional caption. Built from the Visual atom and the Carousel footer.

The Quote module (M90): a customer quote as a page section, attributed to a person — left-aligned with the author aside, or centred with the author stacked underneath. Only the quote and the name are required; photo, title, link and company logo are optional. Built from the Visual and Button atoms.

The Relevant content module (M89): a section title, an optional filter row and a set of content cards — as a carousel (regular or wide), a list, a two- or three-column grid, or a three-column asymmetric grid — with a footer that loads more. Every grid stacks to one column on mobile.

An interactive chip for filters and selections — a bordered button or plain text, with optional checkbox, dot, flag, avatar, count and remove button.

An on/off switch for a single setting that applies immediately — a styled checkbox with an optional label and supporting text, in two sizes and a slim variant.

An image or video slot that keeps a fixed aspect ratio — nine ratios, optional rounded corners, a darkening hover overlay with a fullscreen action, and a centred play button for video.