Search
Clear
Feature
Accordion
Sections that expand on click to reveal additional content.
Anchor link
Clickable elements that scroll the page to a specific point.
Banner
Full-width promotional sections, often positioned by the main navigation.
CTA
Elements styled as buttons that are used to guide and direct users towards a desired action.
Calculator
Functionality to calculate or project the effect of changing variables e.g. loan repayment costs over time.
Carousel
Interactive sections that switch between different content or sections that scroll horizontally.
Cart/basket summary
A section to quickly summarise cart contents, often appearing as a modal.
Category shortcut
Clickable elements to quickly guide users to categories or sub-categories.
Chat
Functionality that allows for easy communication between users and customer support.
Colour options
Swatch elements to display and allow selection of colour options for products.
Compare
Functionality that allows for easy comparison of numerous products.
Configurator
Functionality that allows users to customise or configure different options for a product.
Content
Copy, imagery, video, graphics, and other visuals used to communicate with users.
Country/language selection
Allows users to switch between different regions and languages.
Cross-sell/up-sell
A section to promote additional products beyond what the user is currently looking at.
Data visualisation
Graphics such as charts that are used to visualise data and aid comprehension.
Date picker/calendar
Allows users to easily pick and book a date for a service, e.g. for deliveries or appointments.
Delivery
Content clarifying delivery details and functionality allowing users to choose a preferred method.
Dropdown
Clickable elements that expand to show multiple input options, e.g. delivery country selection.
Editorial
Content presented in a less conventional and more visually engaging and graphic style.
Error/confirmation prompt
Messaging to communicate the failure or success of a user action, e.g. incorrect passwords.
FAQ/help
Frequently asked questions and other supporting content to assist users with questions.
Featured products
Sections, content, or elements specifically used to promote certain products.
Filters/sort by
Allows users to specify a criteria to help them find products they're interested in.
Form
A combination of input fields to collect user data or feedback.
Hero
A large section, above the fold, used as a promotional space or greeting space for users.
Horizontal layout
Elements or sections displayed in a row structure.
Imagery
Photographic or graphic content, e.g. product images, annotated diagrams, gifs in PLPs.
Interactions
Animations or state changes that happen when a user clicks or hovers on an element.
Login/sign up
Functionality or content to support users logging-in or creating new accounts, e.g. password recovery.
Modal/pop-up
A section that appears overlapping the page, e.g. a newsletter sign-up prompt, a cart summary.
Navigation/menu
A global section that allows users to reach other pages of the website, e.g. hamburger menus.
Newsletter
A section prompting users to sign up to recurring newsletter.
Notification
An element containing copy that draws attention, alerts, and notifies users.
Payment
Content regarding payment or functionality to support the selection and use of different payment methods.
Personalisation
Content unique to different users or functionality that allows users to customise their own experience.
Product availability
Functionality and content helping users stay informed about the availability of products.
Progress/steps
Visual indicators of the current stage in a sequence of stages, e.g. checkout steps.
Promotion
Content or functionality used to support the promotion of particular deals or products.
Quantity selector
Allows users to select and edit the quantity of a product.
Quick add
Allows users to add a product to the cart without visiting the product details page.
Quickview
Allows users to see more information about a product without viewing the product details page.
Reassurance
Content used to reduce user concerns when making a decision, e.g. free delivery, free returns.
Reviews/social proof
Content used to promote trust in a product, e.g. Trustpilot review scores, user generated content.
Scroll indicator
An element used to prompt users to scroll down a page, e.g. an arrow, additional copy.
Search
Allows users to find content by entering keywords into a field.
Size/dimensions
Functionality or content to support users in picking the appropriate size of product.
Sticky
A property assigned to an element to fix it in place in reference to the viewport.
Store/pickup locator
Functionality that allows users to find their nearest store or product pickup location.
Structure/hierarchy
Refers to the organisation, arrangement, and relationship of the sections and elements of a page.
Tabs
Clickable elements that switch between different content sections.
Toggle
Clickable switches that alternative between two values.
Tooltip
Explanatory content that appears when hovering on an element.
Tutorial
Functionality or content to support the user onboarding or to teach users.
Video
Recorded video content embedded into pages.
Virtual try-on
Functionality that allows users to see how products look on themselves, e.g glasses try on.
Wishlist/save
Allows users to add items to a list and keep track of products they're interested in.
Page
Zara
CTA to the size guide
Desktop site
Product details
 page
