Skip to content

Accordion

<ns-accordion>

Overview

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

✨ This is an auto-generated AI summary of the ns-accordion's documentation. It may not be accurate. ✨

Use ns-accordion to break down content into meaningful sections, helping to reduce information overload. Accordions can be useful for things like frequently asked questions or displaying multiple blocks of related content inside an ns-expander.

Examples

Guidance

Standard

Labelled diagram of ns-accordion

Key

KeyField typeGuidelines
AHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total.
BAnonymous slotAdd 1 to 8 <ns-expander> components. All expanders relate to the Heading.

Considerations

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.

Implementation

Placement

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

Specification

Attributes

type
Property
type
Description
The type of the accordion.
Type
string
Default
standard

Slots

SlotPermitted tagsDescription
heading<h2> <h3> The heading of the accordion that relates to the sections of content. Heading level depends on its place in the semantics of the page.
Anonymous slot<ns-expander> The anonymous slot for group of related expanders.

Last updated: