Sections of content.
Sections that have a different background than the previous section make the page more scannable and can help give a sense of content clarity.
h2's should always be used for section titles. Sections are styled expecting an h2 for proper padding.
Make sure to put a container class inside of the section so that the color fills the width of the screen.
This section uses the color-complement color.
First paragraph of a section that has a .lead class.
<section class="section-color section-color-complement">
<h2>Section Title</h2>
<p>First paragraph of a section.</p>
</section>
<section class="section-color">
<h2>Section Title</h2>
<p>First paragraph of a section.</p>
</section>
Sections that should operate as descrite visual elements or points to be made (typically in product pages) should use the .section--hero.
h2's should always be used for section titles. Sections are styled expecting an h2 for proper padding.
Make sure to put a container class inside of the section so that the color fills the width of the screen.
Understanding audiences and exploring new approaches
For many local news organizations, the trickle-down effect of anti-press rhetoric at the national level increases the urgency of deepening connections with readers, local news organizations
Changing business models and shrinking coverage
For many local news organizations, the trickle-down effect of anti-press rhetoric at the national level increases the urgency of deepening connections with readers, local news organizations.
<section class="section--hero">
<div class="container">
<h2>The Projects</h2>
<p class="lead">Understanding audiences and exploring new approaches </p>
<p>
For many local news organizations, the trickle-down effect of anti-press rhetoric at the national level increases the urgency of deepening connections with readers, local news organizations
</p>
</div>
</section>