Skip to main content

ns-expander

Introduction#

Expanders are used to show or hide content.

An expander consists of a heading and an 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.

Expanders can be used in a variety of contexts: in an accordion, in a product card, and more.

Content guidance#

In the following examples, the expander is used in an accordion and in a selector. Expander - Being used in an accordion

Expander - Being used in a selector

KeyField typeGuidelines
AHeadingThe heading is there to introduce the content placed in the expander's anonymous slot. When the heading is clicked the component opens to reveal the content.
BContentThe expander can accommodate multiple paragraphs. These should be concise, using sub-headings to split large paragraphs. It 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
Use headings, paragraphs, lists for contentUse as a solution to excessive copy on a page
Make sure the heading in the heading slot 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.

Considerations of best practice#

  • If you are using the expander in a series of product cards and you have a promotion, you can use multiple expanders on the same page to provide additional information on that promotion.
  • You can put any media inside the expanders, but be wary of the size of said media and how it will render.
  • When using multiple expanders without an accordion, consider adding a heading to introduce them. If you don't, the nearest higher-level heading preceding the expanders will be the one setting the theme.

Usage#

View example on Storybook

Component placement#

We recommend expanders to be primarily used in ns-accordion and ns-skyline.

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
EventDescription
expander-toggleWill be dispatched when expander is clicked to show/hide.

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.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.

Related links#