Card

Beta

A card is a container intended for grouping and organizing related content.

Card Variants#

Default#

This is a default card

Script Ohio tbdbitl non magna quis tortor volutpat flow of ideas The Lantern vestibulum ligula efficitur Woody Hayes highest-ranked public university in Ohio.

Call to Action

<div class="bux-card ">
    <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
    <img class="bux-card__image" src="https://placeimg.com/400/225/animals" alt="This is an image of an animal.">
    <div class="bux-card__content">

        <h3 class="bux-card__heading">
            <span>This is about an animal and maybe this heading is two lines long</span>
        </h3>

        <div class="bux-card__body">
            Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.
        </div>
        <div class="bux-card__cta">
            <a href="http://example.com">
                <span>Download this animal</span>
            </a>
        </div>
    </div>
</div>

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>
  {% if card_image %}
    <img class="bux-card__image" src="{{ card_image }}" alt="{% if card_image_alt %}{{ card_image_alt }}{% endif %}">
  {% endif %}
  <div class="bux-card__content">

  {% if taxonomy %}
    <span class="bux-card__taxonomy">
      {{ taxonomy }}
    </span>
  {% endif %}
    
    <h{{ card_heading_level|default(2) }} class="bux-card__heading">
    {% if modifier == "linked-headline" %}
    <a href="{{ card_url }}" target="_blank" class="bux-card__heading--link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}
    {% if modifier == "linked-headline" %}
    {% elseif modifier == "storytelling" %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% else %}
    {% if card_cta %}
      <div class="bux-card__cta">
        <a href="{{ card_url }}">
          <span>{{ card_cta }}</span>
        </a>
      </div>
    {% endif %}
    {% endif %}
  </div>
</div>

Gray Background#

This is a card with a gray background

Script Ohio tbdbitl non magna quis tortor volutpat flow of ideas The Lantern vestibulum ligula efficitur Woody Hayes highest-ranked public university in Ohio.

Call to Action

<div class="bux-card bux-card--gray">
    <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
    <img class="bux-card__image" src="https://placeimg.com/400/225/animals" alt="This is an image of an animal.">
    <div class="bux-card__content">

        <h3 class="bux-card__heading">
            <span>This is about an animal and maybe this heading is two lines long</span>
        </h3>

        <div class="bux-card__body">
            Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.
        </div>
        <div class="bux-card__cta">
            <a href="http://example.com">
                <span>Download this animal</span>
            </a>
        </div>
    </div>
</div>

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>
  {% if card_image %}
    <img class="bux-card__image" src="{{ card_image }}" alt="{% if card_image_alt %}{{ card_image_alt }}{% endif %}">
  {% endif %}
  <div class="bux-card__content">

  {% if taxonomy %}
    <span class="bux-card__taxonomy">
      {{ taxonomy }}
    </span>
  {% endif %}
    
    <h{{ card_heading_level|default(2) }} class="bux-card__heading">
    {% if modifier == "linked-headline" %}
    <a href="{{ card_url }}" target="_blank" class="bux-card__heading--link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}
    {% if modifier == "linked-headline" %}
    {% elseif modifier == "storytelling" %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% else %}
    {% if card_cta %}
      <div class="bux-card__cta">
        <a href="{{ card_url }}">
          <span>{{ card_cta }}</span>
        </a>
      </div>
    {% endif %}
    {% endif %}
  </div>
</div>

Without Border#

This is a card without a border

Script Ohio tbdbitl non magna quis tortor volutpat flow of ideas The Lantern vestibulum ligula efficitur Woody Hayes highest-ranked public university in Ohio.

Call to Action

<div class="bux-card bux-card--no-border">
    <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
    <img class="bux-card__image" src="https://placeimg.com/400/225/animals" alt="This is an image of an animal.">
    <div class="bux-card__content">

        <h3 class="bux-card__heading">
            <span>This is about an animal and maybe this heading is two lines long</span>
        </h3>

        <div class="bux-card__body">
            Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.
        </div>
        <div class="bux-card__cta">
            <a href="http://example.com">
                <span>Download this animal</span>
            </a>
        </div>
    </div>
</div>

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>
  {% if card_image %}
    <img class="bux-card__image" src="{{ card_image }}" alt="{% if card_image_alt %}{{ card_image_alt }}{% endif %}">
  {% endif %}
  <div class="bux-card__content">

  {% if taxonomy %}
    <span class="bux-card__taxonomy">
      {{ taxonomy }}
    </span>
  {% endif %}
    
    <h{{ card_heading_level|default(2) }} class="bux-card__heading">
    {% if modifier == "linked-headline" %}
    <a href="{{ card_url }}" target="_blank" class="bux-card__heading--link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}
    {% if modifier == "linked-headline" %}
    {% elseif modifier == "storytelling" %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% else %}
    {% if card_cta %}
      <div class="bux-card__cta">
        <a href="{{ card_url }}">
          <span>{{ card_cta }}</span>
        </a>
      </div>
    {% endif %}
    {% endif %}
  </div>
</div>

Linked Headline#

This is about an animal

Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.

<div class="bux-card bux-card--linked-headline">
    <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
    <img class="bux-card__image" src="https://placeimg.com/400/225/animals" alt="This is an image of an animal.">
    <div class="bux-card__content">

        <h3 class="bux-card__heading">
            <a href="http://example.com" target="_blank" class="bux-card__heading--link">
                <span>This is about an animal</span>
            </a>
        </h3>

        <div class="bux-card__body">
            Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.
        </div>
    </div>
