Card

A Card displays content and an action about a single subject.

Use a Card to group related content, including an image, title, body and link. A heading and link are required. The card image features a zoom-in microinteraction on hover. It provides immediate feedback that the card is interactive, helping users understand that they can click on it. This improves usability and discoverability.

Examples

Default

Three young people lay hands on the face of Thompson Library bust

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action

<div class="bux-card" role="group" aria-label="Card">
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <img
    class="bux-image bux-image--16x9"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt="Three young people lay hands on the face of Thompson Library bust"
  />

  <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>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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 Background

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action

<div class="bux-card bux-card--gray" role="group" aria-label="Card">
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <img
    class="bux-image bux-image--16x9"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt="Three young people lay hands on the face of Thompson Library bust"
  />

  <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>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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 Border

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action

<div class="bux-card bux-card--no-border" role="group" aria-label="Card">
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <img
    class="bux-image bux-image--16x9"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt="Three young people lay hands on the face of Thompson Library bust"
  />

  <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>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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 Headline

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="bux-card bux-card--linked-headline" role="group" aria-label="Card">
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <img
    class="bux-image bux-image--16x9"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt="Three young people lay hands on the face of Thompson Library bust"
  />

  <div class="bux-card__content">
    <h3 class="bux-card__heading">
      <a href="#" class="bux-card__heading--link">
        <span>Card Heading</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>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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>

Storytelling

Optional Taxonomy

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3-minute read

<div class="bux-card bux-card--storytelling" role="group" aria-label="Card">
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <img
    class="bux-image bux-image--16x9"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt="Three young people lay hands on the face of Thompson Library bust"
  />

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

    <h3 class="bux-card__heading">
      <a href="#" class="bux-card__heading--storytelling-link">
        <span>Card Heading</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>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action

<div class="bux-card bux-card--horizontal" role="group" aria-label="Card">
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <img
    class="bux-image bux-image--16x9"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt="Three young people lay hands on the face of Thompson Library bust"
  />

  <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>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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 Storytelling

Optional Taxonomy

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3-minute read

<div
  class="bux-card bux-card--horizontal-storytelling"
  role="group"
  aria-label="Card"
>
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <img
    class="bux-image bux-image--16x9"
    src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
    alt="Three young people lay hands on the face of Thompson Library bust"
  />

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

    <h3 class="bux-card__heading">
      <a href="#" class="bux-card__heading--storytelling-link">
        <span>Card Heading</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>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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>

Event

Sept

Optional taxonomy

Event Title

Time: 1:30 p.m. - 3:30 p.m.
Location: BLIC / Library

<div class="bux-card bux-card--event" role="group" aria-label="Event Card">
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <div class="bux-card__image">
    <div class="bux-card--event__date--wrapper">
      <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">Sept</div>
        <div class="bux-card--event__date--day">23</div>
      </div>
    </div>

    <img
      class="bux-image bux-image--16x9"
      src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
      alt="Three young people lay hands on the face of Thompson Library bust"
    />
  </div>
  <div class="bux-card__content">
    <span class="bux-card__taxonomy"> Optional taxonomy </span>

    <h3 class="bux-card__heading">
      <a href="#" class="bux-card__heading--link">
        <span>Event Title</span>
      </a>
    </h3>

    <div class="bux-mar-top-sp-16">
      <dl class="bux-icon-dl bux-icon-dl--event">
        <div class="bux-icon-dl__item">
          <dt class="icon icon-clock">Time</dt>
          <dd>1:30 p.m. - 3:30 p.m.</dd>
        </div>
        <div class="bux-icon-dl__item">
          <dt class="icon icon-location-pin">Location</dt>
          <dd>BLIC / Library</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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 Event

Sept

Optional taxonomy

Event Title

Time: 1:30 p.m. - 3:30 p.m.
Location: BLIC / Library

