Cards

Cards are useful to hold content. They have been used to contain content related to screeners and tasks.

Size

Small Card

Card Content

This is where the card info would go.

<div class="card card--small">
  <header class="card__header">
    <h3 class="t-large">Small Card</h3>
  </header>
  <div class="card__content">
    <h4 class="t-medium">Card Content</h4>
    <p>This is where the card info would go.</p>
  </div>
</div>

Description

Small cards are used for containing content in a small area.

Medium Card

Medium Card

Card Content

This will span full width of its container.

<div class="card card--medium">
  <header class="card__header">
    <h3 class="t-large">Medium Card</h3>
  </header>
  <div class="card__content">
    <h4 class="t-medium">Card Content</h4>
    <p>This will span full width of its container.</p>
  </div>
</div>

Description

Medium cards are used for containing content in a medium area.

Do

  • Use the card for the correct amount of content

Don't

  • Use larger cards inside of smaller cards

Moveable

Moveable Card

Uses:

  • Screener Questions
  • Task Editor
  • Highlight Reel
<div class="card card--medium card--moveable">
  <header class="card__header">
    <h3 class="t-large">Moveable Card</h3>
    <div class="card__toolbar">
      <button aria-dropeffect="move"
        aria-grabbed="false"
        aria-label="Your label here"
        class="btn--icon-only card__button card__move"
        type="button">
        <tk-icon name="move" size="small"></tk-icon>
      </button>
    </div>
  </header>
  <div class="card__content">
    <h4 class="t-medium">Uses:</h4>
    <ul class="bulleted-list">
      <li>Screener Questions</li>
      <li>Task Editor</li>
      <li>Highlight Reel</li>
    </ul>
  </div>
</div>

Description

This card pattern works well with droppable and draggable styles. Moveable cards house content that give customers the ability to manipulate their order. This makes them great for screeners and tasks.

Numerated

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem

<div class="card-counter">

  <!-- card #1 -->

  <div class="card card--medium">
      <header class="card__header">
          <tk-badge numbered></tk-badge>
          <h3 class="t-medium no-margin task__count">Header</h3>
          <div class="card__toolbar">
            <button aria-dropeffect="move"
              aria-grabbed="false"
              aria-label="Your label here"
              class="btn--icon-only card__button card__move"
              type="button">
              <tk-icon name="move" size="small"></tk-icon>
            </button>
          </div>
      </header>
      <div class="card__content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem</p>
      </div>
  </div>

<!-- card #2 -->

  <div class="card card--medium mt-4x">
      <header class="card__header">
          <tk-badge numbered></tk-badge>
          <h3 class="t-medium no-margin task__count">Header</h3>
          <div class="card__toolbar">
            <button aria-dropeffect="move"
              aria-grabbed="false"
              aria-label="Your label here"
              class="btn--icon-only card__button card__move"
              type="button">
              <tk-icon name="move" size="small"></tk-icon>
            </button>
          </div>
      </header>
      <div class="card__content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lorem</p>
      </div>
  </div>

</div>

Description

Like moveable cards, numerated cards are often paired with screeners and tasks to serve as a reference in which the content will be seen.

Compact Card

Compact Card

Card Content

The spacing is tighter for compact cards.

<div class="card card--medium">
  <header class="card__header card__header--compact">
    <h3 class="t-large">Compact Card</h3>
    <div class="card__toolbar">
      <button type="button" class="card__button">Card Button</button>
    </div>
  </header>
  <div class="card__content card__content--compact">
    <h4 class="t-medium">Card Content</h4>
    <p>The spacing is tighter for compact cards.</p>
  </div>
</div>

Description

Compact cards should be used when the outer container is compacted.

Do

  • Group like items within a card
  • Use moveable and numerated cards together

Don't

  • Use movable cards for cards that aren’t meant to be moved
  • Use larger cards inside of smaller cards

Accessibility

  • Does not receive :focus