List

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<List> <List.Item>List item</List.Item> <List.Item>List item</List.Item> <List.Item>List item</List.Item> </List>

<List>
  <List.Item>List item</List.Item>
  <List.Item>List item</List.Item>
  <List.Item>List item</List.Item>
</List>

Introduction

import { List } from '@telus-uds/components-base'

List component displays an unordered list.

Guidance

• showDivider props display a divider between items
• List item accepts the following properties:
  • icon an SVG icon
  • iconSize defines the icon size in pixels
  • iconColor for a different color, by default use color defined on palette
  • title prop can be used to display a list item heading above the children
• List item also accepts "Typography" or any other children components

Accessibility

List and List.Item adopt the semantics of ul and li respectively.

Props

Name	Type	Default	Description
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details
children	custom
showDivider	bool		In case it is not the last item allow display divider