| title | Accordion |
|---|
export const componentName = "ns-accordion";
import Specification from '@components/specification.astro'; import Placement from '@components/placement.astro'; import CompDetails from '@components/cem-description.astro';
import ExampleViewer from '@components/ExampleViewer.astro'; import RelatedLinks from '@components/related-links.astro'; import { Tabs, TabItem } from '@astrojs/starlight/components';
import Figma from '@components/figma.astro';
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.
:::do
- Use for FAQs (Frequently Asked Questions).
- Use to split up related content.
- Make sure the heading relates to the content.
- Use as a supporting component to the rest of the page's content. :::
:::dont
- Use a background with an accordion - the expanded state is white.
- Use more than 8 expanders.
- Use to hide critical information (such as caveats).
- Use as a solution to excessive copy on a page.
- Use as the only component on a page. :::
| Key | Field type | Guidelines |
|---|---|---|
| A | Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
| B | Anonymous slot | Add 1 to 8 <ns-expander> components. All expanders relate to the Heading. |
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.