List

The List component provides patterns to display items in a structured way including grouped lists, description lists, columned lists, and list headers.

When to use this component

Use the List component to:

• display a set of related items with consistent spacing and optional dividers (eds-c-list-group)
• present pairs such as article metadata (eds-c-list-description)
• lay out a long list across multiple columns to save vertical space (eds-c-list-columned)
• introduce a list with a keyline header (eds-c-list-header)

When not to use this component

Do not use the List component:

• for navigation, use the Navigation component instead
• when items need a sequential or numbered order that carries meaning, use a native <ol> element
• for a single item

How it works

Installation

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

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

npm install @springernature/elements

Then, import the styles of the List component into your scss file:

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

Variants

Grouped list (eds-c-list-group)

Use eds-c-list-group on a <ul> element to display a list with consistent line height. Apply spacing modifier classes to control the padding on each eds-c-list-group__item.

<ul class="eds-c-list-group {{group.modifiers}}">
	{{#each group.items}}
		<li class="eds-c-list-group__item">{{this}}</li>
	{{/each}}
</ul>

Spacing modifiers:

Style modifiers:

Description list (eds-c-list-description)

Use eds-c-list-description on a <dl> element to display pairs such as article metadata. Each eds-c-list-description__item wraps a <dt> (eds-c-list-description__term) and 1 or more <dd> elements (eds-c-list-description__details).

<dl class="eds-c-list-description">
	{{#each description.items}}
		<div class="eds-c-list-description__item">
			<dt class="eds-c-list-description__term">{{term}}</dt>
			<dd class="eds-c-list-description__details">{{details}}</dd>
		</div>
	{{/each}}
</dl>

Columned list (eds-c-list-columned)

Apply eds-c-list-columned to a list to automatically distribute its items across 2 columns at the sm breakpoint and 3 columns at the md breakpoint. This is useful for long lists of short items such as subject categories.

<ul class="eds-c-list-columned">
	{{#each columned.items}}
		<li>{{this}}</li>
	{{/each}}
</ul>

List header (eds-c-list-header)

Use eds-c-list-header as a styled heading element above a list. It renders as a flex row with a bottom keyline border, and is typically used to label a grouped list section or show a count alongside a title.

<div class="eds-c-list-header">
	<span>{{header.title}}</span>
	<span>{{header.count}}</span>
</div>
<ul class="eds-c-list-group {{header.modifiers}}">
	{{#each header.items}}
		<li class="eds-c-list-group__item"><a href="{{url}}">{{text}}</a></li>
	{{/each}}
</ul>

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the Ask Elements Teams channel.