The atlas

143 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
• Visible links: The main places of the site, on show
• Menu button: All the places, behind one button
• Search box: Go straight to what you already know you want
• Breadcrumb: Where you are, and the way back up
• Pages: Move through a long list in steps
• Tabs: Switch views of one thing
• Action pair: A main action with a softer way in beside it
• Option picker: Pick size or colour with all options in view
• Buy controls: Quantity and the button that buys
• Form field: Label, field and help in one place
• One-line form: One field and one button
• Time picker: Choose day and time without phoning
• Heading group: Eyebrow, heading and a sentence, the top of most sections
• Picture with caption: A picture and what it shows
• Feature: One benefit: icon, name, a sentence
• Number: A large figure and what it counts
• Step: One numbered step of a process
• Question: A question that opens to its answer
• Byline: Who wrote this, and when
• Product card: A product you can compare in a grid
• Category tile: A door into part of the range
• Article card: A story you can decide to open
• Plan: One price level, with what is in it
• Price block: Price, with what you need to know beside it
• Filter group: Narrow a list down
• Basket line: One thing in the basket
• Rating summary: The average and how many reviews it rests on
• Testimonial: A named person who says it worked
• Review: One customer’s verdict with a score
• Logo row: Well-known names that use this
• Promise: A short promise that lowers the risk
• Person: A face, a name, what they do
• Contact line: Phone, mail and address, each one tap away
• Opening hours: When you can come or call
• Menu item: A dish or drink with its price
• Event row: What, when, and a way in
• Spec row: One property and its value
• Header with links: Say whose site this is and where you can go
• Shop header: Search, range and basket always at hand
• Bare header: Keep people on the one thing this page is for
• Announcement strip: One short message above everything
• Breadcrumb bar: Where you are in a deep site
• Full footer: The whole site’s map, contact and legal
• Slim footer: Just what must be there
• Sticky action bar: Keep the main action in reach on phones
• Split hero: What this is, who it is for, and the first action, next to a picture
• Centred hero: One big sentence and one action
• Image hero: Sell the feeling with one picture across the screen
• Search hero: Let people state what they want right away
• Video hero: Show it working, in motion
• Rotating hero: Show several messages in the same spot
• Booking hero: Start the reservation in the first screen
• Type-only hero: The sentence is the design
• Page title: Name this page and go straight to the content
• Gallery and buy box: See the product and buy it, both in the first screen
• Shop by category: Doors into the range
• Featured products: Show products worth a click right away
• Filtered list: Narrow a long list and compare what is left
• Goes well with: Offer the next thing at the right moment
• Offer with a reason: A deal, with a reason to act now
• Basket: What you are buying and what it costs in all
• Checkout: Take the order with as few fields as possible
• Comparison table: Set options beside one another so choosing gets easier
• Price levels: Show the options side by side, with one recommended
• Finder: Help people who do not know what they need
• Benefit grid: Three to six reasons, quick to scan
• Alternating rows: Take several benefits one at a time, each with its picture
• How it works: Take away the fear of the unknown in three steps
• Benefit with picture: Show what it does for you, not just what it is
• Numbers band: Three or four figures that prove the size or the result
• Explainer video: Let someone show how it works
• Specifications: The hard facts for those who want them
• Text with picture: A plain block of story and an image
• Timeline: Show how something grew, or what happens when
• Client logos: Well-known names that already chose this
• Testimonials: Named people who say it worked
• Customer reviews: Many verdicts, good and bad, with a summary to start from
• Proof by the buy button: Real people using it, right at the decision
• Case studies: What you did, for whom, and what came of it
• Evidence for claims: Back the big claim with data or a source
• Team: Show who you will be dealing with
• Promises and marks: Guarantees and memberships in one strip
• Questions and answers: Remove what is still holding someone back
• Article: Comfortable long reading
• Article with contents: Long pages you can jump around in
• Article overview: Let people pick something to read
• Gallery: Show the place or the work, big
• Portfolio grid: Let the work do the talking
• Menu: What can I eat or drink, and what does it cost
• Booking: Reserve without phoning
• Contact and map: How to reach us and how to get here
• Locations: Find the branch nearest you
• Agenda: What is on, and how to get in
• Final call to action: One last, clear ask
• Enquiry form: Let someone ask with as little effort as possible
• Newsletter: Keep in touch with people not ready yet
• Shop home page: Send each visitor into the right part of the range
• Product page: Get this product bought, or know why it is not for you
• Category page: Help people choose from many
• Basket and checkout: Finish the order without new reasons to leave
• Local business home page: Show what you do, where, and how to get in touch
• Service page: Explain one service and get the enquiry
• Software home page: Say what it does and start a trial or a demo
• Pricing page: Choose a level and start
• Campaign landing page: One visitor from one source, one single action
• About page: Show who is behind it, and why you can trust them
• Contact page: Reach you the way that suits them
• Article: Be read to the end, and be found
• Article overview: Find something worth reading
• Case study: Prove it with one real story
• Portfolio: Show the work, get asked
• Restaurant or venue home page: Answer “what, when, where” and take the booking
• Menu page: See what is served and at what price
• Booking page: Make the reservation, and nothing else
• Search and listings home: Go from “what am I looking for” to a list of matches
• Public information home: Get citizens or members to the task they came for
• Event page: What, when, where, and a ticket