HTML
<article class="pa3 pa5-ns">
<h1 class="f4 bold center mw6">Cats</h1>
<ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
<li class="ph3 pv3 bb b--light-silver">Mackeral Tabby</li>
<li class="ph3 pv3 bb b--light-silver">Burmese</li>
<li class="ph3 pv3 bb b--light-silver">Orange Tabby</li>
<li class="ph3 pv3 bb b--light-silver">Maine Coon</li>
<li class="ph3 pv3 bb b--light-silver">Siamese</li>
<li class="ph3 pv3 bb b--light-silver">Scottish Fold</li>
<li class="ph3 pv3">American Bobtail</li>
</ul>
</article>
css
.ba {
border-style: solid;
border-width: 1px;
}
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.b--light-silver {
border-color: #aaa;
}
.br2 {
border-radius: .25rem;
}
.list {
list-style-type: none;
}
.mw6 {
max-width: 32rem;
}
.pa3 {
padding: 1rem;
}
.pl0 {
padding-left: 0;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.ml0 {
margin-left: 0;
}
.f4 {
font-size: 1.25rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.pa5-ns {
padding: 4rem;
}
}