HTML
<ul class="list pl0">
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">alignment</b>
<span class="f5 db lh-copy measure">
The positioning of text within the page margins. Alignment can be flush left, flush right, justified, or centered. Flush left and flush right are sometimes referred to as left justified and right justified.</span>
</li>
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">
ascender
</b>
<span class="f5 db lh-copy measure">
The part of lowercase letters (such as k, b, and d) that ascends above the
x-height of the other lowercase letters in a face.
</span>
</li>
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">
baseline
</b>
<span class="f5 db lh-copy measure">
The imaginary line on which the majority of the characters in a typeface rest.
</span>
</li>
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">
body text
</b>
<span class="f5 db lh-copy measure">
The paragraphs in a document that make up the bulk of its content. The body text should be set in an appropriate and easy-to-read face, typically at 10- or 12-point size.
</span>
</li>
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">
boldface
</b>
<span class="f5 db lh-copy measure">
A typeface that has been enhanced by rendering it in darker, thicker strokes so that it will stand out on the page. Headlines that need emphasis should be boldface. Italics are preferable for emphasis in body text.
</span>
</li>
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">
bullet
</b>
<span class="f5 db lh-copy measure">
A dot or other special character placed at the left of items in a list to show that they are individual, but related, points.
</span>
</li>
<li class="pa3 pa4-ns bb b--black-10">
<b class="db f3 mb1">
cap height
</b>
<span class="f5 db lh-copy measure">
The height from the baseline to the top of the uppercase letters in a font. This may or may not be the same as the height of ascenders. Cap height is used in some systems to measure the type size.
</span>
</li>
<li class="pa3 pa4-ns">
<b class="db f3 mb1">
centered
</b>
<span class="f5 db lh-copy measure">
Text placed at an equal distance from the left and right margins. Headlines are often centered. It is generally not good to mix centered text with flush left or flush right text.
</span>
</li>
</ul>
css
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.db {
display: block;
}
.lh-copy {
line-height: 1.5;
}
.list {
list-style-type: none;
}
.pa3 {
padding: 1rem;
}
.pl0 {
padding-left: 0;
}
.mb1 {
margin-bottom: .25rem;
}
.f3 {
font-size: 1.5rem;
}
.f5 {
font-size: 1rem;
}
.measure {
max-width: 30em;
}
@media screen and (min-width: 30em) {
.pa4-ns {
padding: 2rem;
}
}