Fashion
Modal/pop-up
Size/dimensions
New
Winc
Recommended products in the cart summary
Desktop site
Global element
 page
Food/grocery
Cart/basket summary
Cross-sell/up-sell
Modal/pop-up
New
Winc
Visually select subscription contents
Desktop site
Subscription
 page
Food/grocery
Carousel
Configurator
Quantity selector
New
West Elm
Ability to clear configuration options
Desktop site
Product details
 page
Home/DIY
Colour options
Configurator
Size/dimensions
New
Wayfair
Add-ons/cross-sells within cart preview
Mobile site
Cart/basket
 page
Home/DIY
Cross-sell/up-sell
Quick add
New
Wayfair
Categories above the fold in the hero
Desktop site
Homepage
 page
Home/DIY
Category shortcut
Hero
Navigation/menu
New
Warby Parker
Find your perfect glasses flow
Mobile site
Search
 page
Accessories
Colour options
Filters/sort by
Progress/steps
New
Warby Parker
An expand to display more information
Mobile site
Product details
 page
Accessories
Content
New
Walmart
Sub-categories navigation
Desktop site
Product listing
 page
Retail
Category shortcut
Navigation/menu
New
Volkswagen
Clear signposting of progress
Desktop site
Product details
 page
Automotive
Personalisation
Progress/steps
New
Victoria Secret
A sticky CTA to access current promotions
Desktop site
Homepage
 page
Fashion
CTA
Promotion
Sticky
New
Uterqüe
Gift wrapping option
Desktop site
Cart/basket
 page
Fashion
Modal/pop-up
New
Usabilla
Promotional banner above the navigation
Desktop site
Homepage
 page
Services
Banner
Promotion
Sticky
New
Urban Outfitters
Empty cart shows products to get started
Mobile site
Cart/basket
 page
Fashion
Featured products
New
Urban Outfitters
Remove all out of stock items in 1 click
Mobile site
Cart/basket
 page
Fashion
Product availability
New
Urban Outfitters
Sticky order summary and CTA
Desktop site
Cart/basket
 page
Fashion
Cart/basket summary
Sticky
New
Urban Outfitters
The next row is shown above the fold
Mobile site
Product listing
 page
Fashion
Structure/hierarchy
New
Urban Outfitters
Pushing products with custom labels
Mobile site
Product listing
 page
Fashion
Imagery
Featured products
New
Urban Outfitters
A dropdown to browse cross-category
Mobile site
Product listing
 page
Fashion
Dropdown
New
Urban Outfitters
Display a review summary
Mobile site
Product details
 page
Fashion
Reviews/social proof
New
United Airlines
Ability to filter deals and offers
Desktop site
Promotions
 page
Travel
Filters/sort by
Promotion
New
Ultimate Ears
Comparison table for different products
Desktop site
Product details
 page
Electronics
Compare
New
Ultimate Ears
Annotations to highlight features
Desktop site
Product details
 page
Electronics
Content
Imagery
New
Tesla
Annotated images displaying USPs
Mobile site
Product details
 page
Automotive
Imagery
New
Tesla
Full page content with scroll indicator
Mobile site
Product details
 page
Automotive
Scroll indicator
New
Task Rabbit
Automatically suggests addresses as users type
Desktop site
Form
 page
Services
Form
Progress/steps
New
Tarte
Product edition on the cart page
Desktop site
Cart/basket
 page
Beauty
Quickview
New
Target
Quick clear filters when no result shown
Desktop site
Search results
 page
Retail
Filters/sort by
Search
New
Target
Filters in the reviews section
Mobile site
Product details
 page
Retail
Dropdown
Filters/sort by
Reviews/social proof
New
Target
Quick view and links to product page
Desktop site
Content/info
 page
Home/DIY
Imagery
Featured products
New
Target
Display to highlight the promo section
Mobile site
Cart/basket
 page
Retail
Cart/basket summary
Promotion
New
Tag Heuer
A secondary navigation with an anchor
Desktop site
Product details
 page
Luxury
Anchor link
Imagery
New
Stripe
Interactive visuals show product perks
Mobile site
Content/info
 page
