Typography

ZoaUI puts readability at a high priority.

Links

<a href="#" class="zo-link">Example hyperlink</a>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>

Note: if you want to reduce the top margin of a certain heading (h1 or h2) in case it occurs at the top, add the classname zo-h1--top or zo-h2--top to the corresponding elements.

Pre & code

Use .zo-code for inline code.

<pre class="zo-pre">...</pre>

Lists

I am a list item
Nested list
- I am indented

<ul class="zo-list zo-list--ul">
    <li class="zo-list__item">I am a list item</li>
    <li class="zo-list__item">
        Nested list
        <ul class="zo-list zo-list--ul zo-list--nested">
            <li class="zo-list__item">I am indented</li>
        </ul>
    </li>
</ul>

I am a list item
Nested list
1. I am indented

Quotes

If the central dogma is true, and if it is also true that nucleic acids are the only means whereby information is transmitted between generations, this has crucial implications for evolution. It would imply that all evolutionary novelty requires changes in nucleic acids, and that these changes—mutations—are essentially accidental and non-adaptive in nature. Changes elsewhere—in the egg cytoplasm, in materials transmitted through the placenta, in the mother’s milk—might alter the development of the child, but, unless the changes were in nucleic acids, they would have no long-term evolutionary effects.

Maynard Smith

<blockquote class="zo-quote">...</blockquote>
<p class="zo-quoteSource">[Quote source]</p>

Note: the em dash in the quote source is automatically added using the :before pseudo-element.

Tables

Note: using border-spacing, as ZoaUI does, would cause compatibility problems with IE 7 or below. However, using border-collapse might cause box-shadow to cease to work in IE 9 through Microsoft Edge.

Simple

Heading	Heading
Sample table cell	Sample table cell

<table class="zo-table">
    <tr>
        <th class="zo-table__heading">Heading</th>
        <th class="zo-table__heading">Heading</th>
    </tr>
    <tr>
        <td class="zo-table__cell">Sample table cell</td>
        <td class="zo-table__cell">Sample table cell</td>
    </tr>
</table>

Outlined

Heading	Heading
Sample table cell	Sample table cell

<table class="zo-table zo-table--outline">
    <tr>
        <th class="zo-table__heading">Heading</th>
        <th class="zo-table__heading">Heading</th>
    </tr>
    <tr>
        <td class="zo-table__cell">Sample table cell</td>
        <td class="zo-table__cell">Sample table cell</td>
    </tr>
</table>

Bordered

Note: add the zo-table--bordered__heading or zo-table--bordered__cell classes on each of the th and td elements.

Heading	Heading
Sample table cell	Sample table cell

<table class="zo-table zo-table--bordered">
    <tr>
        <th class="zo-table__heading zo-table--bordered__heading">Heading</th>
        <th class="zo-table__heading zo-table--bordered__heading">Heading</th>
    </tr>
    <tr>
        <td class="zo-table__cell zo-table--bordered__cell">Sample table cell</td>
        <td class="zo-table__cell zo-table--bordered__cell">Sample table cell</td>
    </tr>
</table>