Newskit Logo
About

Layout

Structured List

Structured lists group content that is similar or related.

structured-list-demo-image

Status

Beta

Introduced

v3.3.0
View code

Status

Beta

Introduced

Interactive Demo

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

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

Anatomy

Structure Lists contain three required elements.

States

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

Base

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

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

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

Disabled

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 structured 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 an ist 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. 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. On MD> breakpoints, the content of the third cell align to the top.

Accessibility Considerations

Structured List

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

API

StructuredList have a number of props to facilitate a variety of uses:

StructuredList

A StructuredList has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
StructuredListItem

A StructuredListItem has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
StructuredListCell

A StructuredListCell 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?