What’s this?

Why’s this powerful?

Introducing “pieces”

A jigsaw piece that symbolises either a Component, an Add-on or a State is called a Piece

image.png

image.png

image.png

What are Components?

They’re the core building blocks – self-contained units of functionality

Eg. Hero text, Data lists, Carousel etc.

What are components - Pieces - Spaced.png

What are components.png

image.png

image.png

What are Add-ons?

They’re modifiers that enhance a Component by adding optional functionality to it

Eg. Sliders, Chips etc.

What are add-ons - Pieces - Spaced.png

What are add-ons.png

What are States?

They’re variants of a Component

Eg. Small size, promoted state etc.

They’re the different moods or appearances a component can have

What are states - 2 - Pieces - Spaced.png

What are states - 2.png

Rules to stack Pieces

Rules to stack Components

can be stacked with or above or below them. They can also have stacked horizontally.

Components can be stacked with Add-ons or Components above or below them. They can also have States stacked horizontally.

Rules to stack Add-ons

can be stacked with or above or below them. They can also have stacked horizontally.

Add-ons can be stacked with Components or Add-ons above or below them. They can also have States stacked horizontally.