</div>

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>
  {% if card_image %}
    <img class="bux-card__image" src="{{ card_image }}" alt="{% if card_image_alt %}{{ card_image_alt }}{% endif %}">
  {% endif %}
  <div class="bux-card__content">

  {% if taxonomy %}
    <span class="bux-card__taxonomy">
      {{ taxonomy }}
    </span>
  {% endif %}
    
    <h{{ card_heading_level|default(2) }} class="bux-card__heading">
    {% if modifier == "linked-headline" %}
    <a href="{{ card_url }}" target="_blank" class="bux-card__heading--link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}
    {% if modifier == "linked-headline" %}
    {% elseif modifier == "storytelling" %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% else %}
    {% if card_cta %}
      <div class="bux-card__cta">
        <a href="{{ card_url }}">
          <span>{{ card_cta }}</span>
        </a>
      </div>
    {% endif %}
    {% endif %}
  </div>
</div>

Storytelling#

Optional Taxonomy

This is about an animal and maybe this heading is two lines long

Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.

3-minute read

<div class="bux-card bux-card--storytelling">
    <a class="bux-card__link" href="http://example.com" aria-hidden="true" tabindex="-1"></a>
    <img class="bux-card__image" src="https://placeimg.com/400/225/animals" alt="This is an image of an animal.">
    <div class="bux-card__content">

        <span class="bux-card__taxonomy">
            Optional Taxonomy
        </span>

        <h3 class="bux-card__heading">
            <span>This is about an animal and maybe this heading is two lines long</span>
        </h3>

        <div class="bux-card__body">
            Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.
        </div>
        <span class="bux-card__read-time">3-minute read</span>
    </div>
</div>

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>
  {% if card_image %}
    <img class="bux-card__image" src="{{ card_image }}" alt="{% if card_image_alt %}{{ card_image_alt }}{% endif %}">
  {% endif %}
  <div class="bux-card__content">

  {% if taxonomy %}
    <span class="bux-card__taxonomy">
      {{ taxonomy }}
    </span>
  {% endif %}
    
    <h{{ card_heading_level|default(2) }} class="bux-card__heading">
    {% if modifier == "linked-headline" %}
    <a href="{{ card_url }}" target="_blank" class="bux-card__heading--link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}
    {% if modifier == "linked-headline" %}
    {% elseif modifier == "storytelling" %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% else %}
    {% if card_cta %}
      <div class="bux-card__cta">
        <a href="{{ card_url }}">
          <span>{{ card_cta }}</span>
        </a>
      </div>
    {% endif %}
    {% endif %}
  </div>
</div>

Card Elements#

Each card includes an image, heading, body text, and a call to action (cta). However, only the heading and cta are required. Here are some possible combinations of required elements and card variants.

Image omitted, gray background#

This is a card without an image

Script Ohio tbdbitl non magna quis tortor volutpat flow of ideas The Lantern vestibulum ligula efficitur Woody Hayes highest-ranked public university in Ohio.

Call to Action

Body text omitted#

This is a card without body text

Call to Action

When to use a Card#

Use cards when you want to display a snapshot of information intended to encourage users to interact with or click to view more details or actions. According to the Nielsen Norman group, cards have four key properties:

Cards are used for grouping information and content.
Cards present a summary and link to additional details.
Cards resemble physical cards.
Cards allow for a flexible layout.

Implementation notes#

In the base implementation, the entire card functions as a link by utilizing an empty anchor tag. This anchor tag is hidden to keyboard and screen reader users but is styled in a manner such that it remains clickable via a pointer device.

Anchor tag that makes the card function as link
<a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

If you do not want the entire card to function as a link and only want the card call-to-action to be linked you can remove this anchor tag.

It is important to note that if you want the entire card to function as a link that the link is also keyboard and screen reader accessible somewhere else in the card (i.e. the card call-to-action).

You can modify the look of the card with modifiers. These modifiers allow you to create cards with a gray background and no border.

Card with a gray background using modifier
<div class="bux-card bux-card--gray"></div>

Card with no border using modifier
<div class="bux-card bux-card--no-border"></div>

Accessibility#

Determine whether or not your image is decorative or informative. If decorative you can utilize alt="". If informative, provide alternative text that conveys its purpose or meaning.

As noted in the implementation notes, the default state of the card provides an empty anchor tag that serves to make the entire card a link. If you choose to utilize this default state you must make sure that the card call-to-action links to the same location.

Code Examples#

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>
  {% if card_image %}
    <img class="bux-card__image" src="{{ card_image }}" alt="{% if card_image_alt %}{{ card_image_alt }}{% endif %}">
  {% endif %}
  <div class="bux-card__content">

  {% if taxonomy %}
    <span class="bux-card__taxonomy">
      {{ taxonomy }}
    </span>
  {% endif %}
    
    <h{{ card_heading_level|default(2) }} class="bux-card__heading">
    {% if modifier == "linked-headline" %}
    <a href="{{ card_url }}" target="_blank" class="bux-card__heading--link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}
    {% if modifier == "linked-headline" %}
    {% elseif modifier == "storytelling" %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% else %}
    {% if card_cta %}
      <div class="bux-card__cta">
        <a href="{{ card_url }}">
          <span>{{ card_cta }}</span>
        </a>
      </div>
    {% endif %}
    {% endif %}
  </div>
</div>