causeway-standard-theme/causeway/docs/components/wizard.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="wizard"></a>
      <header class="content-header">
        <h1 class="title">Wizard</h1>
      </header>

      <p>A wizard allows user to complete a large form by breaking it into logical guided process.</p><p>It indicates the user the current progress and provide links to navigate back and forth in the process.</p>
      <br/>
      <p>Example: </p>
      <ul class="wizard">
        <li class="wizard-description">Create New Widget</li>
        <li class="completed"><a href="#"><span>1</span>Step 1</a></li>
        <li class="current"><a href="#"><span>2</span>Step 2 - Selected</a></li>
        <li><a href="#"><span>3</span>Step 3</a></li>
        <li><a href="#"><span>4</span>Step 4</a></li>
      </ul>

      <div class="pull-right">
        <button class="btn btn-text">Cancel</button>
        <button class="btn btn-text">Back</button>
        <button class="btn btn-default">Next</button>
      </div>
      <br/>
      <p>Code:</p>
      <pre>
        <code>
          &lt;ul class=&quot;wizard&quot;&gt;
            &lt;li class=&quot;wizard-description&quot;&gt;Create New Widget&lt;/li&gt;
            &lt;li class=&quot;completed&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;1&lt;/span&gt;Step 1&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;2&lt;/span&gt;Step 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;3&lt;/span&gt;Step 3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;4&lt;/span&gt;Step 4&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        </code>
      </pre>

      <h2>Wizard with many steps</h2>

      <ul class="wizard">
        <li class="wizard-description">Create New Widget</li>
        <li class="current"><a href="#"><span>1</span>Step 1 - Selected</a></li>
        <li><a href="#"><span>2</span>Step 2</a></li>
        <li><a href="#"><span>3</span>Step 3</a></li>
        <li><a href="#"><span>4</span>Step 4</a></li>
        <li><a href="#"><span>5</span>Step 5</a></li>
        <li><a href="#"><span>6</span>Step 6</a></li>
        <li><a href="#"><span>7</span>Step 7</a></li>
        <li><a href="#"><span>8</span>Step 8</a></li>
        <li><a href="#"><span>9</span>Step 9</a></li>
        <li><a href="#"><span>10</span>Step 10</a></li>
        <li><a href="#"><span>11</span>Step 11</a></li>
        <li><a href="#"><span>12</span>Step 12</a></li>
        <li><a href="#"><span>13</span>Step 13</a></li>
        <li><a href="#"><span>14</span>Step 14</a></li>
      </ul>

      <ul class="wizard">
        <li class="wizard-description">Create New Widget</li>
        <li class="completed"><a href="#"><span>1</span>Step 1</a></li>
        <li class="current"><a href="#"><span>2</span>Step 2 - Selected</a></li>
        <li><a href="#"><span>3</span>Step 3</a></li>
        <li><a href="#"><span>4</span>Step 4</a></li>
        <li><a href="#"><span>5</span>Step 5</a></li>
        <li><a href="#"><span>6</span>Step 6</a></li>
        <li><a href="#"><span>7</span>Step 7</a></li>
        <li><a href="#"><span>8</span>Step 8</a></li>
        <li><a href="#"><span>9</span>Step 9</a></li>
        <li><a href="#"><span>10</span>Step 10</a></li>
        <li><a href="#"><span>11</span>Step 11</a></li>
        <li><a href="#"><span>12</span>Step 12</a></li>
        <li><a href="#"><span>13</span>Step 13</a></li>
        <li><a href="#"><span>14</span>Step 14</a></li>
      </ul>

      <ul class="wizard">
        <li class="wizard-description">Create New Widget</li>
        <li class="completed"><a href="#"><span>1</span>Step 1</a></li>
        <li class="completed"><a href="#"><span>2</span>Step 2</a></li>
        <li class="completed"><a href="#"><span>3</span>Step 3</a></li>
        <li class="completed"><a href="#"><span>4</span>Step 4</a></li>
        <li class="completed"><a href="#"><span>5</span>Step 5</a></li>
        <li class="current"><a href="#"><span>6</span>Step 6 - Selected</a></li>
        <li><a href="#"><span>7</span>Step 7</a></li>
        <li><a href="#"><span>8</span>Step 8</a></li>
        <li><a href="#"><span>9</span>Step 9</a></li>
        <li><a href="#"><span>10</span>Step 10</a></li>
        <li><a href="#"><span>11</span>Step 11</a></li>
        <li><a href="#"><span>12</span>Step 12</a></li>
        <li><a href="#"><span>13</span>Step 13</a></li>
        <li><a href="#"><span>14</span>Step 14</a></li>
        <li><a href="#"><span>15</span>Step 15</a></li>
        <li><a href="#"><span>16</span>Step 16</a></li>
      </ul>

      <ul class="wizard">
        <li class="wizard-description">Create New Widget</li>
        <li class="completed"><a href="#"><span>1</span>Step 1</a></li>
        <li class="completed"><a href="#"><span>2</span>Step 2</a></li>
        <li class="completed"><a href="#"><span>3</span>Step 3</a></li>
        <li class="completed"><a href="#"><span>4</span>Step 4</a></li>
        <li class="completed"><a href="#"><span>5</span>Step 5</a></li>
        <li class="completed"><a href="#"><span>6</span>Step 6</a></li>
        <li class="completed"><a href="#"><span>7</span>Step 7</a></li>
        <li class="completed"><a href="#"><span>8</span>Step 8</a></li>
        <li class="completed"><a href="#"><span>9</span>Step 9</a></li>
        <li class="completed"><a href="#"><span>10</span>Step 10</a></li>
        <li class="completed"><a href="#"><span>11</span>Step 11</a></li>
        <li class="completed"><a href="#"><span>12</span>Step 12</a></li>
        <li class="completed"><a href="#"><span>13</span>Step 13</a></li>
        <li class="current"><a href="#"><span>14</span>Step 14 - Selected</a></li>
      </ul>
    </section>
  </div>
</div>