Numbered Circle List
Used to display numbers in a circle.
sdlawrence.com
A numbered list using H tags and paragraph within a DIV:
1This is step number one
Objectively empower dynamic vortals before cross-platform sources.
2This is step number two
Objectively empower dynamic vortals before cross-platform sources.
3This is step number three
Objectively empower dynamic vortals before cross-platform sources.
HTML
<div class="number-step">
<h4><span>1</span>This is step number one</h4>
<p>Objectively empower dynamic vortals before cross-platform sources. </p>
<h4><span>2</span>This is step number two</h4>
<p>Objectively empower dynamic vortals before cross-platform sources. </p>
<h4><span>3</span>This is step number three</h4>
<p>Objectively empower dynamic vortals before cross-platform sources. </p>
</div>
CSS
/* NUMBERED CIRCLE LIST
================================================== */
.number-step {
font-size: 16px;
line-height: 1;
margin-bottom: 15px;
}
.number-step h4 {
margin-top: 10px;
margin-bottom: 10px;
}
.number-step h4 span {
display: inline-block;
color: #fff;
background-color: #1BBC9B;
font-weight: bold;
font-size: 0.8em;
text-align: center;
border-radius: 0.8em;
line-height: 1.6em;
width: 1.6em;
margin-right: 5px;
}
.number-step p {
margin-left: 40px;
}
Share this Post