New

Timeline

Timeline is a new component for showing posts in a left-right alternate order. It consists of 4 classes:

  • .timeline: The main wrapper class.
  • .timeline-post: Each one of the posts in your timeline.
  • .timeline-post-marker: Inside .timeline-post, this class is the 'dot' that connects to the main center line.
  • .timeline-post-content: Inside .timeline-post, the container where you can put any content and style it however you want.

Available variables:

  • $timeline-bg: The color of the lines.
  • $timeline-post-margin-top: The spacing between posts.

Parachuting like a pro

John Williams Aug 13, 2020

Top 10 waterfalls

John Williams 15 Nov, 2020

Become a professional photographer

John Williams 11 Jul, 2020

Top 10 beaches to visit

John Williams Aug 13, 2020
<div class="timeline py-5">
  <div class="timeline-post">
    <div class="timeline-post-marker"></div>

    <div class="timeline-post-content">
      Post content goes here
    </div>
  </div>

  <div class="timeline-post">
    <div class="timeline-post-marker"></div>

    <div class="timeline-post-content">
      Post content goes here
    </div>
  </div>

  <div class="timeline-post">
    <div class="timeline-post-marker"></div>

    <div class="timeline-post-content">
      Post content goes here
    </div>
  </div>

  <div class="timeline-post">
    <div class="timeline-post-marker"></div>

    <div class="timeline-post-content">
      Post content goes here
    </div>
  </div>
</div>