HTML
<article class="bg-white center mw5 ba b--black-10 mv4">
<div class="pv2 ph3">
<h1 class="f6 ttu tracked">Daily News Co.</h1>
</div>
<img src="/img/cat-720.jpg" class="w-100 db" alt="Cat yawning">
<div class="pa3">
<a href="#" class="link dim lh-title">15 things every cat owner should know</a>
<small class="gray db pv2">AMP - <time>6 hours ago</time></small>
</div>
</article>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.db {
display: block;
}
.tracked {
letter-spacing: .1em;
}
.lh-title {
line-height: 1.25;
}
.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;
}
.mw5 {
max-width: 16rem;
}
.w-100 {
width: 100%;
}
.gray {
color: #777;
}
.bg-white {
background-color: #fff;
}
.pa3 {
padding: 1rem;
}
.pv2 {
padding-top: .5rem;
padding-bottom: .5rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.mv4 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.ttu {
text-transform: uppercase;
}
.f6 {
font-size: .875rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
.dim {
opacity: 1;
transition: opacity .15s ease-in;
}
.dim:hover, .dim:focus {
opacity: .5;
transition: opacity .15s ease-in;
}
.dim:active {
opacity: .8;
transition: opacity .15s ease-out;
}