Layout component will be deprecated, use Split component instead. Split component has the same features as Layout and more.

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>

Props

Layout

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

Layout.Section

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