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.

How to use

Both the image and card title should link to the same location so both areas are clickable.

Responsive behavior

Cards should be placed inside a layout container (.container-*) for proper content flow.

<article class="card">
    <a href="#" class="card-image_link"><img class="card-image" src="../../img/home-card-disbursements.svg" alt="Card image alt text"></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="Card image alt text"></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="Card image alt text"></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="Card image alt text"></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="Card image alt text"></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>
<article class="card">
    <a href="#" class="card-image_link"><img class="card-image" src="../../img/home-card-ownership.svg" alt="Card image alt text"></a>
    <div class="card-content">
        <p class="card-content-subhead">Section title</p>
        <a href="#">
            <h3 class="card-title">Card title</h3>
        </a>
        <p>Content for this card. 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>
{{#each cards}}
<article class="card">
  <a href="#" class="card-image_link"><img class="card-image" src="{{ path card-image }}" alt="{{ card-alt }}"></a>
  <div class="card-content">
    <p class="card-content-subhead">{{ section-title }}</p>
    <a href="#"><h3 class="card-title">{{ card-title }}</h3></a>
    <p>{{ card-content }}</p>
  </div>
</article>
{{/each}}
{
  "container": {
    "classes": "container",
    "slab": "beta-mid"
  },
  "cards": [
    {
      "card-image": "/img/home-card-disbursements.svg",
      "card-alt": "Card image alt text",
      "section-title": "Explore data",
      "card-title": "Where does the money go?",
      "card-content": "Revenue from natural resources goes to state governments, as well\nas several federal funds that support projects at the local and\nnational levels.\n"
    },
    {
      "card-image": "/img/home-card-case-studies.svg",
      "card-alt": "Card image alt text",
      "section-title": "Case studies",
      "card-title": "How do extractive industries affect communities?",
      "card-content": "Learn about 12 communities that led the U.S. in production of iron,\ncopper, gold, coal, oil, and natural gas over the last decade.\n"
    },
    {
      "card-image": "/img/home-card-what-resources.svg",
      "card-alt": "Card image alt text",
      "section-title": "How it works",
      "card-title": "What natural resources are extracted?",
      "card-content": "The U.S. is a top producer of oil, gas, and coal, as well as\nnonenergy minerals like gold, iron, and copper.\n"
    },
    {
      "card-image": "/img/home-card-res-to-revenue.svg",
      "card-alt": "Card image alt text",
      "section-title": "How it works",
      "card-title": "How does resource extraction result in federal revenue?",
      "card-content": "Companies that extract resources on federal land may pay bonuses,\nrents, royalties, fees, taxes, or other revenues to the federal\ngovernment.\n"
    },
    {
      "card-image": "/img/home-card-download.svg",
      "card-alt": "Card image alt text",
      "section-title": "About",
      "card-title": "Download the 2017 Executive Summary",
      "card-content": "This document includes an overview of contextual information and\nupdates to this site.\n"
    },
    {
      "card-image": "/img/home-card-ownership.svg",
      "card-alt": "Card image alt text",
      "section-title": "Section title",
      "card-title": "Card title",
      "card-content": "Content for this card. Revenue from natural resources goes to state\ngovernments, as well as several federal funds that support projects at the\nlocal and national levels.\n"
    }
  ]
}