Process

Liander Bootstrap custom component. Process Overview component

On this page

Example!

Process Overview is meant to be used as a page filling component. See the Process example page for a working example.

Usage

The Process Overview starts with a process-header and optionally process-intro.

Process Line

The process-line is used to indicate where the items are in the flow of the Process Overview. The process-start contains an indicator (e.g. process-circle-start) witch will follow the process-line when scrolling.

Item Group

The process-item-group groups process-item giving the option to style the different process-item-groups. Optionally an process-content can be added before a process-item.

Item

The process-item exists of a process-line-index and process-card. The process-line-index creates an element on the process-line. The process-card is used to create the item’s content. Optionally a process-card-extend can be added as a trigger to show the full content in e.g. a Modal (like in the example page) Adding reversie to a process-item will show the item on the left side of the process-line in Desktop Mode

<div class="process-overview">

  <div class="process-header">
    <div class="process-intro">
      ...
    </div>
  </div>

  <div class="container">
    <div class="process-line">
      <div class="process-start">
        <div class="process-circle-start">
          ...
        </div>
      </div>
    </div>
  </div>

  <div class="process-item-group">
    <div class="container">
      <div class="process-line">

        <div class="process-content">
          ...
        </div>

        <div class="process-item">
          <div class="process-line-index">
            <div class="process-circle process-index-number">1</div>
          </div>
          <div class="process-card">
            <div class="arrow"></div>
            <div class="process-card-header">
              ...
            </div>
            <div class="process-card-section">
              <div class="process-card-body">
                ...
              </div>
            </div>
            <div class="process-card-footer">
              ...
            </div>
            <div class="process-card-extend">
              <div class="process-card-extend-toggle">
                ...
              </div>
            </div>
          </div>
        </div>

        <div class="process-item reverse">
          <div class="process-line-index">
            <div class="process-circle process-index-number">2</div>
          </div>
          <div class="process-card">
            <div class="arrow"></div>
            <div class="process-card-header">
              ...
            </div>
            <div class="process-card-section">
              <div class="process-card-body">
                ...
              </div>
            </div>
            <div class="process-card-footer">
              ...
            </div>
            <div class="process-card-extend">
              <div class="process-card-extend-toggle">
                ...
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="process-item-group">
    ...
  </div>

</div>