Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

Playground

Layout recipes
Showcase

List

Usage Guidelines

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

With padding

With padding and height

With minHeight and maxHeight

<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

stripe

border

clear

<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

Row

<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

With onClick

With href

<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

Use system audio

Highlight mouse clicks The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.

Recording countdown

<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

Ryozoryozo@email.comAdmin

Hikaruhikaru@email.comAdmin

Yutsukoyutsuko@email.comAdmin

() => {
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

Ellipsis with utility class — The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.

Content

Ellipsis with Text component — The textures generated by Clouds are extremely thick, partly because of the large number of concurrent grains (up to 60), partly because of a built-in allpass diffuser and reverberator, smearing the shortest transient into a wash of noise - giving the illusion of an even larger number of simultaneous grains.

Content

<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>