Simple timeline module. Left out the javascript for now as it's not a great example; all it was doing was adding the 'is-shown' class when timeline items came into view. (note to self: port to a proper repo/add to lib later)

0-timeline.html

<div class="timeline-block">

	<ol class="timeline">

		<li class="timeline-item timeline-item-minor right">
			<p>2000: Founding of Industry Ventures (now $1bn manager)</p>
		</li>

		<li class="timeline-item timeline-item-major">
			2000: $40M AUM
		</li>

		<li class="timeline-item timeline-item-minor left">
			<p>2003: IC spins off from Industry Ventures</p>
		</li>

		<li class="timeline-item timeline-item-major">
			2004: $300M AUM
		</li>

		<li class="timeline-item timeline-item-minor right">
			<p>2004: Acquisition of Osborne Partners from Northern Trust and merger with Silicon Valley Bank's wealth group</p>
		</li>

		<li class="timeline-item timeline-item-minor left">
			<p>2006: Founding of industrial real estate platform and raise of first two funds (2006/2007)</p>
		</li>

		<li class="timeline-item timeline-item-major">
			2009: $1B AUM
		</li>

		<li class="timeline-item timeline-item-minor right">
			<p>2011: Addition of real asset strategies (Maritime and Renewable Energy)</p>
		</li>

		<li class="timeline-item timeline-item-minor left">
			<p>2012/13: Opened Lagos Nigeria office; internet infrastructure strategy; opened Caribbean based energy &amp; real estate groups.</p>
		</li>

		<li class="timeline-item timeline-item-major">
			2013: $1.4B AUM
		</li>

		<li class="timeline-item timeline-item-minor right">
			<p>2013: Energy development co &amp; engineering groups: VFlare &amp; Northstar</p>
		</li>

	</ol>

</div>

1-timeline.scss

/**
timeline.scss

markup structure:
div.timeline-block
	ul.timeline
		li.timeline-item.timeline-item-major[.is-shown -- added via javascript]
			"one line of text"
		li.timeline-item.timeline-item-minor[.left|.right][.is-shown -- added via javascript]
			p
				"a block of text"
*/


.timeline-block {
	width:em(700px);
	margin-left:em(-50px);
	margin-top:2em;
	background-image:url("dot.svg");
	background-repeat:repeat-y;
	background-position:center;
	position:relative;
	&:after {
		content: "▼"; // arrow at the bottom of the timeline
		position:absolute;
		bottom:-7px;
		left:50%;
		margin-left:-7px;
	}
}

.timeline, .timeline-item {
	display: block;
	list-style: none;
}

.timeline {
	-webkit-perspective:800px;
	-moz-perspective:800px;
	perspective:800px;
	overflow:hidden;
	&:before {
		content:"▲"; // arrow at the top
		position:absolute;
		left:50%; margin-left:-7px;
		top:-7px;
	}

}

.timeline-item {
	-webkit-transform-origin:top;
	-webkit-transform-style:preserve3d;
	-webkit-backface-visibility:hidden;
}

.timeline-item-major { // blue blocks inherit from 'label' class defined earlier
	@extend .label;
	width: 40%;
	margin:0.75em auto;
	padding:0.75em 0;
	top:3px;
	position:relative;
	text-align: center;
	clear:both;
}

.timeline-item-minor {
	width:50%;
	clear:both;
	position:relative;
	background-image:url("dot.svg");
	background-repeat:repeat-x;
	background-position:center center;
	&:after { 
		content: ""; 
		display:block; 
		float:none; 
		clear:both; 
	}
	&.is-shown {
		&:before {
			content:" • ";
			position:absolute;
			right:-5px;
			font-size:30px;
			top:50%;
			margin-top:-17px; 
		}
	}


	p {
		width:75%;
		text-align:left;
		margin:2em 0;
		background:white;
	}

	&.left {
		float:left;
		p { padding-right:1em; }
	}
	&.right {
		float:right;
		&:before { 
			left:-5px; 
			right: auto; 
		}
		p { 
			margin-left:25%; 
			padding-left:1em; 
		}
	}
}

2-timeline.css

/* how the above scss got compiled, ultimately */


.timeline-block {
  width: 46.66667em;
  margin-left: -3.33333em;
  margin-top: 2em;
  background-image: url("dot.svg");
  background-repeat: repeat-y;
  background-position: center;
  position: relative; 
}
 
  .timeline-block:after {
    content: "▼";
    position: absolute;
    bottom: -7px;
    left: 50%;
    margin-left: -7px; 
  }

.timeline, .timeline-item {
  display: block;
  list-style: none; 
}

.timeline {
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  overflow: hidden; 
}
  .timeline:before {
    content: "▲";
    position: absolute;
    left: 50%;
    margin-left: -7px;
    top: -7px; 
  }

.timeline-item {
  -webkit-transform-origin: top;
  -webkit-transform-style: preserve3d;
  -webkit-backface-visibility: hidden; 
}

.timeline-item-major {
  width: 40%;
  margin: 0.75em auto;
  padding: 0.75em 0;
  top: 3px;
  position: relative;
  text-align: center;
  clear: both;
}

.timeline-item-minor {
  width: 50%;
  clear: both;
  position: relative;
  background-image: url("dot.svg");
  background-repeat: repeat-x;
  background-position: center center; 
}
  .timeline-item-minor:after {
    content: "";
    display: block;
    float: none;
    clear: both; 
  }
  .timeline-item-minor.is-shown:before {
    content: " • ";
    position: absolute;
    right: -5px;
    font-size: 30px;
    top: 50%;
    margin-top: -17px; 
  }
  
  .timeline-item-minor p {
    width: 75%;
    text-align: left;
    margin: 2em 0;
    background: white; 
  }
  
  .timeline-item-minor.left {
    float: left; 
  }
    .timeline-item-minor.left p {
      padding-right: 1em; 
    }
    
  .timeline-item-minor.right {
    float: right; 
  }
    .timeline-item-minor.right:before {
      left: -5px;
      right: auto; 
    }
    
    .timeline-item-minor.right p {
      margin-left: 25%;
      padding-left: 1em; 
    }