Accordions & Collapse

  1. Base UI
  2. Accordions & Collapse

Workspace questions

A familiar accordion with one section open at a time.

Start with a project name, invite your teammates, and organize your first set of tasks. You can adjust the workspace settings whenever you need.

Yes. Give collaborators access to the projects they need and review their permissions from your workspace settings.

Open your profile settings to choose email updates, task reminders, and workspace announcements.

Separated panels

Individual surfaces give each question room to breathe.

Start with a project name, invite your teammates, and organize your first set of tasks. You can adjust the workspace settings whenever you need.

Yes. Give collaborators access to the projects they need and review their permissions from your workspace settings.

Open your profile settings to choose email updates, task reminders, and workspace announcements.

Minimal FAQ

A flush layout for lightweight help and supporting details.

Start with a project name, invite your teammates, and organize your first set of tasks. You can adjust the workspace settings whenever you need.

Yes. Give collaborators access to the projects they need and review their permissions from your workspace settings.

Open your profile settings to choose email updates, task reminders, and workspace announcements.

Keep sections open

Independent panels let people compare information.

Set your display name, time zone, and language in your profile settings.

Choose a default project view and organize your team permissions.

Control reminders and summaries without changing your workspace access.

Icon navigation

Recognizable icons add context to each section.

Keep your profile details current so teammates can find the right person.

Review active sessions and use strong sign-in credentials.

Choose the updates that help you stay focused.

Project milestones

Progress labels make delivery stages easier to scan.

Customer interviews and research findings have been reviewed with the product team.

Interaction patterns are ready. The team is refining the prototype before usability testing.

Implementation starts after design sign-off and a final scope review.

Team directory

Portraits connect expandable details to real people.

Product designer

Owns the design system, interface patterns, and product experience.

View profile

Project lead

Coordinates delivery, project planning, and stakeholder updates.

Success accents

Use the existing semantic accordion theme.

The project structure is in place and your team can begin collaborating.

Shared folders keep project resources available to the right people.

Add a milestone and assign the first tasks to move the project forward.

Helpful guidance

Soft information accents for contextual support.

Prepare a short description of the project and make sure access permissions are correct.

Check the file version and choose the appropriate sharing settings.

Archive the final deliverables and capture the lessons for the next project.

Simple disclosure

Show optional information with a compact button.

Keep the main message short and reveal more detail when needed.

Workspace changes are saved as you work. Your teammates can view shared updates according to their project permissions.

Customized accordion styles

Numbered workflow

Small step markers turn each section into a clear sequence.

Define a clear goal, decide what belongs in the project, and choose the people who will help deliver it.

Group related tasks, assign an owner, and agree on milestones that make progress visible.

Share feedback with your team and record what you learn before starting the next phase.

Accent panels

Soft tinted surfaces with a distinct colored edge.

Define a clear goal, decide what belongs in the project, and choose the people who will help deliver it.

Group related tasks, assign an owner, and agree on milestones that make progress visible.

Share feedback with your team and record what you learn before starting the next phase.

Outline panels

Colored borders define each section without heavy fills.

Define a clear goal, decide what belongs in the project, and choose the people who will help deliver it.

Group related tasks, assign an owner, and agree on milestones that make progress visible.

Share feedback with your team and record what you learn before starting the next phase.

Solid active header

A stronger active state highlights the expanded section.

Define a clear goal, decide what belongs in the project, and choose the people who will help deliver it.

Group related tasks, assign an owner, and agree on milestones that make progress visible.

Share feedback with your team and record what you learn before starting the next phase.

Plus & minus controls

Custom indicators make the expand and collapse action familiar.

Define a clear goal, decide what belongs in the project, and choose the people who will help deliver it.

Group related tasks, assign an owner, and agree on milestones that make progress visible.

Share feedback with your team and record what you learn before starting the next phase.

Leading indicators

Left-aligned controls create a compact navigation-style layout.

Define a clear goal, decide what belongs in the project, and choose the people who will help deliver it.

Group related tasks, assign an owner, and agree on milestones that make progress visible.

Share feedback with your team and record what you learn before starting the next phase.

Multiple collapsible panels

Open each detail separately or toggle both together.

Delivery checklist

Confirm the scope, assign owners, and set your release date.

Review checklist

Collect feedback, resolve open questions, and get final sign-off.

Horizontal reveal

Expand supporting content across the available width.

A note for the team

Share a short update before your next milestone review.