HTML
<ul class="list pl0 mt0 measure center">
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10">
<img class="w2 h2 w3-ns h3-ns br-100" src="http://tachyons.io/img/avatar-mrmrs.jpg" />
<div class="pl3 flex-auto">
<span class="f6 db black-70">Mrmrs</span>
<span class="f6 db black-70">Medium Hexagon, LLC</span>
</div>
<div>
<a href="tel:" class="f6 link blue hover-dark-gray">+1 (999) 555-5555</a>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10">
<img class="w2 h2 w3-ns h3-ns br-100" src="http://tachyons.io/img/avatar-jxnblk.jpg" />
<div class="pl3 flex-auto">
<span class="f6 db black-70">Jxnblk</span>
<span class="f6 db black-70">Large Circle, Inc</span>
</div>
<div>
<a href="tel:" class="f6 link blue hover-dark-gray">+1 (999) 555-5555</a>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10">
<img class="w2 h2 w3-ns h3-ns br-100" src="http://tachyons.io/img/avatar-jasonli.jpg" />
<div class="pl3 flex-auto">
<span class="f6 db black-70">Jason Li</span>
<span class="f6 db black-70">Little Blue Square, Inc</span>
</div>
<div>
<a href="tel:" class="f6 link blue hover-dark-gray">+1 (999) 555-5555</a>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10">
<img class="w2 h2 w3-ns h3-ns br-100" src="http://tachyons.io/img/avatar-yavor.jpg" />
<div class="pl3 flex-auto">
<span class="f6 db black-70">Yavor</span>
<span class="f6 db black-70">Large Circle, Inc</span>
</div>
<div>
<a href="tel:" class="f6 link blue hover-dark-gray">+1 (999) 555-5555</a>
</div>
</li>
</ul>
css
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.br-100 {
border-radius: 100%;
}
.db {
display: block;
}
.flex {
display: flex;
}
.flex-auto {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
.items-center {
align-items: center;
}
.h2 {
height: 2rem;
}
.lh-copy {
line-height: 1.5;
}
.link {
text-decoration: none;
transition: color .15s ease-in;
}
.link:link, .link:visited {
transition: color .15s ease-in;
}
.link:hover {
transition: color .15s ease-in;
}
.link:active {
transition: color .15s ease-in;
}
.link:focus {
transition: color .15s ease-in;
outline: 1px dotted currentColor;
}
.list {
list-style-type: none;
}
.w2 {
width: 2rem;
}
.black-70 {
color: rgba(0, 0, 0, .7);
}
.blue {
color: #357edd;
}
.hover-dark-gray:hover {
color: #333;
}
.hover-dark-gray:focus {
color: #333;
}
.pa3 {
padding: 1rem;
}
.pl0 {
padding-left: 0;
}
.pl3 {
padding-left: 1rem;
}
.mt0 {
margin-top: 0;
}
.f6 {
font-size: .875rem;
}
.measure {
max-width: 30em;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.h3-ns {
height: 4rem;
}
.w3-ns {
width: 4rem;
}
}
@media screen and (min-width: 60em) {
.ph0-l {
padding-left: 0;
padding-right: 0;
}
}
Mrmrs Medium Hexagon, LLC
Jxnblk Large Circle, Inc
Jason Li Little Blue Square, Inc
Yavor Large Circle, Inc