Vertical Timeline

A responsive vertical timeline layout with icons and example media queries.

Blueprint_TimelineStyle

This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list.

The HTML

<ul class="cbp_tmtimeline">
	<li>
		<time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time>
		<div class="cbp_tmicon cbp_tmicon-phone"></div>
		<div class="cbp_tmlabel">
			<h2>Ricebean black-eyed pea</h2>
			<p>Winter purslane...</p>
		</div>
	</li>
	<li>
		<time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>4/11/13</span> <span>12:04</span></time>
		<div class="cbp_tmicon cbp_tmicon-screen"></div>
		<div class="cbp_tmlabel">
			<h2>Greens radish arugula</h2>
			<p>Caulie dandelion maize...</p>
		</div>
	</li>
	<li>
		<time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>4/13/13</span> <span>05:36</span></time>
		<div class="cbp_tmicon cbp_tmicon-mail"></div>
		<div class="cbp_tmlabel">
			<h2>Sprout garlic kohlrabi</h2>
			<p>Parsnip lotus root...</p>
		</div>
	</li>
	<li>
		<time class="cbp_tmtime" datetime="2013-04-15 13:15"><span>4/15/13</span> <span>13:15</span></time>
		<div class="cbp_tmicon cbp_tmicon-phone"></div>
		<div class="cbp_tmlabel">
			<h2>Watercress ricebean</h2>
			<p>Peanut gourd nori...</p>
		</div>
	</li>
	<li>
		<time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time>
		<div class="cbp_tmicon cbp_tmicon-earth"></div>
		<div class="cbp_tmlabel">
			<h2>Courgette daikon</h2>
			<p>Parsley amaranth tigernut...</p>
		</div>
	</li>
</ul>

The CSS

@font-face {
	font-family: 'ecoico';
	src:url('../fonts/timelineicons/ecoico.eot');
	src:url('../fonts/timelineicons/ecoico.eot?#iefix') format('embedded-opentype'),
		url('../fonts/timelineicons/ecoico.woff') format('woff'),
		url('../fonts/timelineicons/ecoico.ttf') format('truetype'),
		url('../fonts/timelineicons/ecoico.svg#ecoico') format('svg');
	font-weight: normal;
	font-style: normal;
} /* Made with http://icomoon.io/ */

.cbp_tmtimeline {
	margin: 30px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
} 

/* The line */
.cbp_tmtimeline:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	background: #afdcf8;
	left: 20%;
	margin-left: -10px;
}

.cbp_tmtimeline > li {
	position: relative;
}

/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
	display: block;
	width: 25%;
	padding-right: 100px;
	position: absolute;
}

.cbp_tmtimeline > li .cbp_tmtime span {
	display: block;
	text-align: right;
}

.cbp_tmtimeline > li .cbp_tmtime span:first-child {
	font-size: 0.9em;
	color: #bdd0db;
}

.cbp_tmtimeline > li .cbp_tmtime span:last-child {
	font-size: 2.9em;
	color: #3594cb;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
	color: #6cbfee;
}

/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
	margin: 0 0 15px 25%;
	background: #3594cb;
	color: #fff;
	padding: 2em;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.4;
	position: relative;
	border-radius: 5px;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
	background: #6cbfee;
}

.cbp_tmtimeline > li .cbp_tmlabel h2 { 
	margin-top: 0px;
	padding: 0 0 10px 0;
	border-bottom: 1px solid rgba(255,255,255,0.4);
}

/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #3594cb;
	border-width: 10px;
	top: 10px;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
	border-right-color: #6cbfee;
}

/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
	width: 40px;
	height: 40px;
	font-family: 'ecoico';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 1.4em;
	line-height: 40px;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	color: #fff;
	background: #46a4da;
	border-radius: 50%;
	box-shadow: 0 0 0 8px #afdcf8;
	text-align: center;
	left: 20%;
	top: 0;
	margin: 0 0 0 -25px;
}

.cbp_tmicon-phone:before {
	content: "e000";
}

.cbp_tmicon-screen:before {
	content: "e001";
}

.cbp_tmicon-mail:before {
	content: "e002";
}

.cbp_tmicon-earth:before {
	content: "e003";
}

/* Example Media Queries */
@media screen and (max-width: 65.375em) {

	.cbp_tmtimeline > li .cbp_tmtime span:last-child {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 47.2em) {
	.cbp_tmtimeline:before {
		display: none;
	}

	.cbp_tmtimeline > li .cbp_tmtime {
		width: 100%;
		position: relative;
		padding: 0 0 20px 0;
	}

	.cbp_tmtimeline > li .cbp_tmtime span {
		text-align: left;
	}

	.cbp_tmtimeline > li .cbp_tmlabel {
		margin: 0 0 30px 0;
		padding: 1em;
		font-weight: 400;
		font-size: 95%;
	}

	.cbp_tmtimeline > li .cbp_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #3594cb;
		top: -20px;
	}

	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
		border-right-color: transparent;
		border-bottom-color: #6cbfee;
	}

	.cbp_tmtimeline > li .cbp_tmicon {
		position: relative;
		float: right;
		left: auto;
		margin: -55px 5px 0 0px;
	}	
}

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 43

