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-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-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"
    }
  ]
}