Steps
このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。
手順を示すレイアウトの構築例を紹介します。
Examples
↓
例
Step.1
手順1のタイトル
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。
Step.2
手順2のタイトル
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。
ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。
Step.3
手順3のタイトル
ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。
リサイズ
<Stack g="40"> <Stack g="20"> <Stack g="15" ai="center" fxd={[null, 'row']}> <Lism d="inline-flex" lh="1" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99"> <span className="-fz:xs">Step.</span> <span className="-fz:l">1</span> </Lism> <Lism as="h3" fz="l"> <Fragment>手順1のタイトル</Fragment> </Lism> </Stack> <Flow flow="s" px="15"> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p> </Flow> </Stack>
<Stack g="20"> <Stack g="15" ai="center" fxd={[null, 'row']}> <Lism d="inline-flex" lh="1" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99"> <span className="-fz:xs">Step.</span> <span className="-fz:l">2</span> </Lism> <Lism as="h3" fz="l"> <Fragment>手順2のタイトル</Fragment> </Lism> </Stack> <Flow flow="s" px="15"> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p> <p>ロレム・イプサムの<i>座り雨</i>、それは<a href='###'>静かに歩く仮の言葉</a>です。長いあいだ積み重ねられてきた<code>Liberroy</code>と<code>Foog</code>の取り組み」は、私たちに<b>一定の示唆</b>を与えてくれます。</p> </Flow> </Stack>
<Stack g="20"> <Stack g="15" ai="center" fxd={[null, 'row']}> <Lism d="inline-flex" lh="1" g="5" px="15" py="10" ai="center" c="base" bgc="text" fs="italic" bdrs="99"> <span className="-fz:xs">Step.</span> <span className="-fz:l">3</span> </Lism> <Lism as="h3" fz="l"> <Fragment>手順3のタイトル</Fragment> </Lism> </Stack> <Flow flow="s" px="15"> <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。</p> </Flow> </Stack></Stack>