HTML
<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Photo of a kitty staring at you">
<h1 class="f3 mb2">Mimi W.</h1>
<h2 class="f5 fw4 gray mt0">CCO (Chief Cat Officer)</h2>
</div>
</article>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.b--black-05 {
border-color: rgba(0, 0, 0, .05);
}
.br3 {
border-radius: .5rem;
}
.br-100 {
border-radius: 100%;
}
.dib {
display: inline-block;
}
.fw4 {
font-weight: 400;
}
.h4 {
height: 8rem;
}
.mw5 {
max-width: 16rem;
}
.w4 {
width: 8rem;
}
.gray {
color: #777;
}
.bg-white {
background-color: #fff;
}
.pa2 {
padding: .5rem;
}
.pa3 {
padding: 1rem;
}
.mb2 {
margin-bottom: .5rem;
}
.mt0 {
margin-top: 0;
}
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.tc {
text-align: center;
}
.f3 {
font-size: 1.5rem;
}
.f5 {
font-size: 1rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.pa4-ns {
padding: 2rem;
}
}