HTML
<main class="mw6 center">
<article>
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
<div class="dtc w3">
<img src="http://mrmrs.github.io/images/0010.jpg" class="db w-100"/>
</div>
<div class="dtc v-top pl2">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Grid Systems</h1>
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
<dl class="mt2 f6">
<dt class="clip">Price</dt>
<dd class="ml0">$75.00</dd>
</dl>
</div>
</a>
</article>
<article>
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
<div class="dtc w3">
<img src="http://mrmrs.github.io/images/0002.jpg" class="db w-100"/>
</div>
<div class="dtc v-top pl2">
<h1 class="f6 f5-ns fw6 lh-title black mv0">History of the Poster</h1>
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
<dl class="mt2 f6">
<dt class="clip">Price</dt>
<dd class="ml0">$15.00</dd>
</dl>
</div>
</a>
</article>
<article>
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
<div class="dtc w3">
<img src="http://mrmrs.github.io/images/0004.jpg" class="db w-100"/>
</div>
<div class="dtc v-top pl2">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Graphic Design in IBM: Typography, Photography, and Illustration</h1>
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
<dl class="mt2 f6">
<dt class="clip">Price</dt>
<dd class="ml0">$15.00</dd>
</dl>
</div>
</a>
</article>
<article>
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
<div class="dtc w3">
<img src="http://mrmrs.github.io/images/0006.jpg" class="db w-100"/>
</div>
<div class="dtc v-top pl2">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Fotoplakate: Von den Anfängen</h1>
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
<dl class="mt2 f6">
<dt class="clip">Price</dt>
<dd class="ml0">$15.00</dd>
</dl>
</div>
</a>
</article>
<article>
<a class="link dt w-100 bb b--black-10 pb2 mt2 dim blue" href="#0">
<div class="dtc w3">
<img src="http://mrmrs.github.io/images/0030.jpg" class="db w-100"/>
</div>
<div class="dtc v-top pl2">
<h1 class="f6 f5-ns fw6 lh-title black mv0">The Graphic Artist</h1>
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
<dl class="mt2 f6">
<dt class="clip">Price</dt>
<dd class="ml0">$15.00</dd>
</dl>
</div>
</a>
</article>
<article class="mt2">
<a class="link dt w-100 bb b--black-10 dim blue" href="#0">
<div class="dtc w3">
<img src="http://mrmrs.github.io/images/0010.jpg" class="db w-100"/>
</div>
<div class="dtc v-top pl2">
<h1 class="f6 f5-ns fw6 lh-title black mv0">A History of Visual Communication (Geschichte der visuellen Kommunikation)</h1>
<h2 class="f6 fw4 mt2 mb0 black-60">Josef Müller-Brockmann</h2>
<dl class="mt2 f6">
<dt class="clip">Price</dt>
<dd class="ml0">$15.00</dd>
</dl>
</div>
</a>
</article>
</main>
css
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.db {
display: block;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.fw4 {
font-weight: 400;
}
.fw6 {
font-weight: 600;
}
.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;
outline: 1px dotted currentColor;
}
.mw6 {
max-width: 32rem;
}
.w3 {
width: 4rem;
}
.w-100 {
width: 100%;
}
.black-60 {
color: rgba(0, 0, 0, .6);
}
.black {
color: #000;
}
.blue {
color: #357edd;
}
.pl2 {
padding-left: .5rem;
}
.pb2 {
padding-bottom: .5rem;
}
.ml0 {
margin-left: 0;
}
.mb0 {
margin-bottom: 0;
}
.mt2 {
margin-top: .5rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.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);
}
.v-top {
vertical-align: top;
}
.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;
}
@media screen and (min-width: 30em) {
.f5-ns {
font-size: 1rem;
}
}
