Patterns

Patterns overview

A component is one building block. A pattern is a recipe that puts several of them together to solve a task. Read this page to know which one you are building, and where it is documented.

Overview

ECO documents two kinds of reusable parts. A component is one piece of interface with its own markup, states and sizes: a button, a checkbox, a single breadcrumb crumb. A pattern is a composed solution built from several components of the same kind or of different kinds, plus the layout rules that make them work together: how many, in which order, with which spacing and where on the page.

The difference is not size. A pattern can be small (a breadcrumb bar is one row) and a component can be large (a modal). The difference is what the part is made of and what it decides.

In one line each

Component: one building block that other things are made from.
Pattern: several building blocks, arranged to do one job on a page.

Component or pattern

The same family can hold both. Breadcrumb is the clearest example: the single crumb is a component, and the row of crumbs is a pattern made from it.

Component: Breadcrumb Base. One crumb, with its own states and sizes.

Pattern: Breadcrumb Bar. Several crumbs, the separators and the page spacing.

The differences

	Component	Pattern
What it is	One piece of interface that does one thing	A composed solution to one task on a page
Made of	Its own markup, its own CSS and tokens	Components of ECO, plus arrangement rules. It adds no colors, type or elements of its own
Decides	Look, states, sizes, behavior of the part itself	How many parts, in which order, the spacing between them, where on the page, what happens when it does not fit
States and sizes	Has them (enabled, hover, focus, Large, Small …)	Inherits them from its components. It has variants of arrangement, not of states
Figma	A component or a component set	A composition of components, often a frame or a component that contains other components
Reused by	Patterns and pages	Pages
Example	Button, Checkbox, Badge, Breadcrumb Base	Breadcrumb Bar, Hero banner, Splash card carousel
In the documentation	Its group under Components, in the left navigation	The Patterns group, after the component groups

How to tell which one

Ask in this order and take the first answer that fits.

Could you use the part inside another ECO part? If yes, it is a component. Other parts are built from it.
Is it a group of the same component, repeated, with a rule for the group? If yes, the group is a pattern and the single item is the component (a bar of crumbs and one crumb).
Does it combine different components to do one job? If yes, it is a pattern (a hero with a heading, text and buttons).
Does it exist only to explain the documentation? Then it is neither: it is a Documentation item, like the Docs table. It is not for the product.

If you are not sure

Start with the question of ownership: does the part own its look (a component), or does it only arrange parts that already own theirs (a pattern)? When it is still unclear, ask before you create the page. A part can be moved later, as the Breadcrumb Bar was; the file names stay and no link breaks.

How a pattern is built and documented

Built from ECO only

A pattern uses the components and tokens that already exist. It does not introduce a color, a font, a size or an element that no component or token has. If it needs one, that is a proposal for a new token or a new component first: ask before you add it.

The arrangement is what you document

The page of a pattern spends its words on what the components alone do not say:

Which components it uses, and the allowed number of them
The order and the spacing between them, as spacing tokens
Where it sits on the page, and what comes before and after it
What happens at each breakpoint and when the content does not fit (wrapping, stacking, truncating)
Accessibility of the whole: landmark, reading order, keyboard path

Same three pages as a component

A pattern has the same three pages as a component: Examples & Guidelines, Specifications and Code. The states of the parts are not repeated; the pattern page links to the component page that owns them. The Breadcrumb Bar links every crumb state to Breadcrumb Base.

Cards and navigation

A pattern has a card in the Patterns section of the Components overview and an item in the Patterns group of the navigation. A pattern that is still only an idea shows a disabled card marked “Soon”.

Patterns today

Pattern	Built from	Status
Breadcrumb Bar	Breadcrumb Base, the slash separator, the page spacing	Live, three pages
Hero banner	To be decided	Soon
Splash card carousel	To be decided	Soon

Docs table is also listed under Patterns, in the Documentation group, but it is a docs-only item and not a pattern in this sense: see Docs table.

Components overview. All components, grouped by family, and the Patterns section.
Breadcrumb. The guide that shows a component and a pattern in one family.
Getting help. Ask in Slack when a part is missing or you are not sure what it is.