コンテンツにスキップ
Lism CSS

Steps

手順を示すレイアウトの構築例を紹介します。

Examples

Section titled “Examples”
↓
例
Step.1

手順1のタイトル

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

Step.2

手順2のタイトル

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのようなLiberroyの取り組み。

Step.3

手順3のタイトル

ロレム・イプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。

リサイズ可能 
<Stack g='40'>
  <Stack g='20'>
    <Stack g='20' ai='center' fxd={[null, 'row']}>
      <Lism d='in-flex' lh='xs' px='20' py='5' ai='end' ff='mono' fs='italic' bd bdrs='99'>
        <span className='-fz:2xs'>Step.</span>
        <span className='-fz:l -lh:1'>1</span>
      </Lism>
      <Lism f='inherit' fz='l' fw='bold'>
        <HTML.p>手順1のタイトル</HTML.p>
      </Lism>
    </Stack>
    <Flow flow='s' px='5'>
      <Dummy lang='ja' length='s' />
    </Flow>
  </Stack>


  <Center>
    <Icon icon={ArrowFatLinesDownIcon} weight='fill' fz='2xl' />
  </Center>


  <Stack g='20'>
    <Stack g='20' ai='center' fxd={[null, 'row']}>
      <Lism d='in-flex' lh='xs' px='20' py='5' ai='end' ff='mono' fs='italic' bd bdrs='99'>
        <span className='-fz:2xs'>Step.</span>
        <span className='-fz:l -lh:1'>2</span>
      </Lism>
      <Lism f='inherit' fz='l' fw='bold'>
        <HTML.p>手順2のタイトル</HTML.p>
      </Lism>
    </Stack>
    <Flow flow='s' px='5'>
      <Dummy lang='ja' length='s' />
      <Dummy lang='ja' length='codes' />
    </Flow>
  </Stack>


  <Center>
    <Icon icon={ArrowFatLinesDownIcon} weight='fill' fz='2xl' />
  </Center>


  <Stack g='20'>
    <Stack g='20' ai='center' fxd={[null, 'row']}>
      <Lism d='in-flex' lh='xs' px='20' py='5' ai='end' ff='mono' fs='italic' bd bdrs='99'>
        <span className='-fz:2xs'>Step.</span>
        <span className='-fz:l -lh:1'>3</span>
      </Lism>
      <Lism f='inherit' fz='l' fw='bold'>
        <HTML.p>手順3のタイトル</HTML.p>
      </Lism>
    </Stack>
    <Flow flow='s' px='5'>
      <Dummy lang='ja' length='l' />
    </Flow>
  </Stack>
</Stack>