On a page with lots of subsequent text, you will want some spacing between paragraphs to keep legibility high.
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.