List
Live demo
Default
- LabelText Example
- Label with is rather rather rather rather rather rather rather rather rather rather rather rather rather rather longText Example with is rather rather rather rather rather rather rather rather rather rather rather rather rather rather long
- LabelText Example
Display
LabelText Example
Label which is rather rather rather rather rather rather rather rather longText Example which is rather rather rather rather long- Document title
Uploader
- uploadingfilename.jpg
- filename.jpg
Timeline
- You need to wrap text explicitly in the timeline variant
You need to wrap text explicitly
in the timeline variant because you can add as much text or styling as you like
- Lists are a continuous group of text or images. They are composed of items which are represented by icons and text. The list item component is used to display a list of user details. Item 3 Lists are a continuous group of text or images. They are composed of items which are represented by icons and text. The list item component is used to display a list of user details.
- You could for example add a link
- labelThere is also a label prop like other list items
Design
Usage
Lists are a continuous group of text or images. They are composed of items which are represented by icons and text. The list item component is used to display a list of user details.
Anatomy
The anatomy depends of the list item variant. There are 3 variants: default, display and timeline.
Placement
This component sits in the review page on the onboarding flow and also as a way of displaying content inside the drawers.
Accessibility
The ‘Text’ style colour used on entered text in the field, is comfortably within the AAA contrast ratio for legibility.
Code
/import { List } from '@shieldpay/bumblebee/list'; import { Text } from '@shieldpay/bumblebee/text'; <Heading>Unordered Default List</Heading> <List size="small"> <List.Item label="First" LeftIcon={<EmptyCheckIcon />} > Unordered List item </List.Item> <List.Item label="Second" RightIcon={<ChevronRightIcon />} > Unordered List item </List.Item> </List> <Heading>Ordered Timeline List</Heading> <List ordered> <List.Item variant="timeline" LeftIcon={<EmptyCheckIcon />} > <Text>First</Text> <Text>Ordered List item</Text> </List.Item> <List.Item variant="timeline"> <Text>Ordered List item<Text> </List.Item> </List>