Core Framework v2.0.1 – Documentation

Text Spacing

On a page with lots of subsequent text, you will want some spacing between paragraphs to keep legibility high.

To save you from having to put spacing classes on each of those elements, we have introduced the text-spacing class. Putting this class on a container will apply the standard spacing defined in the styleguide to each of its descendant paragraphs and lists.

Usage

Apply the text-spacing class to a container to get a default spacing for its descendant paragraphs and lists (that is, p, ol, ul).

Text without spacing
<section>
    <p>
        A regular old <a href="#">paragraph</a> stating lots of interesting facts, but a bit long-winded.
        Would probably be hard on the eyes having to keep track of your location in a wall of text without proper spacing.
    </p>
    <p>
        Sed a lorem quis neque interdum <a href="#">consequat ut sed sem</a>. Duis quis tempor nunc.
        Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <ul class="icon-arrow">
        <li><a href="#">Sed a lorem quis neque interdum</a></li>
        <li><a href="#">Sed a lorem quis neque interdum et malesuada</a></li>
        <li><a href="#">Sed a lorem quis neque interdum</a></li>
        <li><a href="#">Sed a lorem quis neque interdum et malesuada</a></li>
    </ul>
    <p>
        Sed a lorem quis neque interdum <a href="#">consequat ut sed sem</a>. Duis quis tempor nunc.
        Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
</section>

A regular old paragraph stating lots of interesting facts, but a bit long-winded. Would probably be hard on the eyes having to keep track of your location in a wall of text without proper spacing.

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Text with spacing
<section class="text-spacing">
    <p>
        A regular old <a href="#">paragraph</a> stating lots of interesting facts, but a bit long-winded.
        Would probably be hard on the eyes having to keep track of your location in a wall of text without proper spacing.
    </p>
    <p>
        Sed a lorem quis neque interdum <a href="#">consequat ut sed sem</a>. Duis quis tempor nunc.
        Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <ul class="icon-arrow">
        <li><a href="#">Sed a lorem quis neque interdum</a></li>
        <li><a href="#">Sed a lorem quis neque interdum et malesuada</a></li>
        <li><a href="#">Sed a lorem quis neque interdum</a></li>
        <li><a href="#">Sed a lorem quis neque interdum et malesuada</a></li>
    </ul>
    <p>
        Sed a lorem quis neque interdum <a href="#">consequat ut sed sem</a>. Duis quis tempor nunc.
        Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
</section>

A regular old paragraph stating lots of interesting facts, but a bit long-winded. Would probably be hard on the eyes having to keep track of your location in a wall of text without proper spacing.

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Sed a lorem quis neque interdum consequat ut sed sem. Duis quis tempor nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.