Expanders are used to show or hide content.
An expander consists of a heading and a 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.
This is the heading to the anonymous content. When the heading is clicked the component opens to reveal the content.
Expander can accommodate multiple paragraph slots, these should be concise, using sub-headings to split large paragraphs. Can contain bold copy
Use instead of modal
Use to hide important information (such as caveats)
Use headings, paragraphs, lists for content
Use as a solution to excessive copy on a page
Make sure heading relates to content
Nest expanders within expanders
To see examples visit Storybook
<ns-expander><h3 slot="heading">Can I manage my account online?</h3><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>
Does it live in a panel?
Does it live inside other components?
✅ Yes -
What layout classes can be used?
Variants for the expander.
If true will open the expander to show the content.
Only used for skyline type
This is the heading to the anonymous content.
Defines if the expander is in an open or closed state.
Place the content of what you want to be expanded (or hidden) in this slot.
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