Content Sections
Hero areas, CTAs, testimonials, and page blocks
11 patterns available
``` [◯ AB] Alice Baker [◯ JS] John Smith ``` Characteristics:
Avatar
User avatar component (image, initials) used in lists, nav, and profiles
``` [Primary] [Secondary] [Ghost] [Outline] [🔍] ``` Characteristics: - Clear primary vs secondary emphasis
Button Variants
Common button styles: primary, secondary, ghost, outline, and icon buttons
``` ────────────── [Big Heading] Short supporting sentence that explains value. [Primary CTA] [Secondary Link] ──────────────
Call To Action (CTA)
Prominent CTA sections used to convert visitors with a clear value proposition and primary action
``` [✓ Feature One] Short description about benefit. [✓ Feature Two] Short description about benefit. [✓ Feature Three] Short description about benefit. ```
Feature List
List or grid of product/features with icons and short descriptions
``` ┌────────────────────────────────────────────────────────┐ │ Company Logo Products Resources Legal Social │ │ © 2026 Company Name • Terms • Privacy • Contact │ └────────────────────────────────────────────────────────┘ ```
Footer
Page footer with site links, legal info, and secondary navigation
``` ┌──────────────────────────────────────────────────────────┐ │ │ │ 🚀 Welcome to Acme │ │ │ │ Build better products, faster │
Hero Section
A large, attention-grabbing area at the top of a page with headline, subtext, and call-to-action
``` Stay in the loop. Get product updates and tips. [ Email input __________________ ] [Subscribe] ``` Characteristics:
Newsletter Signup
Compact newsletter or mailing-list signup block used in footers or inline CTAs
``` [New] Introducing our 50% discount for students → [Learn more] [Dismiss] ``` Characteristics: - Short headline with a single action
Promotional Banner
Top-of-page or inline banner for short-lived promotions, offers, or announcements
``` ───────── Metrics ───────── 1M+ Users 99.99% Uptime 4.8/5 Average Rating ```
Stats / Metrics
Highlighted statistics or KPIs that communicate product impact at a glance
``` ──────── Testimonials ──────── "Product X helped our team ship faster." — Jane Doe, Acme Co. [Logo Grid] ```
Testimonial / Social Proof
Quotes, logos, and endorsements that build trust and credibility
``` ┌─────────────────────────┐ │ ✅ Saved successfully │ (x) └─────────────────────────┘ ```
Toast Notifications
Brief, transient messages for system feedback and status updates