Feature List
List or grid of product/features with icons and short descriptions
What is it?
Feature lists communicate product capabilities with concise headlines, supporting descriptions, and optional icons or visuals to aid scanability.
Mockdown
``` [✓ Feature One] Short description about benefit. [✓ Feature Two] Short description about benefit. [✓ Feature Three] Short description about benefit. ``` Characteristics: - Bite-sized feature items - Use icons for quick visual scanning - Organize by importance or user journey - Consider grouping into categories for complex products
Layouts Using This Pattern
┌──────────┬────────────────────────────────────┐
│ ☰ Menu │ ◉ Dashboard 🔔 👤 │
│ ├────────────────────────────────────┤
│ ● Home │ ┌────────┐ ┌────────┐ ┌────────┐ │
│ ○ Stats │ │ ▲ 1,234│ │ ● 87% │ │ $9.4K │ │
│ ○ Users │ │ KPI ···│ │ KPI ···│ │ KPI ···│ │
│ ○ Config │ └────────┘ └────────┘ └────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 📈 Chart │ │
│ │ │ ╱╲ ╱╲ ╱╲ │ │
│ │ │ ╱ ╲╱╱ ╲╱ ╲╱─── │ │
│ │ └──────────────────────────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ Name Role Status │ │
│ │ │ ───── ───── ──────── │ │
│ │ │ Alice Admin ● Active │ │
│ │ │ Bob User ○ Idle │ │
│ │ └──────────────────────────────┘ │
└──────────┴────────────────────────────────────┘Dashboard
SaaS Analytics Dashboard
A full-featured analytics dashboard with KPI cards, revenue charts, user activity tables, and a collapsible sidebar nav — ideal for SaaS admin panels.
--analytics--kpi--charts
Complex
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
SaaS Product Landing Page
A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.
--hero--cta--features
Medium
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.