Step

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

↓

使用例

Step.1

手順1のタイトル

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

Step.2

手順2のタイトル

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

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

Step.3

手順3のタイトル

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

リサイズ可能

<Stack g='40'>
  <Step>
    <StepHead tag='h3' num='1'>
      <>手順1のタイトル</>
    </StepHead>
    <StepBody>
      <Dummy lang='ja' length='s' />
    </StepBody>
  </Step>

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

  <Step>
    <StepHead tag='h3' num='2'>
      <>手順2のタイトル</>
    </StepHead>
    <StepBody>
      <Dummy lang='ja' length='s' />
      <Dummy lang='ja' length='codes' />
    </StepBody>
  </Step>

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

  <Step>
    <StepHead tag='h3' num='3'>
      <>手順3のタイトル</>
    </StepHead>
    <StepBody>
      <Dummy lang='ja' length='l' />
    </StepBody>
  </Step>
</Stack>