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

Key	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#

View example on Storybook

Component placement#

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

Specification#

Attribute	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!