Layout
Structured List
Structured lists group content that is similar or related.
Status
Beta
Introduced
Interactive Demo
This demo allows you to preview the StructuredList 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
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
| Order | Element | Role |
|---|
| Command | Description |
|---|
| Element | Attribute | Value | Description | User Supplied |
|---|
API
StructuredList have a number of props to facilitate a variety of uses:
A StructuredList has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
A StructuredListItem has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
A StructuredListCell 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 |
|---|