Every website is built from a collection of smaller components. Headers, navigation menus, hero sections, content layouts, cards, and search tools all work together to shape how visitors experience a website.
Some components help people navigate. Others organize information, showcase products, or encourage visitors to explore further.
Understanding these building blocks makes it easier to plan a website, evaluate different designs, and recognize why certain layouts work better than others.
In this interactive guide, we'll break down the major components of a website using real, working examples. You can switch between designs, explore different layouts, and learn when each approach makes sense.
Let's take a website apart, one component at a time.
Chapter 01: Website Headers
The header is one of the first components visitors encounter when opening a website. It typically sits at the top of the page and brings together important elements such as the logo, navigation links, search tools, and account controls.
A small portfolio might need only a logo and a few links, while a large online store may require categories, search functionality, shopping carts, and customer accounts.
The challenge is deciding which elements deserve space, how they should be arranged, and how the header should adapt to different screen sizes.
Explore the header styles below to see how different arrangements affect the appearance and functionality of a website.
The first thing visitors use to find their way.
A website's header usually contains its logo, navigation, and important actions. But not every website needs the same kind of header. Explore three common approaches, switch between desktop and mobile, and inspect the pieces that make each one work.
Minimal Header
What's in this header?
Hover over a component to highlight it in the preview. Tap or click to learn more.
When does this style work best?
Chapter 02: Hero Sections
The hero is the prominent section visitors often encounter immediately below the header. It introduces the website's main message and helps establish what visitors should pay attention to first.
Hero sections can take many forms. Some rely on a strong headline and minimal design, while others use photography, video, product imagery, or interactive features to create a more immersive experience.
The best approach depends on the website's purpose. A portfolio may emphasize visual storytelling, while an online store might highlight featured collections or provide immediate access to shopping.
Explore the hero styles below to compare how different designs communicate information and guide visitors toward the next step.
Explore Hero Sections
Ten different approaches to one of the most important areas of a website. Switch between examples, try their interactions, and learn what makes each design effective.
Take a closer look
Hover over or select a card to highlight the corresponding design element. Select it to learn more.
When should you use this hero?
Combining Hero Styles
A hero section doesn't have to follow just one design style. In fact, some of the most effective websites combine several approaches to create an experience that is both visually appealing and functional. Our example brings together a prominent search bar, a carousel of collections, product previews, and interactive filters—all within a single section. Rather than simply introducing the brand, this hero immediately helps visitors find what they're looking for. This approach works particularly well for marketplaces and online stores with large or specialized catalogs, where helping customers discover the right product is just as important as making a great first impression.
Chapter 03: Content Sections & Layouts
Once visitors move beyond the hero, the rest of the website needs a way to organize its content.
Content layouts determine how information is arranged within a section. Products might appear in a uniform grid, articles in an editorial layout, or featured content in an asymmetric arrangement that emphasizes certain items over others.
Different layouts create different browsing experiences. A grid makes comparison easier, while a magazine-style layout can create a stronger sense of visual hierarchy and storytelling.
Explore the eight layouts below to see how the same types of content can be arranged in different ways.
How you arrange content changes how people experience it.
Website sections don't all need to follow the same pattern. Some organize information into neat rows, while others use size, spacing, and imagery to draw attention. Explore eight ways to arrange content and see how each changes the way a page feels.
Bento grid
Named after compartmentalized lunch boxes, bento layouts use different-sized blocks to organize related content. Larger areas attract attention while smaller ones offer supporting information. They're especially useful for showcasing several things without making everything look equally important.
Explore what's growing
Find your next favorite thing
Discover plants, inspiration, and something unexpected.
Tropical favorites
Grow something new.
Fresh ideas for your next project.
Equal card grid
A classic layout that gives every item the same amount of space. Equal grids are easy to scan and work particularly well when products, services, or articles deserve similar attention.
Browse by interest
Indoor plants
Bring greenery into your everyday spaces.
Tropical fruit
Discover familiar favorites and unusual varieties.
Seeds & growing
Everything begins with a little curiosity.
Asymmetric grid
Not every piece of content needs equal space. Asymmetric grids deliberately give one item more visual weight, creating a focal point while keeping supporting content close by.
Ideas worth exploring
Make room for something green
Small changes can completely transform the feeling of a space.
Plants with personality
Discover standout varieties.
A fresh start
Find inspiration for your garden.
Alternating rows
By switching the position of images and text from one row to the next, this layout creates rhythm as visitors scroll. It's useful for explaining services, telling stories, and introducing features in a natural sequence.
A better way to explore
Start with what interests you.
Browse collections and find ideas that match your space, interests, and goals.
Get the details that matter.
Understand what makes each option different before deciding what comes next.
Turn inspiration into action.
Bring your ideas to life with the right products and practical guidance.
Masonry layout
Masonry arranges items of different heights into flowing columns. It's a natural fit for photography, inspiration galleries, portfolios, and collections where visual variety is part of the experience.
Collected inspiration
Green spaces
Every corner has potential.
Natural color
Fresh inspiration.
Outdoor living
Grow into your space.
Everyday greenery
Bring nature inside.
New beginnings
Start something small.
Magazine layout
Editorial layouts borrow from newspapers and magazines, using typography, image size, and spacing to establish hierarchy. They're especially useful for blogs, publications, and content-rich websites.
Stories & inspiration
The quiet beauty of growing something yourself
A closer look at the simple satisfaction of making space for nature in everyday life.
Finding a place for plants indoors
Simple ideas for living spaces.
Fruits worth getting to know
Explore something different.
A beginner's guide to starting seeds
Start small and grow confidently.
Sidebar + grid
This layout separates navigation or filters from the main content. It's common in online stores, directories, and resource libraries because it helps visitors narrow down a large collection without losing their place.
Find something interesting
Indoor plants
Plants
Tropical fruit
Fruit
Starter seeds
Seeds
Rare plants
Plants
Card carousel
Carousels arrange content in a horizontal track instead of a traditional grid. They're useful when you want to showcase a selection of items while keeping the section relatively compact. Visitors can swipe on touchscreens or use the navigation arrows.
Worth a closer look
Indoor greenery
Make room for nature.
Tropical discoveries
Something a little different.
Growing essentials
Start your next project.
Rare finds
Explore the unexpected.
Garden inspiration
Ideas for greener spaces.
Use a larger block for the content that matters most. A good bento grid creates hierarchy without making the page feel crowded.
Chapter 04: Cards & Collections
While content layouts determine where information appears, cards determine how individual pieces of content are presented.
A card is a reusable component that groups related information, such as an image, title, description, price, or action, into a single visual element.
Product cards help visitors compare items, article cards introduce written content, and collection tiles make categories easier to explore. The right card design depends on what information visitors need to see and what they are expected to do next.
Explore the card styles below to compare how different designs present information within a website.
One piece of content. Many ways to present it.
Cards help visitors scan, compare, and explore information. But the way they're designed can completely change the experience. Select a layout below to see how eight common card styles work in practice.
Product cards
The familiar building blocks of online shopping. Product cards bring together photography, names, prices, and actions so customers can browse without opening every item.
Horizontal cards
Sometimes a photograph alone doesn't tell the whole story. Placing imagery beside text creates room for descriptions, making this layout useful for search results, services, and more detailed previews.
Monstera Deliciosa
A tropical favorite known for its distinctive split leaves and striking appearance.
Garden Starter Seeds
A carefully selected assortment for starting your next growing project.
Image overlay cards
Let the photography do the talking. Overlay cards place text directly on an image, creating a more immersive way to introduce collections, destinations, and visual content.
Feature cards
Not everything needs a photograph. Feature cards help explain benefits, services, or capabilities through concise writing and clear visual hierarchy.
Discover
Explore products, categories, and useful information through thoughtfully organized collections.
Compare
Understand the differences between options and make more informed decisions.
Learn
Find practical information that supports the products or services you're exploring.
Article cards
A good article preview should give readers a reason to click. Headlines, imagery, and short summaries help visitors decide what deserves their attention.
Getting started with tropical plants
Explore the basics of choosing and caring for tropical plants.
Choosing a fruit tree for your garden
Consider climate, available space, and growing requirements.
How to start growing from seed
A beginner-friendly introduction to starting seeds successfully.
Compact listings
When visitors need to scan dozens of results, less can be more. Compact listings reduce visual decoration and focus on the details that matter most.
Comparison cards
Choosing between several options becomes easier when differences are visible side by side. Comparison cards are especially useful for pricing plans, bundles, and service packages.
Starter
For getting started
- ✓ Basic collection
- ✓ Getting started guide
- ✓ Essential supplies
Grower
For expanding your collection
- ✓ Expanded collection
- ✓ Detailed growing guide
- ✓ Additional supplies
- ✓ More variety
Collector
For experienced enthusiasts
- ✓ Specialty collection
- ✓ Advanced growing guide
- ✓ Complete supply selection
- ✓ Rare varieties
Collection tiles
Sometimes visitors aren't looking for a specific item yet. Collection tiles introduce broader categories and give people a natural starting point for exploration.
Tropical fruit
Explore fruit trees and tropical varieties.
Indoor plants
Discover greenery for indoor spaces.
Seeds & growing
Find supplies for your next growing project.
Chapter 05: Search, Filters & Discovery
As websites grow, navigation alone may not be enough to help visitors find what they're looking for.
Search and discovery components allow visitors to explore content more efficiently. Search bars help people locate specific information, filters narrow the available options, and sorting controls change how results are organized.
Other tools, such as predictive search and guided discovery, help visitors find relevant content even when they don't know exactly what to search for.
Explore the interactive examples below to see how search, filtering, sorting, and discovery tools work together.
Help visitors find what they're looking for.
A beautiful website is only useful when people can find what they need. Search bars, filters, navigation, and discovery tools all help visitors explore. Try these eight common patterns to see how they work.
Search bar
A search bar gives visitors a direct route to what they want. It's especially valuable on websites with many products, articles, or services. Try searching for a product below.
What are you looking for?
Showing all products
Predictive search
Predictive search suggests relevant items as visitors type. It saves time, helps correct incomplete searches, and makes it easier to discover products without knowing their exact names.
Start typing to discover.
Suggestions appear as you type.
Sidebar filters
Filters help visitors narrow down large collections. Instead of scrolling through everything, shoppers can focus on categories, price ranges, or other characteristics that matter to them.
Browse the collection
Filter chips
Filter chips put common choices directly above the content. They're compact, easy to understand, and especially useful on mobile where a traditional sidebar takes up too much room.
Explore by category
Sorting
Sorting lets visitors rearrange the same products according to their priorities. Price, alphabetical order, and other criteria can help shoppers make decisions more efficiently.
Find your favorites
Mega menu
Mega menus expand navigation into organized groups. They're useful for websites with many categories because visitors can see several paths at once instead of opening multiple nested menus.
Explore our collections
Guided discovery
Sometimes visitors don't know exactly what to search for. Guided discovery helps them begin with a goal, interest, or need, then recommends relevant options.
What would you like to explore?
Recommended for you
Search results
The results page brings everything together. Clear titles, relevant imagery, sorting, and layout controls help visitors evaluate what they've found. Try switching between grid and list views.
Browse results
Chapter 06: Reusable Engagement Sections
Not every section of a website is dedicated to displaying products, articles, or other content. Some sections serve a supporting purpose by answering questions, building trust, explaining processes, or encouraging visitors to take the next step.
These reusable sections include testimonials, pricing comparisons, frequently asked questions, contact forms, promotional features, and more.
They can appear on homepages, product pages, service pages, or throughout a website wherever additional context or engagement is needed.
Explore the final set of components below to see how these sections help complete the overall website experience.
Reusable Website Sections
Websites use supporting sections to build trust, answer questions, explain offerings, and help visitors take the next step. Explore eight common approaches below.
What people are saying.
A simple testimonial layout gives multiple customer perspectives without overwhelming the page.
“The entire experience felt simple and thoughtful.”Illustrative customer feedback
“Everything was clearly explained from the start.”Illustrative customer feedback
“Exactly what I was looking for.”Illustrative customer feedback
Find the right fit.
A simple comparison layout helps visitors understand the differences between plans.
Essential
Everything needed to get started.
- Core features
- Standard support
- Basic access
Plus · Most Popular
More flexibility and functionality.
- Everything in Essential
- Expanded features
- Priority support
Complete
For more advanced requirements.
- Everything in Plus
- Advanced capabilities
- Dedicated assistance
Frequently asked questions.
An accordion organizes common questions without displaying every answer at once.
How does the process work?
Visitors can explore available options, make a selection, and follow the next steps.
Can I change my selection later?
Websites should clearly explain their modification and cancellation policies.
Where can I find more information?
Detailed descriptions, help articles, and contact options provide further guidance.
How do I contact support?
A contact page or support center should provide the available communication channels.
Have something in mind?
Whether you have a question, an idea, or need more information, we're here to help.
The details that matter.
Trust sections communicate important assurances in a format visitors can quickly scan.
Something new to discover.
Explore a thoughtful selection of interesting finds and everyday favorites.
Three simple steps.
Process sections make an unfamiliar experience easier to understand.
Explore
Browse options and learn what makes each different.
Choose
Select what best fits your needs.
Get started
Follow the next steps and begin.
Testimonials
Putting It All Together
A well-designed website is more than a collection of attractive sections. It's a system of components working together to help visitors understand, navigate, and interact with content.
Headers establish identity and structure. Navigation provides direction. Hero sections introduce the main message. Content layouts and cards organize information, while search and discovery tools help visitors find what matters to them.
Supporting sections then provide the additional information, reassurance, and opportunities for engagement that complete the experience.
The goal isn't to use every component or follow one particular design style. It's to choose the right building blocks for the website's purpose and arrange them in a way that feels natural to the people using it.
Once you understand these components, designing a website becomes less about guessing what looks good and more about making intentional decisions.
