Hero slabs are built of a main text area and a sliver of an image. The background color should be either .primary or .secondary to keep an association between color and site navigation. The image should be more expressive and abstract in style than representational, but should evoke the subject matter of the section. Images may often need to be constructed to fit the context through editing, collaging, or blurring in order to meet these criteria.
Existing color associations:
.primary.secondary.primary.secondary.secondary
<!-- Campaign Finance Data Section -->
<section class="hero hero--data hero--primary">
<div class="hero__image"></div>
<div class="container">
<h1 id="hero-heading" class="hero__title">Campaign finance data</h1>
<p class="hero__content">See how candidates and committees raise and spend money in federal elections. This financial data helps voters make informed decisions.</p>
</div>
</section>
<!-- Legal Resources Section -->
<section class="hero hero--legal hero--primary">
<div class="hero__image"></div>
<div class="container">
<h1 id="hero-heading" class="hero__title">Legal resources</h1>
<p class="hero__content">Explore relevant statutes, regulations, Commission actions and court cases. Making these resources public clarifies campaign finance legal requirements.</p>
</div>
</section>
<!-- Registration And Reporting Section -->
<section class="hero hero--registration hero--primary">
<div class="hero__image"></div>
<div class="container">
<h1 id="hero-heading" class="hero__title">Registration and reporting</h1>
<p class="hero__content">Federal candidates and political committees must register with the FEC when they reach certain thresholds. Once registered, they file regular reports about their financial activity. Learn more about these groups and the requirements that apply to them.</p>
</div>
</section>
<!-- Press Section -->
<section class="hero hero--press hero--primary">
<div class="hero__image"></div>
<div class="container">
<h1 id="hero-heading" class="hero__title">Press</h1>
<p class="hero__content">The Press Office educates reporters about Commission actions and campaign finance activity, law and regulations. The Office keeps the public up-to-date on Commission activities through press releases and a Weekly Digest.</p>
</div>
</section>
<section class="hero {{ modifier }} hero--primary">
<div class="hero__image"></div>
<div class="container">
{% if modifier == "hero--data" %}
<h1 id="hero-heading" class="hero__title">Campaign finance data</h1>
<p class="hero__content">See how candidates and committees raise and spend money in federal elections. This financial data helps voters make informed decisions.</p>
{% elif modifier == "hero--legal" %}
<h1 id="hero-heading" class="hero__title">Legal resources</h1>
<p class="hero__content">Explore relevant statutes, regulations, Commission actions and court cases. Making these resources public clarifies campaign finance legal requirements.</p>
{% elif modifier == "hero--registration" %}
<h1 id="hero-heading" class="hero__title">Registration and reporting</h1>
<p class="hero__content">Federal candidates and political committees must register with the FEC when they reach certain thresholds. Once registered, they file regular reports about their financial activity. Learn more about these groups and the requirements that apply to them.</p>
{% elif modifier == "hero--press" %}
<h1 id="hero-heading" class="hero__title">Press</h1>
<p class="hero__content">The Press Office educates reporters about Commission actions and campaign finance activity, law and regulations. The Office keeps the public up-to-date on Commission activities through press releases and a Weekly Digest.</p>
{% endif %}
</div>
</section>
/* Campaign Finance Data Section */
{
"modifier": "hero--data"
}
/* Legal Resources Section */
{
"modifier": "hero--legal"
}
/* Registration And Reporting Section */
{
"modifier": "hero--registration"
}
/* Press Section */
{
"modifier": "hero--press"
}