Flow
Create a vertical rhythm section for text layouts. Nicely spaces headlines, paragraphs and imaages. Think of it as a standard blog layout.
Component
Headline
Voluptas est voluptatem minima a et ab itaque fuga. A qui ea aperiam voluptatem reiciendis error. Consectetur nulla ab delectus doloribus voluptatibus unde suscipit blanditiis quo sit sunt. Nemo minima inventore ut possimus incidunt molestiae reprehenderit consequatur magni quas. Sint pariatur animi culpa dolores labore ut sapiente. Corporis et magni distinctio. Placeat eius dolores delectus soluta.
Another headline but longer
Voluptas est voluptatem minima a et ab itaque fuga. A qui ea aperiam voluptatem reiciendis error. Consectetur nulla ab delectus doloribus voluptatibus unde suscipit blanditiis quo sit sunt. Nemo minima inventore ut possimus incidunt molestiae reprehenderit consequatur magni quas. Sint pariatur animi culpa dolores labore ut sapiente. Corporis et magni distinctio. Placeat eius dolores delectus soluta.
Voluptas est voluptatem minima a et ab itaque fuga. A qui ea aperiam voluptatem reiciendis error. Consectetur nulla ab delectus doloribus voluptatibus unde suscipit blanditiis quo sit sunt. Nemo minima inventore ut possimus incidunt molestiae reprehenderit consequatur magni quas. Sint pariatur animi culpa dolores labore ut sapiente. Corporis et magni distinctio. Placeat eius dolores delectus soluta.
Flow
- html<!-- COMPONENT-START: nc-flow -->
<div class="nc-flow">
<h3>Headline</h3>
<p>
Voluptas est voluptatem minima a et ab itaque fuga. A qui ea aperiam voluptatem reiciendis error. Consectetur
nulla ab delectus doloribus voluptatibus unde suscipit blanditiis quo sit sunt. Nemo minima inventore ut
possimus incidunt molestiae reprehenderit consequatur magni quas. Sint pariatur animi culpa dolores labore ut
sapiente. Corporis et magni distinctio. Placeat eius dolores delectus soluta.
</p>
<h4>Another headline but longer</h4>
<p>
Voluptas est voluptatem minima a et ab itaque fuga. A qui ea aperiam voluptatem reiciendis error. Consectetur
nulla ab delectus doloribus voluptatibus unde suscipit blanditiis quo sit sunt. Nemo minima inventore ut
possimus incidunt molestiae reprehenderit consequatur magni quas. Sint pariatur animi culpa dolores labore ut
sapiente. Corporis et magni distinctio. Placeat eius dolores delectus soluta.
</p>
<p>
Voluptas est voluptatem minima a et ab itaque fuga. A qui ea aperiam voluptatem reiciendis error. Consectetur
nulla ab delectus doloribus voluptatibus unde suscipit blanditiis quo sit sunt. Nemo minima inventore ut
possimus incidunt molestiae reprehenderit consequatur magni quas. Sint pariatur animi culpa dolores labore ut
sapiente. Corporis et magni distinctio. Placeat eius dolores delectus soluta.
</p>
</div>
<!-- COMPONENT-END: nc-flow -->CSS Variables
- --flow-base-measure
- Set the max size of any non-headline content. Defaults to
72ch. - --flow-headline-measure
- Set the max size of headline. Defaults to
32ch.