We are working on something new! Check it out here!

Timeline

Vertical timeline

Modifiers

  • .timeline-side - Places image div closest to the timeline marker

Example

  • Sweet roll brownie

    Oat cake jelly-o wafer cake candy canes. Sweet pastry dragée biscuit dragée lemon drops I love.

  • Sugar plum

    Biscuit jujubes candy canes bear claw donut. I love tootsie roll I love cheesecake apple pie lollipop jelly. Marshmallow marzipan lemon drops dessert.

  • Fruitcake

    I love apple pie fruitcake. Fruitcake I love danish toffee jelly beans croissant candy canes caramels. Biscuit wafer icing gingerbread sweet dragée sesame snaps.

  • Cheesecake chocolate cake

    Chocolate bar jujubes pastry halvah. Jujubes soufflé cotton candy. Liquorice bear claw carrot cake. Sesame snaps dessert sesame snaps donut soufflé danish bonbon. Toffee powder macaroon tiramisu apple pie sweet donut.

<div class="grid">
	<div class="grid-md-12">
     <div class="box-content">
		<ul class="timeline">
			<li class="timeline__event">
				<div class="timeline__date hidden-xs hidden-sm">
					<span>24 Dec 2010</span>
				</div>
				<div class="timeline__marker">
					<div class="timeline__date hidden-md hidden-lg">
						<span>24 Dec</span><span>2010</span>
					</div>
				</div>
				<div class="timeline__content timeline-side">
					<div class="grid">
						<div class="grid-md-5 grid-lg-4">
							<i class="pricon pricon-5x pricon-twitter-square"></i>
						</div>
						<div class="grid-md-7 grid-lg-8">
							<h3>Sweet roll brownie</h3>
							<p>Oat cake jelly-o wafer cake candy canes. Sweet pastry dragée biscuit dragée lemon drops I love.</p>
						</div>
					</div>
				</div>
			</li>
			<li class="timeline__event">
				<div class="timeline__date hidden-xs hidden-sm">
					<span>5 Jan 2011</span>
				</div>
				<div class="timeline__marker">
					<div class="timeline-date hidden-md hidden-lg">
						<span>5 Jan</span><span>2011</span>
					</div>
				</div>
				<div class="timeline__content timeline-side">
					<div class="grid">
						<div class="grid-md-5 grid-lg-4">
							<i class="pricon pricon-5x pricon-facebook-square"></i>
						</div>
						<div class="grid-md-7 grid-lg-8">
							<h3>Sugar plum</h3>
							<p>Biscuit jujubes candy canes bear claw donut. I love tootsie roll I love cheesecake apple pie lollipop jelly. Marshmallow marzipan lemon drops dessert.</p>
						</div>
					</div>
				</div>
			</li>
			<li class="timeline__event">
				<div class="timeline-date hidden-xs hidden-sm">
					<span>9 Jul 2015</span>
				</div>
				<div class="timeline__marker">
					<div class="timeline-date hidden-md hidden-lg">
						<span>9 Jul</span><span>2015</span>
					</div>
				</div>
				<div class="timeline-content">
					<div class="grid">
						<div class="grid-md-12">
							<img src="https://unsplash.it/400/250/?image=823" class="image">
						</div>
						<div class="grid-md-12">
							<h3>Fruitcake</h3>
							<p>I love apple pie fruitcake. Fruitcake I love danish toffee jelly beans croissant candy canes caramels. Biscuit wafer icing gingerbread sweet dragée sesame snaps.</p>
						</div>
					</div>
				</div>
			</li>
			<li class="timeline__event">
				<div class="timeline__date hidden-xs hidden-sm">
					<span>25 Aug 2017</span>
				</div>
				<div class="timeline__marker">
					<div class="timeline__date hidden-md hidden-lg">
						<span>25 Aug</span><span>2017</span>
					</div>
				</div>
				<div class="timeline__content">
					<div class="grid">
						<div class="grid-md-12">
							<h3>Cheesecake chocolate cake</h3>
							<p>Chocolate bar jujubes pastry halvah. Jujubes soufflé cotton candy. Liquorice bear claw carrot cake.
	                		Sesame snaps dessert sesame snaps donut soufflé danish bonbon. Toffee powder macaroon tiramisu apple pie sweet donut.</p>
	                	</div>
	                </div>
	            </div>
	        </li>
		</ul>
	    </div>
	</div>
</div>
Source file: ~/source/sass/components/timeline/timeline.scss