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

With padding
With padding and height
With minHeight and maxHeight

Variant

stripe
stripe
stripe
border
border
border
clear
clear
clear

Background color

Row
Row
Row
Row

Clickable list items

With onClick
With href

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

Data list

Ryozoryozo@email.comAdmin
Hikaruhikaru@email.comAdmin
Yutsukoyutsuko@email.comAdmin

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

Props

List

prop
type
default
required
variant
oneOf: 'clear', 'border', 'stripe'
'stripe'
columns
array
gap
oneOfType
number
string
htmlTag
string
backgroundColor
string

ListRow

prop
type
default
required
padding
oneOfType
number
string
paddingTop
oneOfType
number
string
paddingBottom
oneOfType
number
string
paddingLeft
oneOfType
number
string
paddingRight
oneOfType
number
string
paddingY
oneOfType
number
string
paddingX
oneOfType
number
string
height
oneOfType
number
string
minHeight
oneOfType
number
string
maxHeight
oneOfType
number
string