Splash

Definition

Splash is a large attention-grabbing section at the top of a page. There is an option for a background image, set dynamically inline with a --splash-image CSS custom property. The background color can be set, as well.

The Splash pattern has a Search well and About well.

Description

Splash is used on Archive as a Product archive homepages.

Example

Search the archive

About National Neighborhood Data Archive (NaNDA)

The National Neighborhood Data Archive (NaNDA) is a publicly available data archive containing measures of the physical, economic, demographic, and social environment at multiple levels of spatial scale (eg, census tract, ZIP code tabulation area, county). Each NaNDA dataset covers all or most of the entire nation (including both rural and urban areas) and represents a set of measures on a single topic of interest, including socioeconomic disadvantage, healthcare, housing, partisanship, and public transit, with temporal coverage dating back to 2000.

<section
  class="splash splash-image"
  style="
    --splash-image: url(&quot;https://images.unsplash.com/photo-1662119430728-e789b25d7f72?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&quot;);
  ">
  <div class="container">
    <div class="stack col-sm-10 offset-sm-1 col-lg-8 offset-lg-3">
      <div class="well splash-search">
        <h2 class="h1" id="search-title">Search the archive</h2>
        <search role="search">
          <form class="input-group">
            <input
              class="form-control"
              type="search"
              aria-labelledby="search-title"
              aria-describedby="search-button" />
            <button class="btn btn-archive" id="search-button" type="submit">
              Button
            </button>
          </form>
        </search>
      </div>
      <div class="well splash-about stack stack-divider">
        <h2>About National Neighborhood Data Archive (NaNDA)</h2>
        <p>
          The National Neighborhood Data Archive (NaNDA) is a publicly available
          data archive containing measures of the physical, economic,
          demographic, and social environment at multiple levels of spatial
          scale (eg, census tract, ZIP code tabulation area, county). Each NaNDA
          dataset covers all or most of the entire nation (including both rural
          and urban areas) and represents a set of measures on a single topic of
          interest, including socioeconomic disadvantage, healthcare, housing,
          partisanship, and public transit, with temporal coverage dating back
          to 2000.
        </p>
      </div>
    </div>
  </div>
</section>

Hide

See an example mockup page using the Splash component.

Variables

CSS Custom Properties

// Adjusts the background color, visible if no image is shown
--splash-bg

// Adds a background image. It needs to be formatted with url(), 
// as if it was the background-image declaration.
// --splash-image: url('http:example.com/image.webp');
--splash-image

Guidelines

Do not put a Splash inside a .container element. The container limits the width of its children, and the Splash is a full-width component.