Sections

Sections of content.

Color Section

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.

Section Title

This section uses the color-complement color.

Section Title

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>
				
			

Hero 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.

The Projects

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

The Problem

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>