Card

JSThis component requires JavaScript.

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

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-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <img
      class="bux-image"
      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"
      height=""
      width=""
    />
  </div>

  <div class="bux-card__content">
    <h3 class="bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></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 class="bux-card__link" href="#" rel="noopener">
        <span class="bux-card__link__text">Call to Action</span>
      </a>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </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-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <img
      class="bux-image"
      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"
      height=""
      width=""
    />
  </div>

  <div class="bux-card__content">
    <h3 class="bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></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 class="bux-card__link" href="#" rel="noopener">
        <span class="bux-card__link__text">Call to Action</span>
      </a>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </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-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <img
      class="bux-image"
      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"
      height=""
      width=""
    />
  </div>

  <div class="bux-card__content">
    <h3 class="bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></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 class="bux-card__link" href="#" rel="noopener">
        <span class="bux-card__link__text">Call to Action</span>
      </a>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </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-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <img
      class="bux-image"
      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"
      height=""
      width=""
    />
  </div>

  <div class="bux-card__content">
    <h3 class="bux-card__heading">
      <a class="bux-card__link bux-card__heading--link" href="#" rel="noopener">
        <span>Card Heading</span>
        <span class="bux-card__heading-icon" aria-hidden="true"></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.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </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-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <img
      class="bux-image"
      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"
      height=""
      width=""
    />
  </div>

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

    <h3 class="bux-card__heading">
      <a
        class="bux-card__link bux-card__heading--storytelling-link"
        href="#"
        rel="noopener"
      >
        <span>Card Heading</span>
        <span class="bux-card__heading-icon" aria-hidden="true"></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.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </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-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <div class="bux-card__image-wrapper">
      <img
        class="bux-image"
        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"
        height=""
        width=""
      />
    </div>
  </div>

  <div class="bux-card__content">
    <h3 class="bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></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 class="bux-card__link" href="#" rel="noopener">
        <span class="bux-card__link__text">Call to Action</span>
      </a>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </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-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <div class="bux-card__image-wrapper">
      <img
        class="bux-image"
        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"
        height=""
        width=""
      />
    </div>
  </div>

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

    <h3 class="bux-card__heading">
      <a
        class="bux-card__link bux-card__heading--storytelling-link"
        href="#"
        rel="noopener"
      >
        <span>Card Heading</span>
        <span class="bux-card__heading-icon" aria-hidden="true"></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.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </div>
      {% endif %}
    {% endif %}
  </div>
</div>

Event

Sept

23

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-roledescription="Event Card"
  aria-label="Event Title"
>
  <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"
      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"
      height=""
      width=""
    />
  </div>

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

    <h3 class="bux-card__heading">
      <a class="bux-card__link bux-card__heading--link" href="#" rel="noopener">
        <span>Event Title</span>
        <span class="bux-card__heading-icon" aria-hidden="true"></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>
            <span class="icon icon-clock" role="img" aria-hidden="true"></span>
            Time
          </dt>
          <dd>1:30 p.m. - 3:30 p.m.</dd>
        </div>
        <div class="bux-icon-dl__item">
          <dt>
            <span
              class="icon icon-location-pin"
              role="img"
              aria-hidden="true"
            ></span>
            Location
          </dt>
          <dd>BLIC / Library</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </div>
      {% endif %}
    {% endif %}
  </div>
</div>

Horizontal Event

Sept

23

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-roledescription="Card"
  aria-label="Event Title"
>
  <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>

    <div class="bux-card__image-wrapper">
      <img
        class="bux-image"
        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"
        height=""
        width=""
      />
    </div>
  </div>

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

    <h3 class="bux-card__heading">
      <a class="bux-card__link bux-card__heading--link" href="#" rel="noopener">
        <span>Event Title</span>
        <span class="bux-card__heading-icon" aria-hidden="true"></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>
            <span class="icon icon-clock" role="img" aria-hidden="true"></span>
            Time
          </dt>
          <dd>1:30 p.m. - 3:30 p.m.</dd>
        </div>
        <div class="bux-icon-dl__item">
          <dt>
            <span
              class="icon icon-location-pin"
              role="img"
              aria-hidden="true"
            ></span>
            Location
          </dt>
          <dd>BLIC / Library</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Card

