Card
Use a Card to group related content, including an image, title, body and link. A heading and link are required.
#
Examples#
DefaultThis is a default card
<div class="bux-card ">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image" src="/img/location" alt="">
<div class="bux-card__content">
<h3 class="bux-card__heading">
<span>Card Heading</span>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="bux-card__cta">
<a href="#">
<span>Call to Action</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 %}
{% include '@image' with { image_url: image_url } %}
{% 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">
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<a href="{{ card_url }}" target="_blank" class="bux-card__heading--storytelling-link">
{% endif %}
<span>{{ card_heading }}</span>
{% if modifier == "linked-headline" or modifier == "storytelling" or modifier == "horizontal-storytelling" %}
</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" or modifier == "horizontal-storytelling" %}
<span class="bux-card__read-time">{{ read_time }}</span>
{% elseif card_cta %}
{% if modifier == "featured" %}
<a class="bux-button bux-button--alt" href="{{ card_url }}">{{ card_cta }}</a>
{% else %}
<div class="bux-card__cta">
<a href="{{ card_url }}">
<span>{{ card_cta }}</span>
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
#
Gray BackgroundThis is a card with a gray background
<div class="bux-card bux-card--gray">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image" src="/img/location" alt="">
<div class="bux-card__content">
<h3 class="bux-card__heading">
<span>Card heading</span>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="bux-card__cta">
<a href="#">
<span>Call to Action</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 %}
{% include '@image' with { image_url: image_url } %}
{% 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">
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<a href="{{ card_url }}" target="_blank" class="bux-card__heading--storytelling-link">
{% endif %}
<span>{{ card_heading }}</span>
{% if modifier == "linked-headline" or modifier == "storytelling" or modifier == "horizontal-storytelling" %}
</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" or modifier == "horizontal-storytelling" %}
<span class="bux-card__read-time">{{ read_time }}</span>
{% elseif card_cta %}
{% if modifier == "featured" %}
<a class="bux-button bux-button--alt" href="{{ card_url }}">{{ card_cta }}</a>
{% else %}
<div class="bux-card__cta">
<a href="{{ card_url }}">
<span>{{ card_cta }}</span>
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
#
Without BorderThis is a card without a border
<div class="bux-card bux-card--no-border">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image" src="/img/location" alt="">
<div class="bux-card__content">
<h3 class="bux-card__heading">
<span>Card Heading</span>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="bux-card__cta">
<a href="#">
<span>Call to Action</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 %}
{% include '@image' with { image_url: image_url } %}
{% 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">
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<a href="{{ card_url }}" target="_blank" class="bux-card__heading--storytelling-link">
{% endif %}
<span>{{ card_heading }}</span>
{% if modifier == "linked-headline" or modifier == "storytelling" or modifier == "horizontal-storytelling" %}
</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" or modifier == "horizontal-storytelling" %}
<span class="bux-card__read-time">{{ read_time }}</span>
{% elseif card_cta %}
{% if modifier == "featured" %}
<a class="bux-button bux-button--alt" href="{{ card_url }}">{{ card_cta }}</a>
{% else %}
<div class="bux-card__cta">
<a href="{{ card_url }}">
<span>{{ card_cta }}</span>
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
#
Linked HeadlineThis card has a linked headline
<div class="bux-card bux-card--linked-headline">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image" src="/img/location" alt="">
<div class="bux-card__content">
<h3 class="bux-card__heading">
<a href="#" target="_blank" class="bux-card__heading--link">
<span>This card has a linked headline</span>
</a>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</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 %}
{% include '@image' with { image_url: image_url } %}
{% 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">
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<a href="{{ card_url }}" target="_blank" class="bux-card__heading--storytelling-link">
{% endif %}
<span>{{ card_heading }}</span>
{% if modifier == "linked-headline" or modifier == "storytelling" or modifier == "horizontal-storytelling" %}
</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" or modifier == "horizontal-storytelling" %}
<span class="bux-card__read-time">{{ read_time }}</span>
{% elseif card_cta %}
{% if modifier == "featured" %}
<a class="bux-button bux-button--alt" href="{{ card_url }}">{{ card_cta }}</a>
{% else %}
<div class="bux-card__cta">
<a href="{{ card_url }}">
<span>{{ card_cta }}</span>
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
#
StorytellingThis is a storytelling card
<div class="bux-card bux-card--storytelling">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image" src="/img/location" alt="">
<div class="bux-card__content">
<span class="bux-card__taxonomy">
Optional Taxonomy
</span>
<h3 class="bux-card__heading">
<a href="#" target="_blank" class="bux-card__heading--storytelling-link">
<span>This is a storytelling card</span>
</a>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</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 %}
{% include '@image' with { image_url: image_url } %}
{% 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">
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<a href="{{ card_url }}" target="_blank" class="bux-card__heading--storytelling-link">
{% endif %}
<span>{{ card_heading }}</span>
{% if modifier == "linked-headline" or modifier == "storytelling" or modifier == "horizontal-storytelling" %}
</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" or modifier == "horizontal-storytelling" %}
<span class="bux-card__read-time">{{ read_time }}</span>
{% elseif card_cta %}
{% if modifier == "featured" %}
<a class="bux-button bux-button--alt" href="{{ card_url }}">{{ card_cta }}</a>
{% else %}
<div class="bux-card__cta">
<a href="{{ card_url }}">
<span>{{ card_cta }}</span>
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
#
HorizontalThis is a horizontal card
<div class="bux-card bux-card--horizontal">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img
class="bux-image"
src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
alt=""
/>
<div class="bux-card__content">
<h3 class="bux-card__heading">
<span>This is a horizontal card</span>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="bux-card__cta">
<a href="#">
<span>Call to action</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 %}
{% include '@image' with { image_url: image_url } %}
{% 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">
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<a href="{{ card_url }}" target="_blank" class="bux-card__heading--storytelling-link">
{% endif %}
<span>{{ card_heading }}</span>
{% if modifier == "linked-headline" or modifier == "storytelling" or modifier == "horizontal-storytelling" %}
</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" or modifier == "horizontal-storytelling" %}
<span class="bux-card__read-time">{{ read_time }}</span>
{% elseif card_cta %}
{% if modifier == "featured" %}
<a class="bux-button bux-button--alt" href="{{ card_url }}">{{ card_cta }}</a>
{% else %}
<div class="bux-card__cta">
<a href="{{ card_url }}">
<span>{{ card_cta }}</span>
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
#
Horizontal StorytellingThis is a horizontal storytelling card
<div class="bux-card bux-card--horizontal-storytelling">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="" />
<div class="bux-card__content">
<span class="bux-card__taxonomy">
Optional Taxonomy
</span>
<h3 class="bux-card__heading">
<a href="#" target="_blank" class="bux-card__heading--storytelling-link">
<span>This is a storytelling card</span>
</a>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</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 %}
{% include '@image' with { image_url: image_url } %}
{% 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">
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<a href="{{ card_url }}" target="_blank" class="bux-card__heading--storytelling-link">
{% endif %}
<span>{{ card_heading }}</span>
{% if modifier == "linked-headline" or modifier == "storytelling" or modifier == "horizontal-storytelling" %}
</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" or modifier == "horizontal-storytelling" %}
<span class="bux-card__read-time">{{ read_time }}</span>
{% elseif card_cta %}
{% if modifier == "featured" %}
<a class="bux-button bux-button--alt" href="{{ card_url }}">{{ card_cta }}</a>
{% else %}
<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 is required. Here are some possible combinations of required elements and card variants.
#
Image omitted, gray backgroundThis is a card without an image
#
Body text omittedThis is a card without body text
#
Usage#
Dos- Use the Default Card variant for informational content, such as programs or resources
- Use the Storytelling Card variant for news articles or digital stories
- Always include a title and link
- Keep Card title short for quick scanning
- Consider creating a collection of Cards, rather than a single Card
#
Don’ts- Don’t use Cards for a simple action; use a Text Link or Button instead
- Don’t inconsistently use images or links
- Don’t mix and match Card variants within the same collection
- Don’t repeat content (like the same image) in a collection
- Don't use more than one taxonomy item in Storytelling cards
#
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>
#
Accessibility- All cards must have one link within them that is reachable by the keyboard and is not hidden from assistive technology. The overlay link that makes the whole card clickable is not accessible so either the headline or the call-to-action must also be a link.
- Make sure to write appropriate alternative text if including an image in your card.
- See the WebAIM website for more information on writing alternative text for images.
- Calls-to-action should use informative text. Having several links that say “Read more” but all go to different places is a bad experience for assistive technology users.