コンテンツにスキップ
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='c' fxd={[null, 'row']}>
      <Lism d='if' lh='xs' px='20' py='5' ai='e' ff='mono' fs='i' 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'>
        <Text>手順1のタイトル</Text>
      </Lism>
    </Stack>
    <Lism isFlow='s' mis='5'>
      <Dummy lang='ja' length='s' />
    </Lism>
  </Stack>


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


  <Stack g='20'>
    <Stack g='20' ai='c' fxd={[null, 'row']}>
      <Lism d='if' lh='xs' px='20' py='5' ai='e' ff='mono' fs='i' 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'>
        <Text>手順2のタイトル</Text>
      </Lism>
    </Stack>
    <Lism isFlow='s' mis='5'>
      <Dummy lang='ja' length='s' />
      <Dummy lang='ja' length='codes' />
    </Lism>
  </Stack>


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


  <Stack g='20'>
    <Stack g='20' ai='c' fxd={[null, 'row']}>
      <Lism d='if' lh='xs' px='20' py='5' ai='e' ff='mono' fs='i' 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'>
        <Text>手順3のタイトル</Text>
      </Lism>
    </Stack>
    <Lism isFlow='s' mis='5'>
      <Dummy lang='ja' length='l' />
    </Lism>
  </Stack>
</Stack>