Comments are closed.
  1. Great., Mary Lou. I am working at a workshop timeline for teaching children and so I will use it for the website.

  2. “The main structure of the timeline is an unordered list.”

    Seeing that this is a timeline, semantically speaking, shouldn’t the list be an ordered list?

    Great tutorial as always. Codrops Rules!!!!!!!!!!!!!!!

  3. Really nice work! If you want to take a bit further, it might be nice to add an animated pointer of sorts that follows the scrolling page down the timeline, locking into place at each entry. 🙂

  4. It would be more semantic to use :before pseudo elements instead of the empty divs for the icons

    .cbp_tmtimeline > li .cbp_tmlabel:before {
    // copy the rules from .cbp_tmicon
    // adjust top/left positioning accordingly
    }

    • In this case I prefer to have an empty division for the icons because it gives me more control over the element. Using the pseudo-element would make it relative to the .cbp_tmlabel which I don’t really want in this layout. Cheers, ML

  5. Brilliant! But in the demo I’m not seeing the icons for each date, just the first one. I am however seeing each on the mobile width.

    • Same here! I’d love to be able to see all the icons 🙁 Otherwise it’s awesome!

    • Great job!
      Same here, that would be really great to have different icon for different entry.

  6. Add position: relative to the LI element or the icons cover one another. Beautiful demo though.

    • Added! It was working in the first version because of some default styles but now it’s really needed. Thanks a lot for your feedback, cheers, ML

  7. Mary Lou, I swear to god you can read my mind. For the last 3 weeks I have been trying to make a vertical timeline that is responsive and about a week ago I finally designed one. Than I jumped on here and you made one that puts mine to shame.

    I end up usually using at least one of your tutorials on all of my clients. Thank you so much for your hard-work and your amazing talent.

  8. Nice work!

    I adopted this for my personal blog (http://www.rbraga.com) with few customizations; but I’m the worst web designer in the world 🙂 and if someone have a tip/suggestion for improve my customizations I thank 😀

    * sorry my english

  9. This is brilliant, i could use some techniques here to style quotes and code.

  10. Thanks for this work. Is really awesome. I will use this script in a UI.

  11. Hey Mary Lou,

    Amazing concept. Can’t wait to use it on our website for our Jekyll-powered blog. The color theme in Orange seems impossible to figure out though. Any advice on how to go about an Orange color palette? Cheers!

  12. This is fantastic – such a useful resource, thanks for publishing!

    Just a quick note on the demo for desktop, the line:

    cbp_tmtimeline > li {
    position: relative;
    }

    seems to be missing..

  13. Buenas

    Solucione el problema del CSS con:

    .cbp_tmtimeline > li .cbp_tmicon {
    position: relative;

    y

    .cbp_tmtimeline > li .cbp_tmlabel {
    margin: -41px 0 15px 25%;

    espero sea de ayuda 😉

  14. hello,

    nice work, however like amny said tou need to change to : cbp_tmtimeline > li {
    position: relative;
    }

    also can you make a litle color picker with this like with red, green, blue etc

  15. is possible to use small images instead of that icons, that i dont know where to find them or make other that i need can we use a image instead with the width of this one’s is comments here for eg?

  16. Nice timeline but i have to point that the in the demo don’t have the position relative applied.

  17. Thanks! This is what I was looking for and you saved me a lot of time. Trying to make this by myself would have taken a lot longer

  18. Is it possible to make this with a seekbar?
    (I mean if I try to tap/drag & move the round shaped phone icon on the line, then it would scroll the timeline up/down.)

  19. /* The icons */
    .cbp_tmtimeline > li .cbp_tmicon {
    width: 40px;
    height: 40px;
    font-family: ‘ecoico’;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 1.4em;
    line-height: 40px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    color: #fff;
    background: #46a4da;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #afdcf8;
    text-align: center;
    left: 20%;
    top: 0;
    margin: 0 0 0 -25px;
    }

    change the position to “relative” instead of absolute.

    • .cbp_tmtimeline > li{
      position: relative;
      }

      this piece of code seemed to be missing from the demo css. If you add this the icons will align with the text boxes.

  20. Remember. If you have some problem with the icon, try to REMOVE the {TOP:0;} on the .cbp_tmtimeline > li .cbp_tmicon. This fixed the problem with the bullet repetition.