Newskit Logo
View Github

Layout

Structured List

The Structured List is a layout component that groups similar or related content.

Status

Beta

Introduced

v3.5.0

View code

Status

Beta

Introduced

v3.5.0

Interactive Demo

This demo allows you to preview the Structured List component, its variations, and configuration options.

Divider
1import React from 'react';
2import { StructuredList } from 'newskit';
3
4export default () => <StructuredList />;
5

Anatomy

The Structured List contains three required elements and one optional element.

ItemNameDescriptionComponentOptional

Options

The Structured List has options that can be used to provide an appropriate experience for different use cases.

List item and cell layouts

The Structured List Cell can be configured to achieve multiple layouts by using nested grids and the pullRight prop.

List item dividers

Dividers can applied to the bottom of List items to provide visual separation, set via the divider prop.

Interactive items

Structured List items can be set to be interactive by supplying a link for an item.

If a HREF is passed to the component then a chevron is rendered in the last cell and the item becomes interactive (to indicate that the item is interactive the stylePreset and cursor is set to pointer).

List item and cell layouts

The Structured List Cell can be configured to achieve multiple layouts by using nested grids and the pullRight prop.

List item dividers

Dividers can applied to the bottom of List items to provide visual separation, set via the divider prop.

Interactive items

Structured List items can be set to be interactive by supplying a link for an item.

If a HREF is passed to the component then a chevron is rendered in the last cell and the item becomes interactive (to indicate that the item is interactive the stylePreset and cursor is set to pointer).

States

When a Structured List is interactive, it has states including, base, hover, active, disabled, and focus.

Base

The Structured List has a base state. This is the base style of the list item before it has been interacted with by a user.

Hover

The Structured List has a hover state. The style of the list item changes to visually communicate and provide feedback to the user that the list item is an interactive element.

Active

The Structured List has an active state. The style of the list item changes to visually communicate and provide feedback to the user that the Tab item has been interacted with.

Disabled

The Structured List in a disabled state communicates that a list item exists, but is not available to the user in that scenario. When the user’s cursor hovers over a list item in a disabled state, the cursor shows as not-allowed. Disabled list items are often used to maintain layout consistency and communicate that a list item may become available if another condition has been met.

Focus

Structured List in a focus state communicates that a user has highlighted a list item, using an input method such as a keyboard or voice.

Behaviours

The following guidance describes how a Structured List behaves.

Alignment

On XS> breakpoints, the content of the third cell align to the vertical center, and the content of the second cell moves below the first cell.

On MD> breakpoints, the content of the third cell align to the top.

Alignment

On XS> breakpoints, the content of the third cell align to the vertical center, and the content of the second cell moves below the first cell.

On MD> breakpoints, the content of the third cell align to the top.

Accessibility Considerations

The Structured List has the following accessibility considerations:

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

API

Structured List

The Structured List has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
Structured List Item

The Structured List Item has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
Structured List Cell

The Structured List Cell has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?