Skip to main content

ns-expander

Introduction#

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.

Content guidance#

Expander - Being used in an Accordion

KeyField typeGuidelines
AHeadingThis is the heading to the anonymous content. When the heading is clicked the component opens to reveal the content.
BContentExpander 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 modalUse to hide important information (such as caveats)
Use headings, paragraphs, lists for contentUse as a solution to excessive copy on a page
Make sure heading relates to contentNest expanders within expanders
Use a coloured expander to draw attention to a promotion in an expander on a product cardUse 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#

View example on Storybook

Component placement#

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

Specification#

AttributeTypeDefaultOptionsDescription
typestringstandardskyline, standardVariants for the expander.
openstringfalsetrue, falseIf true will open the expander to show the content.
iconstringinfo, warning. See ns-icon componentOnly use for a type of skyline
colourstringyellowSets the colour for the heading - Only use for a type of standard
SlotsType
headingh tag
anonymousns-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",
  "heading": {
    "typography": "heading-5",
    "open-background-color": "#F7F7F7",
    "hover-background-color": "#F7F7F7"
  },
  "panel": {
    "typography": "p-small"
  },
  "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!

Related links#