ステップナビゲーション

一連の手続きを論理的なステップで提示して、完了までに必要な作業を俯瞰したり、進行状況を把握したりできるようにするコンポーネントです。ナビゲーションとして使用する場合もあります。

  1. 1 ステップのタイトル

    ステップの説明

  2. 2 ステップのタイトル

    ステップの説明

  3. 3 ステップのタイトル

    ステップの説明

html 
<ol class="stepper">
    <li class="stepper-step">
            <span class="stepper-header">
                <span class="stepper-number">1</span>
                <span class="stepper-title">ステップのタイトル</span>
            </span>
        <p class="stepper-description">ステップの説明</p>
    </li>
    <li class="stepper-step">
            <span class="stepper-header">
                <span class="stepper-number">2</span>
                <span class="stepper-title">ステップのタイトル</span>
            </span>
        <p class="stepper-description">ステップの説明</p>
    </li>
    <li class="stepper-step">
            <span class="stepper-header">
                <span class="stepper-number">3</span>
                <span class="stepper-title">ステップのタイトル</span>
            </span>
        <p class="stepper-description">ステップの説明</p>
    </li>
</ol>