Details

The details component is an expandable section for supporting information that is not needed by most users.

Demo

{{> eds-c-details}}

When to use this component

Use the details component to let users reveal a piece of supporting information when they need it.

When not to use this component

Do not use the details component to hide information that the majority of your users need.

If you need to create a set of expandable content sections, do not use several details components. Use the accordion component instead.

How it works

The details component uses <details> and <summary> HTML elements.

Installation

To install the components, go to the get started guide for developers.

To use the Details component, enter the following command in your Terminal:

npm install @springernature/elements

Then, import the style of the Details component into your scss file:

@import '../node_modules/@springernature/elements/eds-c-details';

Configuration

To view all the configurations for this component, go to the schema.

Open

You can make a details component open on page load by applying open: true to the data used to compile its template. This adds the open attribute to its details element.

Heading level

You should add heading semantics to the details component by including the headingLevel property. Add a number of type string to for the heading level you want.

For example, with headingLevel: ‘2’, the markup for the title becomes:

<div class="c-details__header" role="heading" aria-level="2">
    ...
</div>

Help improve this page