Layout & Structure
Hero Section
The big, bold area at the very top that grabs attention first.
Layout & Structure
Footer
The strip at the very bottom with links, contact info and legal text.
Layout & Structure
Two-Column Layout
Content arranged side-by-side in two (or more) vertical columns.
Layout & Structure
Sidebar
A vertical strip beside the main content holding links or extras.
Layout & Structure
Section / Container
A self-contained horizontal block that groups related content together.
Layout & Structure
Card
A small, self-contained box grouping an image, title and text.
Layout & Structure
Grid
Items arranged in neat, repeating rows and columns.
Navigation
Header / Nav Bar
The strip across the top holding the logo and main menu links.
Navigation
Hamburger Menu
The three-line icon that opens a hidden menu, mainly on phones.
Navigation
Breadcrumbs
A row of small links showing where you are: Home › Shop › Shoes.
Navigation
Tabs
Clickable labels that swap the content shown below them.
Navigation
Pagination
Numbered controls that split a long list across multiple pages.
Content & Media
Heading
The big, bold title that announces what a section is about.
Content & Media
Subheading
A smaller line of text under a heading that adds detail.
Content & Media
Body Text
The regular readable text that makes up the bulk of the writing.
Content & Media
Gallery
A collection of images shown together, often clickable to enlarge.
Content & Media
Carousel / Slider
A single slot that rotates through several slides, one at a time.
Content & Media
Banner
A thin strip, often at the very top, with a message or promo.
Conversion & Trust
Call to Action (CTA)
The one button or link nudging visitors to take a key action.
Conversion & Trust
Testimonials
Real quotes from happy customers vouching for you.
Conversion & Trust
Social Proof
Any evidence that others already trust or use you.
Conversion & Trust
Logo Cloud
A row of recognisable company logos to borrow their credibility.
Conversion & Trust
Pricing Table
Side-by-side plans comparing prices and features.
Conversion & Trust
Newsletter Signup
A small form inviting visitors to hand over their email.
Interactive & UI
Button
A clickable shape that performs an action when pressed.
Interactive & UI
Modal / Dialog
A box that opens on top of the page and dims everything behind it.
Interactive & UI
Popover
A small floating panel that opens next to whatever you clicked.
Interactive & UI
Tooltip
A tiny label that appears when you hover over something.
Interactive & UI
Dropdown Menu
A control that unfolds a list of choices when clicked.
Interactive & UI
Toggle / Switch
A little sliding switch that flips a setting on or off.
Interactive & UI
Toast / Notification
A brief pop-up message confirming something just happened.
Interactive & UI
Form / Input Field
The boxes people type into, plus the form that collects them.
Interactive & UI
Loader / Spinner
An animation that tells you the page is busy working.
Interactive & UI
Accordion
Stacked rows that expand to reveal hidden text when clicked.
E-commerce & Retail
Product Detail Page (PDP)
The dedicated page for one product, with photos, price and buy button.
E-commerce & Retail
Plan Selector
Cards or buttons for choosing which plan, size or tier you want.
E-commerce & Retail
Subscribe & Save
An option to get a product delivered repeatedly for a discount.
E-commerce & Retail
Build a Box
A flow where you pick several items to fill a custom box or bundle.
E-commerce & Retail
Variant Selector
Chips and buttons for choosing a product's size, colour or style.
E-commerce & Retail
Quantity Stepper
A − / + control for choosing how many of an item you want.
E-commerce & Retail
Add to Cart
The button that drops an item in your cart without checking out yet.
E-commerce & Retail
Mini-Cart
A panel that slides in showing what's in your cart so far.
E-commerce & Retail
Checkout
The final steps where you enter shipping and payment to pay.
E-commerce & Retail
Order Summary
The breakdown of items, shipping, tax and the final total.
E-commerce & Retail
Product Filters
Checkboxes and sliders that narrow a product list by size, price, etc.
E-commerce & Retail
Reviews & Ratings
Customer star scores and written reviews of a specific product.
E-commerce & Retail
Upsell & Cross-sell
Suggestions for related or upgraded products to add to your order.
E-commerce & Retail
Stock & Urgency
Cues like “Only 3 left” or a timer that encourage a faster decision.
E-commerce & Retail
Promo Code Field
A box to type a discount code and apply it to your order.
E-commerce & Retail
Sticky Buy Bar
A bar that stays on screen with the price and buy button as you scroll.
Marketing & Growth
Scrolling Banner
A strip of text or logos that slides sideways across the screen on a loop.
Marketing & Growth
Countdown Timer
A ticking clock counting down to a deadline, like a sale or launch.
Marketing & Growth
Email Capture Popup
A pop-up offering a discount or freebie in exchange for an email.
Marketing & Growth
Exit-Intent Popup
A last-chance offer that appears just as you're about to leave.
Marketing & Growth
Newsletter Section
A full-width part of the page inviting people to subscribe by email.
Marketing & Growth
Sales Notification Pop
A small pop-up showing that other people are buying right now.
Marketing & Growth
Spin-to-Win Popup
A pop-up game (spin a wheel for a prize) in exchange for your email.
Marketing & Growth
Cookie Consent Banner
The bar asking permission to use cookies and tracking.
Marketing & Growth
Sticky Promo Bar
A slim bar pinned to the top with one offer that stays as you scroll.