Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Toast Tooltip
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

List

ContentContentContent

Usage

import { List, ListRow } from '@loomhq/lens'

<List columns={['4fr', '1fr']} gap="large">
  <ListRow paddingX="medium" paddingY="small">
    <div>Content</div>
    <div>Content</div>
  </ListRow>
  <ListRow paddingX="medium" paddingY="small">
    <div>Content</div>
    <div>Content</div>
  </ListRow>
</List>

Padding and height

<List>
  <ListRow padding="large">
    <Container borderSide="all">With padding</Container>
  </ListRow>
  <ListRow paddingX="large" paddingY="small" height={6}>
    <Container borderSide="all">With padding and height</Container>
  </ListRow>
  <ListRow minHeight={6} maxHeight={8}>
    <Container borderSide="all">With minHeight and maxHeight</Container>
  </ListRow>
</List>

<List>
  <ListRow padding="large">
    <Container borderSide="all">With padding</Container>
  </ListRow>
  <ListRow paddingX="large" paddingY="small" height={6}>
    <Container borderSide="all">With padding and height</Container>
  </ListRow>
  <ListRow minHeight={6} maxHeight={8}>
    <Container borderSide="all">With minHeight and maxHeight</Container>
  </ListRow>
</List>

Variant

<Arrange columns="repeat(3, 1fr)" gap="medium">
  <List columns={['1fr']} variant="stripe">
    <ListRow padding="small"><Text>stripe</Text></ListRow>
    <ListRow padding="small"><Text>stripe</Text></ListRow>
    <ListRow padding="small"><Text>stripe</Text></ListRow>
  </List>
  <List columns={['1fr']} variant="border">
    <ListRow padding="small"><Text>border</Text></ListRow>
    <ListRow padding="small"><Text>border</Text></ListRow>
    <ListRow padding="small"><Text>border</Text></ListRow>
  </List>
  <List columns={['1fr']} variant="clear">
    <ListRow padding="small"><Text>clear</Text></ListRow>
    <ListRow padding="small"><Text>clear</Text></ListRow>
    <ListRow padding="small"><Text>clear</Text></ListRow>
  </List>
</Arrange>

<Arrange columns="repeat(3, 1fr)" gap="medium">
  <List columns={['1fr']} variant="stripe">
    <ListRow padding="small"><Text>stripe</Text></ListRow>
    <ListRow padding="small"><Text>stripe</Text></ListRow>
    <ListRow padding="small"><Text>stripe</Text></ListRow>
  </List>
  <List columns={['1fr']} variant="border">
    <ListRow padding="small"><Text>border</Text></ListRow>
    <ListRow padding="small"><Text>border</Text></ListRow>
    <ListRow padding="small"><Text>border</Text></ListRow>
  </List>
  <List columns={['1fr']} variant="clear">
    <ListRow padding="small"><Text>clear</Text></ListRow>
    <ListRow padding="small"><Text>clear</Text></ListRow>
    <ListRow padding="small"><Text>clear</Text></ListRow>
  </List>
</Arrange>

Background color

<List>
  <ListRow padding="small">Row</ListRow>
  <ListRow padding="small">Row</ListRow>
  <ListRow padding="small" backgroundColor="highlight">Row</ListRow>
  <ListRow padding="small" backgroundColor="offWhite">Row</ListRow>
</List>

<List>
  <ListRow padding="small">Row</ListRow>
  <ListRow padding="small">Row</ListRow>
  <ListRow padding="small" backgroundColor="highlight">Row</ListRow>
  <ListRow padding="small" backgroundColor="offWhite">Row</ListRow>
</List>

Clickable list items

<List columns={['1fr']}>
  <ListRow
    paddingX="medium"
    paddingY="small"
    onClick={() => console.log('clicked')}
  >
    <div>With onClick</div>
  </ListRow>
  <ListRow
    paddingX="medium"
    paddingY="small"
    htmlTag="a"
    href="https://www.loom.com"
  >
    <div>With href</div>
  </ListRow>
</List>

<List columns={['1fr']}>
  <ListRow
    paddingX="medium"
    paddingY="small"
    onClick={() => console.log('clicked')}
  >
    <div>With onClick</div>
  </ListRow>
  <ListRow
    paddingX="medium"
    paddingY="small"
    htmlTag="a"
    href="https://www.loom.com"
  >
    <div>With href</div>
  </ListRow>
