Beginner18 min readShare
Was this chapter helpful?
Share
Every user interface component you need to know. Learn the name, see the example, and know exactly what to ask AI for. Also see: CSS Concepts, Colors, Sections Gallery.
Buttons trigger actions. Different styles communicate different levels of importance.
The main CTA. Use for "Sign Up" or "Submit." Draws the most attention.
Less prominent, outlined style. Use for "Cancel" or "Learn More."
Minimal styling. For tertiary actions that shouldn't draw attention.
Red color warns of destructive actions like "Delete" or "Remove."
A circular button that floats above content, usually in a fixed position. Common in Material Design.
AI Tip: "Add a floating action button in the bottom-right corner with a plus icon for creating new items."
Input elements let users enter data: text, email, password, dropdown, textarea, and more.
Binary or multiple-choice selection controls.
A navigation aid showing the user's current location in the site hierarchy.
AI Tip: "Add breadcrumb navigation at the top showing Home > Category > Current Page."
Visual indicators showing how much of a task or process is complete.
Small labels used to categorize, label, or show status.
Messages that provide feedback — success, warnings, errors, or informational notices.
Overlay windows that appear on top of main content for confirmations, forms, or important messages.
Blocks interaction with the rest of the page. Has an overlay behind it.
Can be non-blocking. Often used for "Are you sure?" confirmations.
A modal specifically for viewing images or media at larger size.
Allow users to switch between different views within the same page.
This is the Overview tab content. Tabs help organize content into logical sections.
Expandable content sections. Great for FAQs, settings, or content hidden by default.
Small circular images or initials representing a user.
Small popups on hover providing extra information.
Structured data in rows and columns for lists, comparisons, and data-heavy interfaces.
| Name | Role | Status | Action |
|---|---|---|---|
| Alex Johnson | Developer | Active | |
| Sarah Chen | Designer | Active | |
| Mike Wilson | Manager | Away |
Self-contained content containers. The most common way to group related information.
Cards group related content. They can contain text, images, buttons, or any other elements.
Commonly used to showcase features, products, team members, or pricing plans.
Placeholder content that mimics the shape of real content while loading.
Animated indicators telling the user something is loading.
Navigation for moving between pages of content.
The large, prominent area at the top of a landing page with headline, subtitle, and CTA.
AI Tip: "Create a hero section with a gradient background, large heading, subtitle, and two CTA buttons (primary and secondary)."
The main bold text — your most important message or value proposition.
Supporting text below the headline providing more context.
The button(s): "Get Started," "Sign Up Free," "Learn More."
Content visible without scrolling. The hero is always above the fold.
An input specifically for searching content, usually with a magnifying glass icon.
The horizontal bar at the top of every page with logo, links, and actions. The most essential page element.
Your brand mark, usually top-left. Clicking it goes to the homepage.
The main pages — Home, About, Features, Pricing. Keep it to 4–6 links.
Log In / Sign Up or a primary action button, usually top-right.
AI Tip: "Create a responsive navbar with logo on the left, 4 navigation links in the center, and login/signup buttons on the right. On mobile, collapse into a hamburger menu."
The top section of a page combining the navbar with a page title, subtitle, or breadcrumbs. Different from a navbar — a header wraps the nav and adds context.
A navbar is just the navigation links. A header wraps the navbar and adds page-level context like titles.
The large text telling users which page they're on. Often below the nav, inside the header.
A trail (Home > Blog > Post) often lives inside the header, above the page title.
AI Tip: "Create a page header with the navbar on top, then a section below with breadcrumbs, a large page title, and a short description."
The section at the very bottom of every page with links, copyright, and contact info.
AI Tip: "Create a 4-column footer with Product, Company, Support, and Legal link groups. Add copyright and social icons at the bottom."
A vertical navigation panel on the left (or right) side of the page. Common in dashboards and admin panels.
Main content area goes here. The sidebar stays visible while the content scrolls.
AI Tip: "Create a dashboard layout with a fixed sidebar on the left containing navigation icons and labels, and main content on the right."
The three-line icon (☰) that opens a mobile navigation menu. Essential for responsive websites.
AI Tip: "Make the navbar responsive — on mobile, hide the links behind a hamburger icon that opens a slide-down menu."
A menu that appears when clicking a button, showing a list of options or actions.
AI Tip: "Add a dropdown menu to the user avatar in the navbar with options: Profile, Settings, and Log Out."
A large dropdown that spans multiple columns, showing categories and sub-links. Used on complex sites like e-commerce.
AI Tip: "Create a mega menu dropdown for the Shop link — when hovered, show a 4-column grid with product categories and sub-links."
A fixed bar at the bottom of mobile screens with 3–5 icon tabs. Think Instagram or TikTok.
AI Tip: "Add a fixed bottom navigation bar for mobile with Home, Search, Create, Notifications, and Profile tabs with icons."
A multi-step progress indicator showing where the user is in a process. Used for sign-up flows, checkouts, and forms.
A floating button that scrolls the user back to the top of the page. Appears after scrolling down.
AI Tip: "Add a scroll-to-top button that appears when the user scrolls past 300px. It should be a circular button in the bottom-right corner."
A component that cycles through items (images, cards, testimonials) one at a time with arrows or dots.
AI Tip: "Create an image carousel with left/right arrows and dot indicators. It should auto-play every 5 seconds and pause on hover."
A vertical or horizontal sequence of events in chronological order. Great for changelogs, histories, or process flows.
Side-by-side plan comparison cards showing features and prices. A landing page staple.
Quotes from happy customers or users. Builds trust and social proof on landing pages.
“This tool saved me 20 hours a week. I can't imagine going back.”
“The easiest onboarding I've ever experienced. Beautiful UI too.”
AI Tip: "Add a testimonials section with 3 quote cards. Each card has the quote text, person's name, role, and a small avatar."
Big numbers that highlight achievements — users, downloads, uptime. Common in hero sections and about pages.
A prominent Call-to-Action block urging users to sign up, start a trial, or take the next step.
Join thousands of creators building amazing things. Free for 14 days.
A grid of icons + short descriptions showcasing your product's features. A landing page essential.
A thin strip at the very top of the page with a promotional message or important notice.
Small, auto-dismissing messages that slide in to confirm an action. Different from alerts — they disappear on their own.
AI Tip: "Add a toast notification system — when the user saves, show a small green message at the bottom-right that disappears after 3 seconds."
A small floating panel triggered by clicking (not hovering) on an element. More content than a tooltip.
A popover shows more detail than a tooltip. It can contain links, buttons, and formatted text.
A panel that slides in from the side of the screen. Used for filters, settings, or detail views without leaving the page.
AI Tip: "Add a slide-over panel from the right side for filtering. Include category dropdown, price range, and an Apply button."
A search-driven overlay (usually Cmd+K or Ctrl+K) for quickly navigating or running actions. Popular in dev tools and modern apps.
AI Tip: "Add a command palette that opens with Cmd+K. Show a search input, recent pages, and quick actions like 'New Project' and 'Settings'."
What users see when there's no content yet — no search results, no items, no messages. A chance to guide them.
Create your first project to get started. It only takes a minute.
AI Tip: "Design an empty state for the projects page — show an illustration, a message saying 'No projects yet', and a Create button."
Custom pages shown when something goes wrong — page not found (404) or server error (500).
The page you're looking for doesn't exist or has been moved.
A star-based input letting users rate something from 1 to 5. Used in reviews, feedback, and product pages.
Structured rows of content — emails, notifications, settings, or any repeated data.
Hey, can you review the latest...
v2.3.1 deployed to production
James joined the workspace
An area where users can drag-and-drop or click to upload files. Essential for any app that handles media or documents.
Drop files here or click to upload
PNG, JPG, PDF up to 10MB
AI Tip: "Create a file upload area with drag-and-drop support. Show a dashed border, upload icon, and accepted file types. Preview uploaded files below."
A calendar popup that lets users select a date. Used in booking, scheduling, and form fields.
A simple horizontal (or vertical) line separating sections of content.
AI Tip: "Add a divider with the text 'OR' centered between the social login buttons and the email form."
A switch that lets users flip between light and dark themes. Usually a sun/moon icon.
AI Tip: "Add a dark mode toggle in the navbar — a sun icon for light mode, moon icon for dark mode. Save the preference to localStorage."
A banner (usually at the bottom) asking users to accept cookies. Required by GDPR in many countries.
We use cookies to improve your experience. By continuing to browse, you agree to our use of cookies.
A row of icons letting users share content to Twitter/X, Facebook, LinkedIn, etc.
A header that stays fixed at the top as you scroll. Keeps navigation always accessible.
AI Tip: "Make the navbar sticky so it stays at the top when scrolling. Add a subtle shadow when scrolled past 50px."
CSS property that makes an element stick when it reaches a scroll position.
A common pattern: add a shadow to the navbar once the user starts scrolling down.
Pick and arrange the perfect sections for your landing page. Get a ready-to-use AI prompt with your layout.
Try it free →