A list of read-only fields displaying information with optional images or icons for the user.
list {
title = "Transactions"
items {
item {
title = "Starbucks"
description = "Coffee"
supportingValues {
value = "+100 GBP"
subvalue = "Refund"
}
media = Media.Avatar.build {
content { uri { uri = "urn:wise:icons:takeaway" } }
}
}
item {
title = "BBC"
description = "TV License"
supportingValues {
value = "-5 GBP"
subvalue = "Payment Success"
}
media = Media.Avatar.build {
content {
uri {
uri = "urn:wise:icons:person"
badgeUri = "urn:wise:icons:bills"
}
}
accessibilityDescription = "An image of the BBC"
}
}
item {
title = "Pineapple Pizza Express"
description = "Pizza"
supportingValues {
value = "-13 GBP"
subvalue = "Transaction pending"
}
media = Media.Avatar.build {
content { text { text = "PE" } }
}
}
}
}When to use
- When each item represents an entity with meaning to the user.
- When building experiences to manage/edit a list of entities, for example a list of saved bank cards.
When not to use
- When each item represents a choice, rather than an existing entity, consider using a Decision Layout instead.
- If the purpose of the list is to provide a summary of information which the user needs to check, consider using a Review Layout instead.
| Property | Type | Required | Description |
|---|---|---|---|
analyticsId | String | No | An optional identifier to be used in analytics tracking. |
callToAction | ListLayout.CallToAction | No | A titled call to action which can be performed by the user. |
control | String | No | Specify a particular control to use to represent the layout. If the control is unknown, it will be ignored. |
items | Array<ListLayout.Item> | Yes | Array of items. |
margin | Size | No | The vertical margin to apply after this component. Defaults to md. |
| Array<String> | No | An optional list of identifiers used to configure renderers.
|
title | String | No | The user-facing title. |
type | String | Yes | It must be list. |
A single entry in a List Layout.
| Property | Type | Required | Description |
|---|---|---|---|
| No | Additional information to be displayed to the user, with optional interactivity.
| |
| String | No | An optional identifier to be used in analytics tracking.
|
| No | A titled call to action which can be performed by the user.
| |
description | String | No | A user-facing description. |
icon | Icon | No | An icon to represent the item. |
image | Image | No | An image to represent the option. |
| No | An alert that will be displayed inline with the item.
| |
| No | A media object (avatar, icon, image) which the client can use to represent this item.
| |
| String | No | A user-facing subtitle. ⚠️ Deprecated - Please use 'description' instead |
| String | No | A user-facing subvalue. ⚠️ Deprecated - Please use 'supportingValues' instead |
| No | An object containing two strings representing two user-facing values. One being clearly more important than the other.
| |
| String | No | An optional identifier to be used in custom renderers.
⚠️ Deprecated - Please use 'tags' instead |
| Array<String> | No | An optional list of identifiers used to configure renderers.
|
title | String | No | A user-facing title. |
| String | No | A user-facing value. ⚠️ Deprecated - Please use 'supportingValues' instead |
The call to action configuration used by List Layout. For example, it could be used to provide an edit action.
| Property | Type | Required | Description |
|---|---|---|---|
accessibilityDescription | String | No | A description of the call to action to be used by screen readers. |
behavior | Behavior | Yes | The Behavior that should be performed when user interacts with call to action. |
| No | The semantics of the call-to-action button. Defaults to neutral.
| |
title | String | Yes | A user-facing title. |