Finance
Data visualisation
Interactions
New
Stripe
Short and sweet menu dropdowns
Desktop site
Global element
 page
Finance
Dropdown
Navigation/menu
New
Squarespace
Engaging carousel with a time progress bar
Desktop site
Content/info
 page
Telco
Carousel
Content
Progress/steps
New
Sprint
Dynamic price display
Desktop site
Subscription
 page
Telco
Carousel
Compare
New
Spectrum
CTA differenciation
Desktop site
Subscription
 page
Services
CTA
Compare
New
Slack
Search term remains inside search field
Desktop site
Support
 page
Internet/tech
FAQ/help
Search
New
Slack
Using tabs to organise content
Desktop site
Content/info
 page
Internet/tech
Content
Filters/sort by
New
Skillshare
Preview content changes by tab
Mobile site
Homepage
 page
Education
Carousel
Content
Tabs
New
SimpliSafe
Info changes when product is hovered on
Desktop site
Content/info
 page
Electronics
Content
Interactions
Featured products
New
Showpo
Quick add to bag using size selection
Desktop site
Product listing
 page
Fashion
Quick add
Size/dimensions
New
Shopbop
Confirmation pop in and link to the checkout
Desktop site
Product details
 page
Fashion
Modal/pop-up
New
Shopbop
The status of the stock in the cart page
Desktop site
Cart/basket
 page
Fashion
Cart/basket summary
Product availability
New
Shein
Cut design within a carousel
Mobile site
Product details
 page
Fashion
Imagery
New
Shein
Measurements details when hovering
Desktop site
Product details
 page
Fashion
Size/dimensions
New
Sézane
Slider to navigate to other sub-categories
Mobile site
Product listing
 page
Fashion
Navigation/menu
Carousel
New
Sephora
Accordions reveal items to add to cart
Desktop site
Cart/basket
 page
Beauty
Cross-sell/up-sell
Quick add
New
Sephora
Bottom navigation with a sticky add to cart CTA
Mobile site
Global element
 page
Beauty
CTA
Navigation/menu
Sticky
New
Sephora
Virtually try on make up products
Desktop site
Configurator
 page
Beauty
Colour options
Configurator
Virtual try-on
New
Sephora
Filters in the reviews section
Mobile site
Product details
 page
Beauty
Filters/sort by
New
Sephora
Try it on' before purchasing
Desktop site
Content/info
 page
Beauty
Virtual try-on
New
Seat
Sticky sub-navigation
Mobile site
Product details
 page
Automotive
Navigation/menu
Sticky
New
Savannahs
Available sizes appear on hover
Desktop site
Product listing
 page
Accessories
Imagery
Size/dimensions
New
Savage x Fenty
Models size and key info above the fold
Mobile site
Product details
 page
Fashion
Reassurance
Size/dimensions
Structure/hierarchy
New
Samsung
Sticky comparator at the bottom of the page
Desktop site
Product listing
 page
Electronics
Compare
New
Robinhood
Tooltips show users unmet requirements
Desktop site
Search
 page
Finance
Error/confirmation prompt
Form
Login/sign up
Tooltip
New
Revolve
A snapshot of reviews
Mobile site
Product details
 page
Fashion
CTA
Modal/pop-up
Reviews/social proof
New
Revolve
Search bar on the error page
Desktop site
Error
 page
Luxury
Category shortcut
Error/confirmation prompt
Search
New
Revolve
Horizontal filter slider
Mobile site
Product listing
 page
Luxury
Filters/sort by
Imagery
Navigation/menu
New
Rent the Runway
Cross-category shopping
Desktop site
Product details
 page
Luxury
Cross-sell/up-sell
New
Reiss
Navigation flexibility in the product page
Mobile site
Product details
 page
Fashion
Navigation/menu
New
Ralph Lauren
Editorial content with 'Shop the look'
Desktop site
Content/info
 page
Fashion
Editorial
New
Ralph Lauren
Editorial content plus product push
Desktop site
Homepage
 page
Fashion
Carousel
Editorial
Imagery
New
Ralph Lauren
Contrasted background for menu elements
Mobile site
Global element
 page
Fashion
Navigation/menu
New
Prosper
Tooltip shows what to include in a field
Mobile site
Form
 page
