dxw style

Card 

<div class="grid-container">
    <div class="column-half">
        <div class="card">
            <h2 class="h2">Check</h2>
            <ul class="list list-bullet">
                <li>Did the invoice include everything it should have?</li>
                <li>Did it go to the right person?</li>
                <li>Was it received? Call or email to make sure.</li>
            </ul>
            <p>
                <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
            </p>
        </div>
    </div>
    <div class="column-half">
        <div class="card">
            <h2 class="h2">Check</h2>
            <ul class="list list-bullet">
                <li>Did the invoice include everything it should have?</li>
                <li>Did it go to the right person?</li>
                <li>Was it received? Call or email to make sure.</li>
            </ul>
            <p>
                <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
            </p>
        </div>
    </div>
</div>
<div class="grid-container">
    <div class="column-one-third">
        <div class="card">
            <h2 class="h2">Check</h2>
            <ul class="list list-bullet">
                <li>Did the invoice include everything it should have?</li>
                <li>Did it go to the right person?</li>
                <li>Was it received? Call or email to make sure.</li>
            </ul>
            <p>
                <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
            </p>
        </div>
    </div>
    <div class="column-one-third">
        <div class="card">
            <h2 class="h2">Check</h2>
            <ul class="list list-bullet">
                <li>Did the invoice include everything it should have?</li>
                <li>Did it go to the right person?</li>
                <li>Was it received? Call or email to make sure.</li>
            </ul>
            <p>
                <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
            </p>
        </div>
    </div>
    <div class="column-one-third">
        <div class="card">
            <h2 class="h2">Check</h2>
            <ul class="list list-bullet">
                <li>Did the invoice include everything it should have?</li>
                <li>Did it go to the right person?</li>
                <li>Was it received? Call or email to make sure.</li>
            </ul>
            <p>
                <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
            </p>
        </div>
    </div>
</div>
 
<div class="grid-container">
  <div class="column-half">
    <div class="card">
      <h2 class="h2">Check</h2>
      <ul class="list list-bullet">
        <li>Did the invoice include everything it should have?</li>
        <li>Did it go to the right person?</li>
        <li>Was it received? Call or email to make sure.</li>
      </ul>
      <p>
        <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
      </p>
    </div>
  </div>
  <div class="column-half">
    <div class="card">
      <h2 class="h2">Check</h2>
      <ul class="list list-bullet">
        <li>Did the invoice include everything it should have?</li>
        <li>Did it go to the right person?</li>
        <li>Was it received? Call or email to make sure.</li>
      </ul>
      <p>
        <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
      </p>
    </div>
  </div>
</div>
<div class="grid-container">
  <div class="column-one-third">
    <div class="card">
      <h2 class="h2">Check</h2>
      <ul class="list list-bullet">
        <li>Did the invoice include everything it should have?</li>
        <li>Did it go to the right person?</li>
        <li>Was it received? Call or email to make sure.</li>
      </ul>
      <p>
        <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
      </p>
    </div>
  </div>
  <div class="column-one-third">
    <div class="card">
      <h2 class="h2">Check</h2>
      <ul class="list list-bullet">
        <li>Did the invoice include everything it should have?</li>
        <li>Did it go to the right person?</li>
        <li>Was it received? Call or email to make sure.</li>
      </ul>
      <p>
        <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
      </p>
    </div>
  </div>
  <div class="column-one-third">
    <div class="card">
      <h2 class="h2">Check</h2>
      <ul class="list list-bullet">
        <li>Did the invoice include everything it should have?</li>
        <li>Did it go to the right person?</li>
        <li>Was it received? Call or email to make sure.</li>
      </ul>
      <p>
        <a href="/deal-with-an-unpaid-invoice/write-an-invoice?variant=1">Read our advice and resubmit an invoice.</a>
      </p>
    </div>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .card {
  $space: $gutter;
  padding: $space * 2;
  border: 1px solid $grey-3;
  background-color: $white;
  .heading-medium, .heading-large {
    margin-top: 0;
  }
  p:last-child {
    margin-bottom: 0;
  }
  margin-bottom: $space;
  .h2 {
    margin-top: 0;
  }
}
  • URL: /components/raw/card/card.scss
  • Filesystem Path: components/card/card.scss
  • Size: 267 Bytes

Card

The card component relies on the jQuery matchHeight plugin to vertically size the cards on the fly:

$(function() {
  $('.card').matchHeight({
    byRow: true,
    property: 'height',
    target: null,
    remove: false
  });
});