Card Patterns

Cards can be used in a variety of ways. To start, they can be used to represent a variety of content types, such as documents and individual cases.

Because cards may vary greatly, it is recommended to use utility and layout classes to structure content within them.

Expandable Cards

JS file

Some cards may require some content to be initially hidden from view if that information is not pertinent to the user’s ability to scan the page for the right card to follow through or open.

<div class="sba-c-card sba-u-display--block sba-u-padding-y--2 sba-u-padding-x--1">
  <div class="sba-c-container sba-u-padding-x--2">
    <div class="sba-l-row sba-u-align-items--center sba-u-margin-bottom--1">
      <div class="sba-l-col--8">
        <h3 class="sba-u-margin-top--0 sba-u-margin-bottom--1 sba-u-md-margin-bottom--0"><a href="#">Card Title</a></h3>
      </div>
      <div class="sba-l-col--4 sba-u-md-text-align--right">
        <button class="sba-c-button sba-c-button--transparent sba-c-button--icon-only sba-c-card__toggle" type="button" data-tooltip-text="Show/hide details" aria-expanded="false" aria-controls="expand1">
          <svg aria-hidden="true" class="sba-c-icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#angle-down"></use>
          </svg>
        </button>
      </div>
    </div>
    <div id="expand1" class="sba-u-padding-top--1" hidden>
      <p><em>This is hidden content</em></p>
    </div>
  </div>
</div>

Document card

Document card provides a pattern for displaying a list of documents with a way to view expanded information

Example

<div class="sba-c-card sba-u-display--block sba-u-padding-y--2 sba-u-padding-x--1">
  <div class="sba-c-container sba-u-padding-x--2">
    <div class="sba-l-row sba-u-align-items--center sba-u-margin-bottom--1">
      <div class="sba-l-col--4">
        <h3 class="sba-u-margin-top--0 sba-u-margin-bottom--1 sba-u-md-margin-bottom--0"><a href="#">Driver's License</a></h3>
        <p class="sba-u-color--muted sba-u-font-size--small sba-u-padding--0 sba-u-margin--0">Updated 08/08/18</p>
      </div>
      <div class="sba-l-col--2">
          <p class="sba-u-margin--0 sba-u-color--muted sba-u-font-size--small">Added for</p>
          <p class="sba-u-margin--0 sba-u-color--base">Bob Smith</p>
      </div>
      <div class="sba-l-col--2">
          <p class="sba-u-margin--0 sba-u-color--muted sba-u-font-size--small">Added by</p>
          <p class="sba-u-margin--0 sba-u-color--base">Bob Smith</p>
      </div>
      <div class="sba-l-col--4 sba-u-md-text-align--right">
        <button class="sba-c-button sba-c-button--transparent sba-c-button--icon-only sba-c-card__toggle" type="button" data-tooltip-text="Show/hide details" aria-expanded="false" aria-controls="doc1">
          <svg aria-hidden="true" class="sba-c-icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#angle-down"></use>
          </svg>
        </button>
      </div>
    </div>
    <div id="doc1" class="sba-u-padding-top--1" hidden>
      <div class="sba-l-row">
        <div class="sba-l-col--6 sba-l-sm-col--12 sba-l-lg-col--6">
          <p class="sba-u-margin--0 sba-u-color--muted sba-u-font-size--small">Description</p>
          <p class="sba-u-margin--0 sba-u-color--base">These are my tax returns. I hope it’s okay. Please let me know if if it’s okay. Everything is included and it was prepared by a CPA</p>
        </div>
        <div class="sba-l-col--3 sba-l-sm-col--12 sba-l-lg-col--3">
          <p class="sba-u-margin--0 sba-u-color--muted sba-u-font-size--small">Category</p>
          <p class="sba-u-margin--0 sba-u-color--base">Proof of residency</p>
        </div>
        <div class="sba-l-col--3 sba-l-sm-col--12 sba-l-lg-col--3">
          <p class="sba-u-margin--0 sba-u-color--muted sba-u-font-size--small">File attachment</p>
          <p class="sba-u-margin--0 sba-u-color--base">bob_license12312.pdf</p>
        </div>
      </div>
      <div class="sba-l-row sba-u-justify-content--end">
        <button class="sba-c-button sba-c-button--small"><svg aria-hidden="true" class="sba-c-icon sba-u-margin-right--1">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#edit"></use>
        </svg>Manage document</button>
      </div>
    </div>
  </div>
</div>

Workload card