<header class="lead-header bg-attention-tint bg-gradient bg-image">
<div class="row">
<div class="large-12 columns">
<hgroup class="lead-header_group">
<h1 class="lead-header_title c-white">Additional Housing Opportunities</h1>
<div class="medium-8 columns no-padding show-for-medium-up">
<p class="t-epsilon t-serif c-white">We encourage you to browse other affordable housing resources.</p>
</div>
</hgroup>
</div>
</div>
</header>
{{> @lead-header title="Additional Housing Opportunities" description="We encourage you to browse other affordable housing resources." color="white" classes="bg-gradient bg-image"}}
{
"utilities": {
"padding": [
"padding--half",
"padding-top--half",
"padding-right--half",
"padding-bottom--half",
"padding-left--half",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"padding--3halves",
"padding-top--3halves",
"padding-right--3halves",
"padding-bottom--3halves",
"padding-left--3halves",
"padding--2x",
"padding-top--2x",
"padding-right--2x",
"padding-bottom--2x",
"padding-left--2x"
],
"margin": [
"margin--half",
"margin-top--half",
"margin-right--half",
"margin-bottom--half",
"margin-left--half",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"margin--3halves",
"margin-top--3halves",
"margin-right--3halves",
"margin-bottom--3halves",
"margin-left--3halves",
"margin--2x",
"margin-top--2x",
"margin-right--2x",
"margin-bottom--2x",
"margin-left--2x"
],
"border-radius": [
"radius",
"radius-bottom"
],
"border": [
"border-bottom",
"border-top",
"border-left",
"border-right",
"border-bottom--primary",
"border-top--primary",
"border-left--primary",
"border-right--primary",
"no-border"
],
"abs-position": [
"a-top-right",
"a-top-left",
"a-bottom-right",
"a-center"
]
}
}
The .bg-image class uses the overlay-image mixin which adds a full image background to an element. This header also utilizes the custom-linear-gradient to add a linear-gradient on top of the image.