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. 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">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-case-studies.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-what-resources.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-res-to-revenue.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-download.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>

        </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">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-case-studies.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-what-resources.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-res-to-revenue.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-download.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>

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