HTML
<div class="pa3 pa5-ns">
<ul class="list pl0 measure center">
<li class="lh-copy pv3 ba bl-0 bt-0 br-0 b--dotted b--black-30">Orange</li>
<li class="lh-copy pv3 ba bl-0 bt-0 br-0 b--dotted b--black-30">Apple</li>
<li class="lh-copy pv3 ba bl-0 bt-0 br-0 b--dotted b--black-30">Peach</li>
<li class="lh-copy pv3 ba bl-0 bt-0 br-0 b--dotted b--black-30">Grape</li>
<li class="lh-copy pv3 ba bl-0 bt-0 br-0 b--dotted b--black-30">Grapefruit</li>
<li class="lh-copy pv3 ba bl-0 bt-0 br-0 b--dotted b--black-30">Kiwi</li>
</ul>
</div>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-30 {
border-color: rgba(0, 0, 0, .3);
}
.b--dotted {
border-style: dotted;
}
.bt-0 {
border-top-width: 0;
}
.br-0 {
border-right-width: 0;
}
.bl-0 {
border-left-width: 0;
}
.lh-copy {
line-height: 1.5;
}
.list {
list-style-type: none;
}
.pa3 {
padding: 1rem;
}
.pl0 {
padding-left: 0;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.measure {
max-width: 30em;
}
.center {
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 30em) {
.pa5-ns {
padding: 4rem;
}
}