Card
#
Card Variants#
Default
This is a default card
<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
<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
<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 HeadlineThis is about an animal
<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>
#
StorytellingThis is about an animal and maybe this heading is two lines long
<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 ElementsEach 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 backgroundThis is a card without an image
#
Body text omitted
This is a card without body text
#
When to use a CardUse 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 notesIn 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.
<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.
<div class="bux-card bux-card--gray"></div>
<div class="bux-card bux-card--no-border"></div>
#
AccessibilityDetermine 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>