DAHLIA Pattern Library

Linear Gradient 

<header class="lead-header bg-attention-tint bg-gradient">
    <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"}}
 
{
  "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"
    ]
  }
}

Can use the custom-linear-gradient mixin to achieve a linear gradient, e.g. .lead-header.bg-gradient below implements custom-linear-gradient(rgba(0,0,0, .2), rgba(0,0,0, .8));