The atlas

26 parts, from a single button to a whole page.

• Heading: Names what comes next, and gives the page its outline
• Body text: Carries the explanation
• Eyebrow: A small marker above a heading: a category or status
• Text link: Goes somewhere, without competing with the main action
• Quote: Someone else’s words
• Price: The amount, easy to find and compare
• Button: The main way to act
• Icon button: A compact action: menu, basket, search
• Image: Shows the thing
• Video: Shows something in motion
• Icon: A quick visual marker
• Portrait: A face beside a name
• Logo: Says whose this is
• Map: Shows where
• Text field: A short answer, with its label above it
• Dropdown: One choice out of a longer list
• Message box: A longer answer
• Checkbox: Yes or no, or several of a set
• Quantity: More or fewer
• Option button: A size or colour you can see without opening anything
• Chip: A filter you can turn on or off
• Badge: A short status: new, sale, in stock
• Stars: An average rating at a glance
• Rule: Separates without adding weight
• Slide dots: Says there is more to swipe through
• Table cell: One value in a comparison