Skip to content
Nucleus Docs

Expander

<ns-expander>
Overview Guidance Implementation

Overview

A component to show and hide content related to heading.

Examples

Configure

Guidance

Implementation

Placement

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

  • <ns-accordion>
  • <ns-skyline>
  • <ns-card>
  • <ns-content>
  • <ns-product-card>
  • <ns-selector>

Specification

Attributes

colour

Property
colour
Description
The colour of the expander.
Type
yellow
Default

icon

Property
icon
Type
string
Default

open

Property
open
Description
Whether the expander is open.
Type
boolean
Default
false

type

Property
type
Description
The type of the expander.
Type
standard skyline
Default
standard

Slots

SlotPermitted tagsDescription
heading<h3> <h4> The heading of the expander.
Anonymous slot<p> Anonymous slot for content.

Events

NameDescription
expander-toggleDispatched when the expander is toggled.

This page covers most of the ways you can use ns-expander. Please reach out to us if you are unsure about a potential use. Here are some useful links to related content: