Accordion

Collapsible panels that expand to reveal content, useful for FAQs and dense regions

What is it?

An accordion organizes content into stacked panels where each panel header toggles the visibility of its content. Accordions reduce scrolling and let users scan headings to find relevant content.

Mockdown

```
▶ What is the refund policy?
  — When you request a refund, ...
▶ How do I change my plan?
  — Go to account settings → Billing.
```

Characteristics:
- Single or multi-expand behavior
- Smooth height transitions
- Accessible roles and keyboard support

Layouts Using This Pattern

┌───────────────────────────────────────────────┐
│  ┌───────────────────────────────────────┐    │
│  │  ✉  Preview text goes here...         │    │
│  └───────────────────────────────────────┘    │
│                                               │
│              ◉ ACME Inc.                      │
│                                               │
│  ┌───────────────────────────────────────┐    │
│  │                                       │    │
│  │    🚀 Introducing Our New Feature     │    │
│  │                                       │    │
│  │    We've been working hard to bring   │    │
│  │    you something special...           │    │
│  │                                       │    │
│  │         [ Learn More → ]              │    │
│  │                                       │    │
│  └───────────────────────────────────────┘    │
│                                               │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐    │
│  │ Feature 1│  │ Feature 2│  │ Feature 3│    │
│  │   desc   │  │   desc   │  │   desc   │    │
│  └──────────┘  └──────────┘  └──────────┘    │
│                                               │
│  Unsubscribe · Preferences · View Online      │
└───────────────────────────────────────────────┘

Marketing

Product Launch Email Campaign

A responsive HTML email layout for a product launch — featuring a hero image, feature highlights, social proof, and a single focused CTA — compatible with major email clients.

--email--campaign--launch

Simple

Use these prompts to generate layouts built with this pattern.

--accordion --collapse --expand --disclosure

Ready to build?

Use this pattern as inspiration when creating UI layouts with AI tools.

Try the Editor Browse Layout Prompts