Stack (l--stack)

l--stack is a class that arranges multiple elements vertically using a Flex layout.

CSS

.l--stack {
  display: flex;
  flex-direction: column;
}

Lism Component

Import

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

Usage

Basic usage

↓

Simple <Stack> example

Content

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

Center-aligned layout

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>