Stack

A component that arranges multiple elements vertically using a Flex layout.

CSS

Import

import { Stack } from 'lism-css/react';

Props

The Props available on <Flex> can be used.

Usage

↓

Simple <Stack> example

Content

<Stack g='20'>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</Stack>

Center-aligned layout using Stack

The combination of <Stack ai="center"> (.l--stack.-ai:center) enables what Every Layout calls “intrinsic centering” — content is centered only when it is short enough.

↓

Intrinsic centering

Heading

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

リサイズ可能

<Stack ai='center' g='20' p='30'>
  <h3>Heading</h3>
  <p>...</p>
  <p>...</p>
</Stack>