Steps

dabblet.css

/* Steps */
.steps {
	margin: 25px 50px;
}
.step {
	float: left;
	width: 0;
	text-align: center;
}

.ext {
	height: 25px;
	float: left;
	border-bottom: 5px solid #ddd;
}
.steps-count-4 .ext{
	width: 33.333%;
}
.circle {
    position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-left: -25px;
	background: #aaa;
	line-height: 50px;
	vertical-align: middle;
}
.description {
	width: 100px;
	margin-left: -50px;
	background: #eee
}

dabblet.html

<div class="steps steps-count-4">
    <div class="step"><div class="circle">n</div><div class="description">description</div></div>
    <div class=ext></div>
    <div class="step"><div class="circle">n</div><div class="description">description</div></div>
    <div class=ext></div>
    <div class="step"><div class="circle">n</div><div class="description">description</div></div>
    <div class=ext></div>
    <div class="step"><div class="circle">n</div><div class="description">description</div></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}