Callout cards

These are near the bottom of the home page, and lead users to important and/or introductory content. Each is topped with svg artwork representing the theme of the content they summarize. Clicking the card title or its banner artwork takes users to the linked page.

The small header that runs above each card’s headline should be the title of the parent section for that card’s content.

For best grid balance, six callout cards should run on the home page. Any replacement content should fit thematically with a card’s artwork, or complementary new art should be created. Artwork on each card should be entirely built with shades of one color. Cards should alternate color schemes between blue and green in order. The cards should always appear over a shaded background, since they aren’t outlined.

<!-- <div class=""></div> -->

<!-- Card -->
<section class="slab-beta-mid container-padded">
    <div class="container-page-wrapper">
        <div class="container-left-9">

            <article class="card">
                <a href="/#/" class="card-image_link"><img class="card-image" src="../../img/home-card-ownership.svg" alt="Header image"></a>
                <div class="card-content">
                    <p class="card-content-subhead">Site section name</p>
                    <a href="/#/">
                        <h3 class="card-title">Card title</h3>
                    </a>
                    <p>Card content</p>
                </div>
            </article>

            <article class="card">
                <a href="/#/" class="card-image_link"><img class="card-image" src="../../img/home-card-disbursements.svg" alt="Header image"></a>
                <div class="card-content">
                    <p class="card-content-subhead">Explore data</p>
                    <a href="/#/">
                        <h3 class="card-title">Where does the money go?</h3>
                    </a>
                    <p>Revenue from natural resources goes to state governments, as well as several federal funds that support projects at the local and national levels.</p>
                </div>
            </article>

            <article class="card">
                <a href="/#/" class="card-image_link"><img class="card-image" src="../../img/home-card-case-studies.svg " alt="Header image"></a>
                <div class="card-content">
                    <p class="card-content-subhead">Case studies</p>
                    <a href="/#/">
                        <h3 class="card-title">How do extractive industries affect communities?</h3>
                    </a>
                    <p>Learn about 12 communities that led the U.S. in production of iron, copper, gold, coal, oil, and natural gas over the last decade.</p>
                </div>
            </article>

            <article class="card">
                <a href="/#/" class="card-image_link"><img class="card-image" src="../../img/home-card-what-resources.svg" alt="Header image"></a>
                <div class="card-content">
                    <p class="card-content-subhead">How it works</p>
                    <a href="/#/">
                        <h3 class="card-title">What natural resources are extracted?</h3>
                    </a>
                    <p>The U.S. is a top producer of oil, gas, and coal, as well as nonenergy minerals like gold, iron, and copper.</p>
                </div>
            </article>

            <article class="card">
                <a href="/#/" class="card-image_link"><img class="card-image" src="../../img/home-card-res-to-revenue.svg" alt="Header image"></a>
                <div class="card-content">
                    <p class="card-content-subhead">How it works</p>
                    <a href="/#/">
                        <h3 class="card-title">How does resource extraction result in federal revenue?</h3>
                    </a>
                    <p>Companies that extract resources on federal land may pay bonuses, rents, royalties, fees, taxes, or other revenues to the federal government.</p>
                </div>
            </article>

            <article class="card">
                <a href="/#/" class="card-image_link"><img class="card-image" src="../../img/home-card-download.svg" alt="Header image"></a>
                <div class="card-content">
                    <p class="card-content-subhead">About</p>
                    <a href="/#/">
                        <h3 class="card-title">Download the 2017 Executive Summary</h3>
                    </a>
                    <p>This document includes an overview of contextual information and updates to this site.</p>
                </div>
            </article>

        </div>
    </div>
</section>
<!-- <div class="{{ className }}">{{ text }}</div> -->

<!-- Card -->
<section class="slab-beta-mid container-padded">
  <div class="container-page-wrapper">
    <div class="container-left-9">

      <article class="card">
        <a href="/#/" class="card-image_link"><img class="card-image" src="{{ path '/img/home-card-ownership.svg'}}" alt="Header image"></a>
        <div class="card-content">
          <p class="card-content-subhead">Site section name</p>
          <a href="/#/"><h3 class="card-title">Card title</h3></a>
          <p>Card content</p>
        </div>
      </article>

      <article class="card">
        <a href="/#/" class="card-image_link"><img class="card-image" src="{{ path '/img/home-card-disbursements.svg' }}" alt="Header image"></a>
        <div class="card-content">
          <p class="card-content-subhead">Explore data</p>
          <a href="/#/"><h3 class="card-title">Where does the money go?</h3></a>
          <p>Revenue from natural resources goes to state governments, as well as several federal funds that support projects at the local and national levels.</p>
        </div>
      </article>

      <article class="card">
        <a href="/#/" class="card-image_link"><img class="card-image" src="{{ path '/img/home-card-case-studies.svg '}}" alt="Header image"></a>
        <div class="card-content">
          <p class="card-content-subhead">Case studies</p>
          <a href="/#/"><h3 class="card-title">How do extractive industries affect communities?</h3></a>
          <p>Learn about 12 communities that led the U.S. in production of iron, copper, gold, coal, oil, and natural gas over the last decade.</p>
        </div>
      </article>

      <article class="card">
        <a href="/#/" class="card-image_link"><img class="card-image" src="{{ path '/img/home-card-what-resources.svg' }}" alt="Header image"></a>
        <div class="card-content">
          <p class="card-content-subhead">How it works</p>
          <a href="/#/"><h3 class="card-title">What natural resources are extracted?</h3></a>
          <p>The U.S. is a top producer of oil, gas, and coal, as well as nonenergy minerals like gold, iron, and copper.</p>
        </div>
      </article>

      <article class="card">
        <a href="/#/" class="card-image_link"><img class="card-image" src="{{ path '/img/home-card-res-to-revenue.svg' }}" alt="Header image"></a>
        <div class="card-content">
          <p class="card-content-subhead">How it works</p>
          <a href="/#/"><h3 class="card-title">How does resource extraction result in federal revenue?</h3></a>
          <p>Companies that extract resources on federal land may pay bonuses, rents, royalties, fees, taxes, or other revenues to the federal government.</p>
        </div>
      </article>

      <article class="card">
        <a href="/#/" class="card-image_link"><img class="card-image" src="{{ path '/img/home-card-download.svg' }}" alt="Header image"></a>
        <div class="card-content">
          <p class="card-content-subhead">About</p>
          <a href="/#/"><h3 class="card-title">Download the 2017 Executive Summary</h3></a>
          <p>This document includes an overview of contextual information and updates to this site.</p>
        </div>
      </article>

    </div>
  </div>
</section>
/* No context defined for this component. */