Lists
Lists are a way of displaying separate items of the same type of information in the form of text of images. The items of a list are contained within a row. Within this item/row the content can vary depending on the use case. Some lists contain considerable amounts of information whereas others merely contain a single-line of text.
Anatomy
In Leviy we know are two types of lists; grouped lists and separated lists. Depending on the use case these two types of lists can be styled differently. Lists consist of vertical aligned rows which each contain items of content. Each row has identical height and type of content. If a list with two-line primary text contains rows where the extra information is blank, the composition of the content stays the same and a ‘-‘ symbol is used to indicate the empty state. This way rows in a list will always adopt the same height.
As an exception row may contain a third line of text with a leading icon. This text should be styled the same as the text on the second line.
Grouped lists
Grouped lists are lists where the rows are grouped together and do not contain any spacing between them. Grouped lists can contain the following content types; single-line or two-line primary text and supporting visuals such as icons and avatars. Rows of a grouped list always contain a chevron icon to indicate navigation.
Separated lists
Separated lists are lists with a fixed spacing between the rows and an indicator. separated lists can contain the following content types: single-line or two-line primary text, meta data and supporting visuals such as status indicators, icons and avatars. Rows of a separated list do not contain a chevron icon as click leads to an action or to opening a file.
States
Rows of grouped lists can have 2 different states: enabled and focused.
Rows of separated lists have 3 different states: muted, enabled and focused.
Templates
Grouped list
{% include '@leviy-components/list/grouped_list.html.twig' with {
'items': [
{ ... }, { ... }, { ... }
]
} %}Separated list
{% include '@leviy-components/list/separated_list.html.twig' with {
'items': [
{ ... }, { ... }, { ... }
]
} %}Parameters
| Key | Description | Default | Type |
|---|---|---|---|
items |
Array with items that you want to list | [] |
array |
items[].title |
Title of the list item | null | string |
items[].subtitle |
Subtitle of the list item | null | string |
items[].state |
Interaction state of the list item | null | [focused, muted] |
Grouped list
| Key | Description | Default | Type |
|---|---|---|---|
items[].prefix |
Preferred prefix for list item | null | object |
items[].prefix.icon |
Icon that should be prefixed | null | string; name of the icon |
items[].suffix |
Preferred suffix for list item | { icon: 'chevron_right' } |
object |
items[].suffix.icon |
Icon that should be suffixed | chevron |
string; name of the icon |
Separated list
| Key | Description | Default | Type |
|---|---|---|---|
items[].indicator |
Color of the indicator. Any theme color name can be used. | null | string; name of the theme color |
items[].info |
Preferred info for list item | null | object |
items[].info.text |
Text that should be displayed | null | string |
items[].info.icon |
Icon that should be prefixed | null | string; name of the icon |
items[].info.color |
Color of the icon and text. Any theme color name can be used. | null | string; name of the theme color |
items[].label |
Visible above the title | null | string |