Available Variables:
  - image_url:           URL for the card image.
  - image_alt_text:      Alt text for the card image.
  - card_heading_level:  Integer. Sets the heading level of the card heading.
  - card_heading:        String for the card heading.
  - card_body:           Content of the card body. Optional.
  - card_url:            URL for the card.
  - card_cta:            String for the card CTA.
  - card_image:          Boolean. Set to true to display image.
  - modifier:            Optional. Sets the card variant. Allowed values: null, gray, no-border, linked-headline, storytelling, featured, horizontal, horizontal-storytelling, event, event-horizontal.
  - taxonomy:            Optional. String for the storytelling card taxonomy.
  - read_time:           Optional. String for the storytelling card read time.
  - card_name:           Optional. String for the type of card for aria-label. Default: "Card".
  - event:               Optional. Object containing date information for event card variants.
  - list_items:          Optional. Array of items (term, desc, icon) typically used for event details like time and location.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 03-10-2026 15:55:15
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{# --- Component Flags --- #}
{% set aria_role = card_name|default('Card') %}
{% set is_event = modifier in ['event', 'event-horizontal'] %}
{% set is_storytelling = modifier in ['storytelling', 'horizontal-storytelling'] %}
{% set is_horizontal = modifier in ['horizontal', 'horizontal-storytelling', 'event-horizontal'] %}
{% set is_featured = modifier == 'featured' %}
{% set is_linked = modifier
  in ['linked-headline', 'event', 'event-horizontal', 'storytelling', 'horizontal-storytelling']
%}

{# --- Attributes --- #}
{% set card_classes = ['bux-card', modifier ? 'bux-card--' ~ modifier : '']|join(' ')|trim %}

{% set card_attributes = {
  class: card_classes,
  role: 'group',
  'aria-roledescription': aria_role,
  'aria-label': card_heading|default(null)
} %}

{# --- Date Markup --- #}
{% set date_markup %}
  {% if is_event %}
    <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>
  {% endif %}
{% endset %}

{# --- Base Image Markup --- #}
{% set image_markup %}
  {% include '@bux/image/image.twig' %}
{% endset %}

<div {{ Attributes.render(card_attributes) }}>
  {# --- Image & Event Header --- #}
  {% if card_image and event %}
    <div class="bux-card__image">
      {{ date_markup }}
      {% if is_horizontal %}
        <div class="bux-card__image-wrapper">
          {{ image_markup }}
        </div>
      {% else %}
        {{ image_markup }}
      {% endif %}
    </div>
  {% elseif card_image %}
    {% if is_horizontal %}
      <div class="bux-card__image-wrapper">
        {{ image_markup }}
      </div>
    {% else %}
      {{ image_markup }}
    {% endif %}
  {% elseif event %}
    {{ date_markup }}
  {% endif %}

  {# --- Card Content --- #}
  <div class="bux-card__content">
    {% if taxonomy %}
      <span class="bux-card__taxonomy">{{ taxonomy }}</span>
    {% endif %}

    {# --- Header --- #}
    {% embed '@bux/heading/heading.twig'
      with {
        heading_level: card_heading_level|default(2),
        base_class: 'bux-card__heading'
      }
    %}
      {% block content %}
        {% if is_linked %}
          {% set heading_link_class = is_storytelling
            ? 'bux-card__heading--storytelling-link'
            : 'bux-card__heading--link'
          %}
          {% embed '@bux/link/link.twig'
            with {
              base_class: 'bux-card__link ' ~ heading_link_class,
              link_url: card_url,
              card_heading: card_heading
            } only
          %}
            {% block content %}
              <span>{{ card_heading }}</span>
              <span class="bux-card__heading-icon" aria-hidden="true"></span>
            {% endblock content %}
          {% endembed %}
        {% else %}
          <span>{{ card_heading }}</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        {% endif %}
      {% endblock content %}
    {% endembed %}

    {# --- Body --- #}
    {% if card_body %}
      <div class="bux-card__body">
        {{ card_body }}
      </div>
    {% endif %}

    {# --- Event Details --- #}
    {% if is_event %}
      <div class="bux-mar-top-sp-16">
        {% include '@bux/list-description-icons/list-description-icons.twig' with list_items %}
      </div>
    {% endif %}

    {# --- Footer --- #}
    {% if is_linked and is_storytelling %}
      <span class="bux-card__read-time">{{ read_time }}</span>
    {% elseif not is_linked and card_cta %}
      {% if is_featured %}
        {% embed '@bux/link/link.twig'
          with {
            link_url: card_url
          }
        %}
          {% block content %}
            {% include '@bux/button/button.twig' with {
              button_text: card_cta,
              modifier: 'alt'
            } only %}
          {% endblock content %}
        {% endembed %}
      {% else %}
        <div class="bux-card__cta">
          {% include '@bux/link/link.twig' with {
            base_class: 'bux-card__link',
            link_url: card_url,
            link_text: card_cta,
            show_underline: false
          } only %}
        </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

23

to

Oct

3

Optional taxonomy

Event Title

Time

1:30 p.m. - 3:30 p.m.

Location

BLIC / Library

Event with no image and date range

Sept

23

to

Oct

3

Optional taxonomy

Event Title

Time

1:30 p.m. - 3:30 p.m.

Location

BLIC / Library

Horizontal event with date range

Sept

23

to

Oct

3

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