Lism CSS
検索

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='in-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 tag='h3' fz='l'>
        <Fragment>手順1のタイトル</Fragment>
      </Lism>
    </Stack>
    <Flow flow='s' px='15'>
      <Dummy lang='ja' length='s' />
    </Flow>
  </Stack>


  <Stack g='20'>
    <Stack g='15' ai='center' fxd={[null, 'row']}>
      <Lism d='in-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 tag='h3' fz='l'>
        <Fragment>手順2のタイトル</Fragment>
      </Lism>
    </Stack>
    <Flow flow='s' px='15'>
      <Dummy lang='ja' length='s' />
      <Dummy lang='ja' length='codes' />
    </Flow>
  </Stack>


  <Stack g='20'>
    <Stack g='15' ai='center' fxd={[null, 'row']}>
      <Lism d='in-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 tag='h3' fz='l'>
        <Fragment>手順3のタイトル</Fragment>
      </Lism>
    </Stack>
    <Flow flow='s' px='15'>
      <Dummy lang='ja' length='l' />
    </Flow>
  </Stack>
</Stack>

© Lism CSS. All rights reserved.

目次