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

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