Grains are seeded randomly, periodically, or whenever the module receives a trigger.
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.
Grains are seeded randomly, periodically, or whenever the module receives a trigger.

Usage

import { Layout } from '@loomhq/lens'
<Layout>
<Layout.Section>Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>

Alignment

Use alignment prop to align children in relation to each other.

A
A
A
A

Gap and dimensions

Use gap prop on <Layout /> to create space between Layout.Sections. Use width and maxWidth props on <Layout.Section /> to specify dimensions.

See also Responsive props

Semantic spacing value

nameunitrempx
xsmall0.50.25rem4px
small10.5rem8px
medium21rem16px
large31.5rem24px
xlarge52.5rem40px
xxlarge84rem64px
<Layout gap="medium">
<Layout.Section width="xlarge">Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>

Number value

The number value will be mutiplied by 8. For example, if we pass 3 it will result in 24px(3*8). The result is converted to REMs, so the final value is 1.5rem (24/16).

<Layout gap={4}>
<Layout.Section width={20}>Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>

String value

Any valid CSS measurement value, for example, auto, 50%, or 10vw.

<Layout gap="1px">
<Layout.Section width="50%">Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>

Responsive props

Use an array with a maximum of 4 values that will be paired with the 4 breakpoints. The array items use the same type of values as their corresponding non-responsive values.

breakpointmin width
xsmall31em (496px)
small48em (768px)
medium64em (1024px)
large75em (1200px)

Gap and dimensions

<Layout gap={['xsmall','small','medium','large']}>
<Layout.Section width={['50%','50%', 15, 20]}>Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>

Alignment

<Layout alignment={['start', 'center', 'end', 'center']}>
<Layout.Section>Content</Layout.Section>
<Layout.Section>Content</Layout.Section>
</Layout>

Examples

Text with ellipsis

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.

Components in row

Some text
Some text

Columns

Equally distributed columns

Column
Column
Column

Column with fixed width and column with remaining width

8rem
Fill remaining width

Responsive

Responsive columns (Resize the browser)

A
A
A
A

Props

Layout

prop
type
default
required
alignment
oneOfType
oneOf: : 'start', 'center', 'end'
array
gap
oneOfType
number
string
array
children
node
required

Layout.Section

prop
type
default
required
width
oneOfType
number
string
array
maxWidth
oneOfType
number
string
array
children
node
required