<div class="bux-card bux-card--event-horizontal" role="group" aria-label="Card">
  <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>

  <div class="bux-card__image">
    <div class="bux-card--event__date--wrapper">
      <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">Sept</div>
        <div class="bux-card--event__date--day">23</div>
      </div>
    </div>

    <img
      class="bux-image bux-image--16x9"
      src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
      alt="Three young people lay hands on the face of Thompson Library bust"
    />
  </div>
  <div class="bux-card__content">
    <span class="bux-card__taxonomy"> Optional taxonomy </span>

    <h3 class="bux-card__heading">
      <a href="#" class="bux-card__heading--link">
        <span>Event Title</span>
      </a>
    </h3>

    <div class="bux-mar-top-sp-16">
      <dl class="bux-icon-dl bux-icon-dl--event-horizontal">
        <div class="bux-icon-dl__item">
          <dt class="icon icon-clock">Time</dt>
          <dd>1:30 p.m. - 3:30 p.m.</dd>
        </div>
        <div class="bux-icon-dl__item">
          <dt class="icon icon-location-pin">Location</dt>
          <dd>BLIC / Library</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.2.0
Copyright (C) 2025 The Ohio State University
#}

{# 

Card

Available variables:

- modifier:             Sets the card variant. Allowed values: null, gray, 
                        no-border, linked-headline, storytelling, featured, 
                        horizontal, horizontal-storytelling
- card_heading_level:   Integer. Sets the heading level of the card heading.
- card_image:           Boolean. Set to true to display image.
- image_url:            URL for the card image. 
- image_alt_text:       Alt text for the card image.
- card_heading:         String for the card heading.
- card_name:            String for the type of card for aria-label. Default: "Card".
- card_body:            Content of the card body. Optional. 
- card_url:             URL for the card.
- card_cta:             String for the card CTA.
- taxonomy:             String for the storytelling card taxonomy.
- read_time:            String for the storytelling card read time.

#}

{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
    <div class="bux-card--event__date--month">{{ event.date.month }}</div>
    <div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
    {% if event.date_end %}
    <div class="bux-card--event__date-divider">to</div>
    <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
        <div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
    </div>
    {% endif %}
</div>
{% endset %}

<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
  <a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>

  {% if card_image %}
    {% if event %}
        <div class="bux-card__image">
        {{ dateBox }}
    {% endif %}
    {% set class = 'bux-image--16x9' %}
    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
    {% if event %}
        </div>
    {% endif %}
  {% elseif event %}
    {{ dateBox }}
  {% 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" or modifier == "event" 
        or modifier == "event-horizontal" %}
    <a href="{{ card_url }}" class="bux-card__heading--link">
    {% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
    <a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
    {% endif %}
      <span>{{ card_heading }}</span>
      {% if modifier == "linked-headline" or modifier == "storytelling" 
            or modifier == "horizontal-storytelling" or modifier == "event"
            or modifier == "event-horizontal" %}
    </a>
    {% endif %}
    </h{{ card_heading_level|default(2) }}>
    
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {% if modifier == "event" or modifier == "event-horizontal" %} 
    <div class="bux-mar-top-sp-16">
        {% include base_path ~ directory ~ bux ~ '/twig/list-description-icons.twig' with list_items %}
    </div>
    {% endif %}

    {% if modifier == "linked-headline" or modifier == "event" 
          or modifier == "event-horizontal" %}
    {% 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 Elements

Each 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

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action

Body text omitted

Card Heading

Call to Action

Event with date range

Sept

Oct

Optional taxonomy

Event Title

Time: 1:30 p.m. - 3:30 p.m.
Location: BLIC / Library

Usage

Dos

Use the Default Card variant for informational content, such as programs or resources
Use the Event Card variants to briefly highlight events details
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 notes

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>

Event cards should be passed a date that contains the month, day and time of the event, as well as a location. The date can optionally be a range.

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.

References

U.S. Web Design System (USWDS) card

Examples​

Default​

Card Heading

Gray Background​

Card Heading

Without Border​

Card Heading

Linked Headline​

Card Heading

Storytelling​

Card Heading

Horizontal​

Card Heading

Horizontal Storytelling​

Card Heading

Event​

Event Title

Horizontal Event​

Event Title

Card Elements​

Image omitted​

Card Heading

Body text omitted​

Card Heading

Event with date range​

Event Title

Usage​

Dos​

Don’ts​

Implementation notes​

Accessibility​

References​

Examples

Default

Gray Background

Without Border

Linked Headline

Storytelling

Horizontal

Horizontal Storytelling

Event

Horizontal Event

Card Elements

Image omitted

Body text omitted

Event with date range

Usage

Dos

Don’ts

Implementation notes

Accessibility

References