HTML
<article class="pa3 pa5-ns" data-name="slab-stat-large">
<h3 class="f6 ttu tracked">Today</h3>
<div class="cf">
<dl class="db dib-l w-auto-l lh-title mr6-l">
<dd class="f6 fw4 ml0">Closed Issues</dd>
<dd class="f2 f-subheadline-l fw6 ml0">1,024</dd>
</dl>
<dl class="db dib-l w-auto-l lh-title mr6-l">
<dd class="f6 fw4 ml0">Open Issues</dd>
<dd class="f2 f-subheadline-l fw6 ml0">993</dd>
</dl>
<dl class="db dib-l w-auto-l lh-title mr6-l">
<dd class="f6 fw4 ml0">Next Release</dd>
<dd class="f2 f-subheadline-l fw6 ml0">10-22</dd>
</dl>
<dl class="db dib-l w-auto-l lh-title mr6-l">
<dd class="f6 fw4 ml0">Days Left</dd>
<dd class="f2 f-subheadline-l fw6 ml0">4</dd>
</dl>
<dl class="db dib-l w-auto-l lh-title mr6-l">
<dd class="f6 fw4 ml0">Favorite Cat</dd>
<dd class="f2 f-subheadline-l fw6 ml0">All of Them</dd>
</dl>
<dl class="db dib-l w-auto-l lh-title">
<dd class="f6 fw4 ml0">App Downloads</dd>
<dd class="f2 f-subheadline-l fw6 ml0">1,200</dd>
</dl>
</div>
</article>
css
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.db {
display: block;
}
.fw4 {
font-weight: 400;
}
.fw6 {
font-weight: 600;
}
.tracked {
letter-spacing: .1em;
}
.lh-title {
line-height: 1.25;
}
.pa3 {
padding: 1rem;
}
.ml0 {
margin-left: 0;
}
.ttu {
text-transform: uppercase;
}
.f2 {
font-size: 2.25rem;
}
.f6 {
font-size: .875rem;
}
@media screen and (min-width: 30em) {
.pa5-ns {
padding: 4rem;
}
}
@media screen and (min-width: 60em) {
.dib-l {
display: inline-block;
}
.w-auto-l {
width: auto;
}
.mr6-l {
margin-right: 8rem;
}
.f-subheadline-l {
font-size: 5rem;
}
}