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

Variant

Background color

Clickable list items

Examples

Simple list

Data list

With ellipsis

Props

List

name
type
default
variant
'clear' | 'border' | 'stripe'
'stripe'
columns
(string | number)[]
gap
ResponsiveType
<string | number>
htmlTag
string
backgroundColor
string
children
React.ReactNode

ListRow

name
type
default
padding
ResponsiveType
<string | number>
paddingTop
ResponsiveType
<string | number>
paddingBottom
ResponsiveType
<string | number>
paddingLeft
ResponsiveType
<string | number>
paddingRight
ResponsiveType
<string | number>
paddingY
ResponsiveType
<string | number>
paddingX
ResponsiveType
<string | number>
height
ResponsiveType
<string | number>
minHeight
ResponsiveType
<string | number>
maxHeight
ResponsiveType
<string | number>
backgroundColor
string
className
string
htmlTag
string
children
React.ReactNode
onClick
React.ReactEventHandler
href
string