Spacer

スペースを確保するためのモジュールです。

構造

div.l--spacer[aria-hidden="true"]

プロパティ	説明
`w`	`width`の値
`h`	`height`の値

<Space>では、wとhに対してSPACEトークンの値が使えます。

import { Spacer } from 'lism-css';

↓

<Spacer>の使用例

Content…

リサイズ可能

<p>Content...</p>
<Spacer h="100px" />
<p>Content...</p>

↓

SPACEトークンを使う例

Box

リサイズ可能

<p>Box</p>
<Spacer h='60' />
<p>Box</p>

↓

横方向のスペーサーの例

Box

リサイズ可能

<Flex g={10}>
  <Box p='30' bd>Box</Box>
  <Spacer w='40' />
  <Box p='30' bd>Box</Box>
  <Box p='30' bd>Box</Box>
</Flex>