HTML
<a class="db center mw5 black link dim"
title="Frank Ocean's Blonde on Apple Music"
href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">
<img class="db ba b--black-10"/
alt="Frank Ocean Blonde Album Cover"
src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
>
<dl class="mt2 f6 lh-copy">
<dt class="clip">Title</dt>
<dd class="ml0 fw9">Blonde</dd>
<dt class="clip">Artist</dt>
<dd class="ml0 gray">Frank Ocean</dd>
</dl>
</a>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.db {
display: block;
}
.fw9 {
font-weight: 900;
}
.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;
}
.mw5 {
max-width: 16rem;
}
.black {
color: #000;
}
.gray {
color: #777;
}
.ml0 {
margin-left: 0;
}
.mt2 {
margin-top: .5rem;
}
.f6 {
font-size: .875rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
.clip {
position: fixed !important;
_position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}
.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;
}
