Featured Card

With high visual emphasis, a Featured Card displays content and an action about a single subject.

A Featured Card is often used on a Landing page layout, such as a homepage, campaign page or section index page, but can be used simply to break up the monotony of long-form content.

An event variant of a Featured Card is often used for a single event that is of high-priority, high-impact, popular, or time-sensitive.

Examples

Right Image

Card Heading

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

<div class="bux-featured-card bux-grid bux-grid--no-gutters">
  <div
    class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md"
  >
    <div
      class="bux-card bux-card--featured"
      role="group"
      aria-roledescription="Card"
      aria-label="Card Heading"
    >
      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Card Heading</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        </h2>

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

        <a class="bux-link bux-link--featured" href="#" rel="noopener">
          <button class="bux-button bux-button--alt">Call to Action</button>
        </a>
      </div>
    </div>
  </div>
  <div
    class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md"
  >
    <img
      class="bux-image"
      src="https://bux.osu.edu/img/example-images/osu-bux-2.jpg"
      alt="A marching band member high-fiving a crowd"
      height=""
      width=""
    />
  </div>
</div>

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

{#

Featured Card

Available Variables:
  - modifier:        Modifier for the featured card: featured, event
  - 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.
  - image_url:       URL for the featured card image.
  - image_alt_text:  Alt text for the featured card image.
  - image_position:  Optional. Set the position of the featured card image: left, right.
  - taxonomy:        Optional. String for the storytelling card taxonomy.
  - card_name:       Optional. String for the type of card for aria-label.
  - 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: 04-01-2026 14:28:47
#}

<div
  class="bux-featured-card bux-grid bux-grid--no-gutters{{
  image_position
    ? ' bux-featured-card--image-' ~ image_position
    : ''
  }}"
>
  <div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
    {% if modifier == 'event' %}
      {% include '@bux/card/card.twig' with {
        modifier: 'event',
        card_image: false
      } %}
    {% else %}
      {% include '@bux/card/card.twig' %}
    {% endif %}
  </div>
  <div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
    {% include '@bux/image/image.twig' %}
  </div>
</div>

Left Image

Card Heading

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

<div
  class="bux-featured-card bux-grid bux-grid--no-gutters bux-featured-card--image-left"
>
  <div
    class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md"
  >
    <div
      class="bux-card bux-card--featured"
      role="group"
      aria-roledescription="Card"
      aria-label="Card Heading"
    >
      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Card Heading</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        </h2>

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

        <a class="bux-link bux-link--featured" href="#" rel="noopener">
          <button class="bux-button bux-button--alt">Call to Action</button>
        </a>
      </div>
    </div>
  </div>
  <div
    class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md"
  >
    <img
      class="bux-image"
      src="https://bux.osu.edu/img/example-images/osu-bux-2.jpg"
      alt="A marching band member high-fiving a crowd"
      height=""
      width=""
    />
  </div>
</div>

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

{#

Featured Card

Available Variables:
  - modifier:        Modifier for the featured card: featured, event
  - 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.
  - image_url:       URL for the featured card image.
  - image_alt_text:  Alt text for the featured card image.
  - image_position:  Optional. Set the position of the featured card image: left, right.
  - taxonomy:        Optional. String for the storytelling card taxonomy.
  - card_name:       Optional. String for the type of card for aria-label.
  - 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: 04-01-2026 14:28:47
#}

<div
  class="bux-featured-card bux-grid bux-grid--no-gutters{{
  image_position
    ? ' bux-featured-card--image-' ~ image_position
    : ''
  }}"
>
  <div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
    {% if modifier == 'event' %}
      {% include '@bux/card/card.twig' with {
        modifier: 'event',
        card_image: false
      } %}
    {% else %}
      {% include '@bux/card/card.twig' %}
    {% endif %}
  </div>
  <div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
    {% include '@bux/image/image.twig' %}
  </div>
</div>

Event

Sept.

23

Optional topic

Event Title

Time

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

Location

BLIC / Library

<div
  class="bux-featured-card bux-grid bux-grid--no-gutters bux-featured-card--image-left"
>
  <div
    class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md"
  >
    <div
      class="bux-card bux-card--event"
      role="group"
      aria-roledescription="Featured Event Card"
      aria-label="Event Title"
    >
      <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__content">
        <span class="bux-card__taxonomy">Optional topic</span>

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

        <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>
  </div>
  <div
    class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md"
  >
    <img
      class="bux-image"
      src="https://bux.osu.edu/img/example-images/osu-bux-2.jpg"
      alt="A marching band member high-fiving a crowd"
      height=""
      width=""
    />
  </div>
</div>

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

{#

Featured Card

Available Variables:
  - modifier:        Modifier for the featured card: featured, event
  - 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.
  - image_url:       URL for the featured card image.
  - image_alt_text:  Alt text for the featured card image.
  - image_position:  Optional. Set the position of the featured card image: left, right.
  - taxonomy:        Optional. String for the storytelling card taxonomy.
  - card_name:       Optional. String for the type of card for aria-label.
  - 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: 04-01-2026 14:28:47
#}

<div
  class="bux-featured-card bux-grid bux-grid--no-gutters{{
  image_position
    ? ' bux-featured-card--image-' ~ image_position
    : ''
  }}"
>
  <div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
    {% if modifier == 'event' %}
      {% include '@bux/card/card.twig' with {
        modifier: 'event',
        card_image: false
      } %}
    {% else %}
      {% include '@bux/card/card.twig' %}
    {% endif %}
  </div>
  <div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
    {% include '@bux/image/image.twig' %}
  </div>
</div>

Usage

Dos

• Use to call attention to most important features among all content
• Limit to one per page; use occasionally on pages without sidebars
• Include a high-quality image
• Strongly consider using the included Button as a call-to-action
• Use the “right image” variant if the subject of the image faces left
• Use the “left image” variant if the subject of the image faces right

Don’ts

• Don’t write multiple paragraphs into the body
• Don't use if a high-visual emphasis is needed on a homepage; consider a Hero instead
• Don’t use images that contain text
• Don't use images that are low resolution or low quality

Accessibility

• 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