vic_logo

Accordion - Design System

A list of expandable topics.

Usage

Use the Accordion component to create an expandable step-by-step list or checklist for users.

Each list item can expand to reveal text or media.

The component fills the full width of the available content area.

Example

List accordion

A visual example of an accordion.

List accordion working example: First home buyers checklist .

Numbered accordion

The 'numbered' style of accordion displays a sequential number alongside each accordion segment title. Numbered accordions should only be used for procedural-type instructions where the order of doing things is important.

A visual example of a numbered accordion.

How to build

Accordions can be embedded into the body content area of any landing page.

For more detailed information view the Victorian Government digital guide.

Reviewed 12 May 2019

Get support using SDP

Our community of practice for anyone with content on SDP meets once a month. We cover research, analytics, new features and more. You can also learn from how others are using the platform and get support to build new pages. To join or find out more contact nicole.shilo@dpc.vic.gov.au

Was this page helpful?