bulma-timeline

This is a fork for the Bulma extension to display a timeline for implementation into Bulma.styl.

Preview

Usage

<div class="timeline">
  <div class="timeline-item" id="timeline-example-1">
    <div class="timeline-left icon-lg">
      <a href="#timeline-example-1" class="timeline-icon"></a>
    </div>
    <div class="timeline-content">
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <div>
              <p class="heading">January 2017</p>
              <p>Timeline content - Can include any HTML element</p>
            </div>
          </div>
          <div class="level-right">
            <p class="level-item"><button class="button is-primary is-small">View</button></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="timeline-item" id="timeline-example-2">
    <div class="timeline-left">
      <a href="#timeline-example-2" class="timeline-icon icon-lg">
          <i class="icon fa fa-check"></i>
        </a>
    </div>
    <div class="timeline-content">
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <div>
              <p class="heading">February 2017</p>
              <p>Timeline content - Can include any HTML element</p>
            </div>
          </div>
          <div class="level-right">
            <p class="level-item"><button class="button is-primary is-small">View</button></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="timeline-item" id="timeline-example-3">
    <div class="timeline-left">
      <a href="#timeline-example-3" class="timeline-icon icon-lg">
          <i class="icon fa fa-check"></i>
        </a>
    </div>
    <div class="timeline-content">
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <div>
              <p class="heading">March 2017</p>
              <p>Timeline content - Can include any HTML element</p>
            </div>
          </div>
          <div class="level-right">
            <p class="level-item"><button class="button is-primary is-small">View</button></p>
          </div>
        </div>
      </div>
    </div>
  </div>