Interactive Demo
This demo allows you to preview the Structured List component, its variations, and configuration options.
Label
A short description of the label
Label
A short description of the label
Label
A short description of the label
Anatomy
The Structured List contains three required elements and one optional element.
| Item | Name | Description | Component | Optional |
|---|
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
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
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:
| Order | Element | Role |
|---|
| Command | Description |
|---|
| Element | Attribute | Value | Description | User Supplied |
|---|
API
The Structured List has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
The Structured List Item has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
The Structured List Cell has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
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.
| Feature | Description | Status |
|---|