ns-accordion

Organism | Accordion component.

Introduction

Accordion enables users to expand and collapse multiple sections of content.

We use accordions to break down content into meaningful sections, helping to reduce information overload. Accordions are useful for things like frequently asked questions or displaying multiple blocks of related content such as tariffs.

Content guidance

Accordion

Key

Field type

Guidelines

A

Heading

The recommended length is between 4 and 12 words, not exceeding 50 characters in total.

B

Content

Use between 1 and 8 ns-expanders. Each expander consists of a heading and an anonymous content slot. When the heading is clicked the component opens to reveal the content. When in an open state, clicking the heading will hide the content. See ns-expander for further content guidance.

Best practice

๐Ÿ’š Do's

๐Ÿ’” Don'ts

Use for FAQs

Use a background with an accordion as the expanded state is white

Use to split up related content

Use more than 8 expanders

Make sure section headings relate to content

Use for critical information (such as caveats)

โ€‹

Use as a solution to excessive copy on a page

Considerations of best practises

Accordions should be used for FAQs or splitting related content into sections. They should not be used for showing critical information such as caveats. We highly recommend that there are no more than eight content headings in a multiple accordion. If more than eight are used we should stop to reassess why and perhaps breakdown the content even more.

Usage

To see examples visit Storybookโ€‹

<ns-accordion>
<h3 slot="heading">Frequently asked questions</h3>
<ns-expander open="false">
<h4 slot="heading">Can I manage my account online?</h4>
<p>
Yes, with an online account you can arrange a service visit, find out whatสผs happening with your appointment, submit a meter reading and book an engineer.
Weสผve even got a free smartphone app.
</p>
</ns-expander>
</ns-accordion>

Component relationship

Relationship

โ€‹

Does it live in a panel?

โœ… Yes

Does it live inside other components?

โŒ No

What layout classes can be used?

splash splosh

Specification

Slots

Type

heading

h tag

Anonymous

<ns-expander>

Specification notes

Heading

  • The heading is for the entire accordion.

  • Heading level should be h2 or h3 depending on if it is part of another heading.

Anonymous

Feedback

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.

  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!