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 utilizes the well for visually containing content.
Description
Splash is used on Archive as a Product archive homepages.
Example
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("https://images.unsplash.com/photo-1662119430728-e789b25d7f72?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
">
<div class="container">
<div class="col-sm-10 offset-sm-1 col-lg-8 offset-lg-2">
<div class="splash-content well stack stack-divider">
<h2>About National Neighborhood Data Archive (NaNDA)</h2>
<div class="stack stack-3">
<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>
<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>
</div>
</div>
</section>Splash with No Search
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("https://images.unsplash.com/photo-1662119430728-e789b25d7f72?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
">
<div class="container">
<div class="col-sm-10 offset-sm-1 col-lg-8 offset-lg-2">
<div class="splash-content well stack stack-divider">
<h2>About National Neighborhood Data Archive (NaNDA)</h2>
<div class="stack stack-3">
<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>
</div>
</section>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-imageGuidelines
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.