Finance
Form
Tooltip
New
Prosper
Form with inline validation
Mobile site
Form
 page
Finance
Form
Interactions
Tooltip
New
Prosper
Application form flow
Desktop site
Form
 page
Finance
Form
Progress/steps
New
Panera Bread
Variety of options to log in
Mobile app
Login/sign up
 page
Food/grocery
Login/sign up
New
Pai
Interactive slider to provide context
Desktop site
Homepage
 page
Beauty
Content
Imagery
New
Oysho
Cross-sell with a quick shop
Desktop site
Product details
 page
Fashion
Cross-sell/up-sell
Quick add
Quickview
Carousel
New
Overstock
Shop inspirational content
Desktop site
Category
 page
Home/DIY
Content
Imagery
New
Overflow
Animated tooltip indicators
Desktop app
Homepage
 page
Internet/tech
Tooltip
Tutorial
New
Old Navy
Discounts and promotions in a pop-over
Desktop site
Homepage
 page
Fashion
Promotion
New
Nordstrom
Inspirational cross sell /Shop this look
Desktop site
Product details
 page
Fashion
Cross-sell/up-sell
Imagery
New
Nisolo
Promotion display in a pop-over
Mobile site
Homepage
 page
Accessories
Modal/pop-up
Promotion
New
Nike
Cart summary can be expanded using an accordion
Mobile site
Checkout
 page
Fashion
Cart/basket summary
New
Nike
Confirmation pop in
Mobile site
Product details
 page
Fashion
Cart/basket summary
Quickview
New
Netflix
A carousel to facilitate prospecting
Desktop site
Homepage
 page
Entertainment
Carousel
Category shortcut
New
NET-A-PORTER
CTA is displayed at both the top and bottom
Desktop site
Cart/basket
 page
Luxury
CTA
New
NET-A-PORTER
Viewing the next section above the fold
Mobile site
Homepage
 page
Fashion
Structure/hierarchy
New
Nerd Wallet
Mortgage calculator with breakdowns
Desktop site
Configurator
 page
Finance
Calculator
Configurator
New
National Geographic
Carousel to promote new-in
Desktop site
Homepage
 page
Entertainment
Carousel
New
Nasty Gal
Address suggestions as the user types
Desktop site
Checkout
 page
Fashion
Delivery
Form
Search
New
Namshi
Tooltips to provide more information
Desktop site
Homepage
 page
Fashion
Payment
Tooltip
New
Namshi
Two level navigation menu
Mobile site
Global element
 page
Fashion
Navigation/menu
New
N26
Form fields with micro-interactions
Mobile site
Form
 page
Finance
Form
Interactions
New
N26
FAQ with accordion buttons
Mobile site
Subscription
 page
Finance
Dropdown
FAQ/help
New
N26
Interactive form
Desktop site
Form
 page
Finance
Form
Interactions
New
MVMT
Allow the user to add a complementary product
Desktop site
Product details
 page
Fashion
Colour options
Imagery
New
Mr Porter
Shop the look and editorial images
Desktop site
Content/info
 page
Fashion
Cross-sell/up-sell
Featured products
New
Monki
Customers model products at home
Desktop site
Product details
 page
Fashion
Imagery
Reassurance
Reviews/social proof
New
Monday
USPs take less space by using side tabs
Desktop site
Product details
 page
Internet/tech
Content
Structure/hierarchy
Tabs
New
Miu Miu
Product colors are accessible in a popup
Mobile site
Product details
 page
Luxury
Colour options
Imagery
Modal/pop-up
New
Mini
Configurator to personalize the product
Desktop site
Configurator
 page
Automotive
Colour options
Personalisation
New
Michael Kors
In-page navigation on blog page
Mobile site
Content/info
 page
Fashion
Navigation/menu
New
Mercedes
Switch to see your choices at night
Desktop site
Configurator
 page
Automotive
Configurator
New
Medium
Able to adjust algorithm affecting feed
Desktop site
Settings
 page
News/publications
Personalisation
New
Mediapart
Sticky menu when scrolling down the page
Desktop site
Global element
 page
News/publications
Navigation/menu
Sticky
New
Max Mara
Hotspots on the image
Desktop site
Product details
 page
Luxury
Imagery
New
No results found, whoopsie daisy!
Clear all filters
Show more