Skip to main content

ns-accordion

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 inside an ns-expander.

Content guidance#

Accordion

KeyField typeGuidelines
AHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total.
BContentUse between 1 and 8 ns-expander components. All expanders need to be related to the accordion's heading.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use for FAQsUse a background with an accordion as the expanded state is white
Use to split up related contentUse more than 8 expanders
Make sure the heading relates to contentUse for critical or to hide information (such as caveats)
Use as a supporting component to the rest of the page's contentUse as a solution to excessive copy on a page
Use as the only component on a page

Considerations of best practises#

If you need more than 8 ns-expander components, you can use more than one accordion on the page.

If there isn't a inherent logical order to the expanders, use alphabetical order for ease of scanning.

Usage#

View example on Storybook

Component placement#

The ns-accordion component can be used in the following components:

Specification#

SlotsType
headingh tag
Anonymous<ns-expander>

Specification notes#

Heading#

  • The heading is for the entire accordion.
  • Heading level should be h2 or h3 depending on its place in the semantics of the page.

Anonymous#

Design Tokens

You can change the branded look and feel of the ns-accordion by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "border-bottom-color": "#C8C9C7",
  "heading": {
    "typography": "p-feature"
  }
}

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.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.