Demo

Willow-Card is a UI design pattern that groups related information visually, resembling a playing card, to encourage users to click or tap to view more details.

Willow-Card has 3 key properties:

1. Cards are used for grouping information.
2. Cards present a summary and link to additional details.
3. Cards resemble physical cards.

Note: The content in a card should be kept brief. Remember a card should give just enough content to entice a user to click or tap on the card to view more. Truncating content on cards is also acceptable and is represented by adding ellipsis ("...") at the end of the content.

Examples: Articles on a news website, products on an eCommerce site, or posts on a social app.

Willow-Card has two html options for providing the user an action, <article> and <a>.

• <article> should be used with the willow-card__actions element to offer buttons to the user
• <a> should be used to make the entire card content a clickable action. This version should not include the willow-card__image or the willow-card__actions elements

<!-- article tag version -->
<article class="willow-card">
  <div class="willow-card__image"></div>
  <div class="willow-card__content">
      <div class="willow-card__icon"></div>
      <h1 class="willow-card__heading">Heading Text</h1>
      <div class="willow-card__description">
          <!-- insert content components here -->
      </div>
      <ul class="willow-card__actions">
          <li class="willow-card__action"><!-- insert action component here --></li>
          <li class="willow-card__action"><!-- insert action component here --></li>
      </ul>
  </div>
</article>

<!-- anchor tag version -->
<a class="willow-card willow-card--link" href="" aria-label="">
  <div class="willow-card__content">
      <div class="willow-card__icon"></div>
      <h1 class="willow-card__heading">Heading Text</h1>
      <div class="willow-card__description">
          <!-- insert content components here -->
      </div>
  </div>
</a>

• Required
• Restrictions
  • Should Contain: willow-card elements

--link : use to make the entire content area a link. Requires use of the <a> html version

• Cards created with <a> tags require an href value that triggers an action or navigation
• Cards created with <a> tags need an aria-label value if the text content of the link doesn't clearly represent where the user will go after clicking the link

• Optional
• Restrictions
  • Should Contain: Nothing
  • Do not use with the <a> version of willow-card

• To include an image in willow-card__image you will need to add your own class to the element and target that in your SCSS/CSS and set the background-image property. Adding a new class allows the images to be different on each card. If you set the background image using the .willow-card__image class every card on your site will have the same image.

• Optional
• Restrictions
  • Should Contain:
    • willow-card__icon : <article> or <a> versions
    • willow-card__heading : <article> or <a> versions
    • willow-card__description : <article> or <a> versions
    • willow-card__actions : <article> version only

• Optional
• Restrictions
  • Should Contain: Nothing

• To include an icon image in willow-card__icon you will need to add your own class to the element and target that in your SCSS/CSS and set the background-image property. Adding a new class allows the icon to be different on each card. If you set the background image using the .willow-card__icon class every card on your site will have the same icon.

• Optional
• Restrictions
  • Should Contain: text

• willow-card__heading is visible by default and even if it is hidden, it is required to meet accessibility standards
• To hide the willow-card__heading add the sr-only utility class to the element

• Optional
• Restrictions
  • Should Contain: one or more components

• Optional
• Restrictions
  • Should Contain: one or more willow-card__action elements
  • Do not use with the <a> version of willow-card

• Optional
• Restrictions
  • Should Contain: one actionable component (such as willow-button or a link)'
  • Do not use with the <a> version of willow-card

Laubheimer, Page. "Cards: UI-Component Definition." Nielsen Norman Group. https://www.nngroup.com/articles/cards-component/ (accessed August 7, 2017).