</List>

Examples

Simple list

<List columns={['1fr', 'auto']} gap="medium">
  <ListRow padding="small">
    <Text hasEllipsis>Use system audio</Text>
    <Switch />
  </ListRow>
  <ListRow padding="small">
    <Text hasEllipsis>Highlight mouse clicks {demoText.long}</Text>
    <Switch />
  </ListRow>
  <ListRow padding="small">
    <Text hasEllipsis>Recording countdown</Text>
    <Switch />
  </ListRow>
</List>

<List columns={['1fr', 'auto']} gap="medium">
  <ListRow padding="small">
    <Text hasEllipsis>Use system audio</Text>
    <Switch />
  </ListRow>
  <ListRow padding="small">
    <Text hasEllipsis>Highlight mouse clicks {demoText.long}</Text>
    <Switch />
  </ListRow>
  <ListRow padding="small">
    <Text hasEllipsis>Recording countdown</Text>
    <Switch />
  </ListRow>
</List>

Data list

() => {
const listItems = [
  {title: 'Ryozo', email: 'ryozo@email.com', role: 'Admin', actionText: 'Edit'},
  {title: 'Hikaru', email: 'hikaru@email.com', role: 'Admin', actionText: 'Edit'},
  {title: 'Yutsuko', email: 'yutsuko@email.com', role: 'Admin', actionText: 'Edit'},
]
return (
  <List columns={['2fr', '1fr', '1fr']} gap="medium">
    {listItems.map((listItem, index) => (
      <ListRow key={index} paddingX="medium" paddingY="small">
        <Text>{listItem.title}</Text>
        <Text>{listItem.email}</Text>
        <Text>{listItem.role}</Text>
      </ListRow>
    ))}
  </List>
)}

() => {
const listItems = [
  {title: 'Ryozo', email: 'ryozo@email.com', role: 'Admin', actionText: 'Edit'},
  {title: 'Hikaru', email: 'hikaru@email.com', role: 'Admin', actionText: 'Edit'},
  {title: 'Yutsuko', email: 'yutsuko@email.com', role: 'Admin', actionText: 'Edit'},
]
return (
  <List columns={['2fr', '1fr', '1fr']} gap="medium">
    {listItems.map((listItem, index) => (
      <ListRow key={index} paddingX="medium" paddingY="small">
        <Text>{listItem.title}</Text>
        <Text>{listItem.email}</Text>
        <Text>{listItem.role}</Text>
      </ListRow>
    ))}
  </List>
)}

With ellipsis

<List columns={['4fr', '1fr']} gap="large">
  <ListRow paddingX="medium" paddingY="small">
    <div className="ellipsis">Ellipsis with utility class — {demoText.long}</div>
    <div>Content</div>
  </ListRow>
  <ListRow paddingX="medium" paddingY="small">
    <Text hasEllipsis>Ellipsis with Text component — {demoText.long}</Text>
    <div>Content</div>
  </ListRow>
</List>

<List columns={['4fr', '1fr']} gap="large">
  <ListRow paddingX="medium" paddingY="small">
    <div className="ellipsis">Ellipsis with utility class — {demoText.long}</div>
    <div>Content</div>
  </ListRow>
  <ListRow paddingX="medium" paddingY="small">
    <Text hasEllipsis>Ellipsis with Text component — {demoText.long}</Text>
    <div>Content</div>
  </ListRow>
</List>

Props

List

name

type

default

variant

'clear' | 'border' | 'stripe'

'stripe'

columns

(string | number)[]

gap

ResponsiveType

responsive

htmlTag

string

backgroundColor

string

children

React.ReactNode

ListRow

name

type

default

padding

ResponsiveType

responsive

paddingTop

ResponsiveType

responsive

paddingBottom

ResponsiveType

responsive

paddingLeft

ResponsiveType

responsive

paddingRight

ResponsiveType

responsive

paddingY

ResponsiveType

responsive

paddingX

ResponsiveType

responsive

height

ResponsiveType

responsive

minHeight

ResponsiveType

responsive

maxHeight

ResponsiveType

responsive

backgroundColor

string

className

string

htmlTag

string

children

React.ReactNode

onClick

React.ReactEventHandler

href

string

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Playground

List

Usage

Padding and height

Variant

Background color

Clickable list items

Examples

Simple list

Data list

With ellipsis

Props

List

ListRow