ns-expander
#
IntroductionExpanders 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.
#
Content guidanceKey | Field type | Guidelines |
---|---|---|
A | Heading | This is the heading to the anonymous content. When the heading is clicked the component opens to reveal the content. |
B | Content | Expander can accommodate multiple paragraph slots, these should be concise, using sub-headings to split large paragraphs. Can contain bold copy <b> , inline links <a> , and lists <ul> <ol> . We recommend to use ns-content as a container for the html content. |
#
Best practice๐ Do's | ๐ Don'ts |
---|---|
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 |
Use a coloured expander to draw attention to a promotion in an expander on a product card | Use multiple coloured expanders on one page |
Use a coloured expander to draw attention to a warning message. Use ns-highlighter or ns-skyline instead. |
#
Usage#
Component placementThe ns-expander component can be used in the following components:
#
SpecificationAttribute | Type | Default | Options | Description |
---|---|---|---|---|
type | string | standard | skyline , standard | Variants for the expander. |
open | string | false | true , false | If true will open the expander to show the content. |
icon | string | info , warning . See ns-icon component | Only use for a type of skyline | |
colour | string | yellow | Sets the colour for the heading - Only use for a type of standard |
Slots | Type |
---|---|
heading | h tag |
anonymous | ns-content or html content |
#
Specification notes#
Heading- This is the heading to the anonymous content.
#
Open- Defines if the expander is in an open or closed state.
#
Anonymous- Place the content of what you want to be expanded (or hidden) in this slot.
Design Tokens
You can change the branded look and feel of the ns-expander by modifying these options in the design tokens.
Read more about design tokens in our getting started guide.
{
"background-color": "#FFFFFF",
"color": "#333F48",
"focus-outline-color": " #FFDD57",
"border-top-color": "#C8C9C7",
"icon": {
"spacer": {
"outside-top": "0.75rem"
}
},
"heading": {
"typography": "heading-5",
"open-background-color": "#F7F7F7",
"hover-background-color": "#F7F7F7",
"spacer": {
"inside-top": "1rem",
"inside-right": "1rem",
"inside-bottom": "1rem",
"inside-left": "1rem"
}
},
"open-close-icon": {
"spacer": {
"outside-top": "0.75rem",
"outside-right": "1rem"
}
},
"panel": {
"typography": "p-small",
"spacer": {
"inside-top": "1rem",
"inside-right": "1rem",
"inside-bottom": "1rem",
"inside-left": "1rem"
}
},
"yellow": {
"background-color": "#FFC72C",
"color": "#333F48",
"focus-outline-color": " #005EB8",
"heading-hover-background-color": "#FFC72C"
}
}
#
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!