Card Carousel

The Card Carousel displays a set of related Cards that users can navigate though horizontally.

The Card Carousel component organizes multiple cards into a horizontally navigable container. It displays related content such as articles, programs or promotional items without overwhelming the page layout.

Examples

Default

Explore your musical passion

Join ensembles and discover opportunities to perform, collaborate, and grow as a musician at Ohio State Mansfield.

Learn about music opportunities

Build leadership through teamwork

Engage in team-building activities that strengthen communication, problem-solving, and leadership skills for your future career.

Discover student life

Make a difference today

Participate in campus blood drives and help save lives while connecting with a caring, service-driven community.

Volunteer for a blood drive

Hands-on engineering experience

Gain practical skills in engineering technology labs, just like Zachary Ernest, and prepare for real-world innovation.

Explore engineering programs

Dive into scientific discovery

Work in state-of-the-art labs, conducting experiments that build your knowledge and open doors to exciting careers.

Learn about lab opportunities

<div
  class="bux-card-carousel"
  role="group"
  aria-label="Stories"
  aria-roledescription="carousel"
>
  <div class="bux-card-carousel__nav bux-card-carousel__nav--left-column">
    <button
      class="bux-card-carousel__nav--left"
      type="button"
      tabindex="0"
      aria-label="Go to previous card"
    ></button>
  </div>
  <div class="bux-card-carousel__container">
    <div
      class="bux-card"
      role="group"
      aria-roledescription="Card"
      aria-label="Explore your musical passion"
    >
      <img
        class="bux-image"
        src="https://bux.osu.edu/files/previews/images/template-images/story-card1_23_4499263_20230.jpg"
        alt=""
      />

      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Explore your musical passion</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        </h2>

        <div class="bux-card__body">
          Join ensembles and discover opportunities to perform, collaborate, and
          grow as a musician at Ohio State Mansfield.
        </div>

        <div class="bux-card__cta">
          <a href="#" class="bux-card__link">
            <span>Learn about music opportunities</span>
          </a>
        </div>
      </div>
    </div>

    <div
      class="bux-card"
      role="group"
      aria-roledescription="Card"
      aria-label="Build leadership through teamwork"
    >
      <img
        class="bux-image"
        src="https://bux.osu.edu/files/previews/images/template-images/story-card5_22_3861899-3571.jpg"
        alt=""
      />

      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Build leadership through teamwork</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        </h2>

        <div class="bux-card__body">
          Engage in team-building activities that strengthen communication,
          problem-solving, and leadership skills for your future career.
        </div>

        <div class="bux-card__cta">
          <a href="#" class="bux-card__link">
            <span>Discover student life</span>
          </a>
        </div>
      </div>
    </div>

    <div
      class="bux-card"
      role="group"
      aria-roledescription="Card"
      aria-label="Make a difference today"
    >
      <img
        class="bux-image"
        src="https://bux.osu.edu/files/previews/images/template-images/story-card3_22_4156707_6683.jpg"
        alt=""
      />

      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Make a difference today</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        </h2>

        <div class="bux-card__body">
          Participate in campus blood drives and help save lives while
          connecting with a caring, service-driven community.
        </div>

        <div class="bux-card__cta">
          <a href="#" class="bux-card__link">
            <span>Volunteer for a blood drive</span>
          </a>
        </div>
      </div>
    </div>

    <div
      class="bux-card"
      role="group"
      aria-roledescription="Card"
      aria-label="Hands-on engineering experience"
    >
      <img
        class="bux-image"
        src="https://bux.osu.edu/files/previews/images/template-images/story-card2_23_4491381_20698.jpg"
        alt=""
      />

      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Hands-on engineering experience</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        </h2>

        <div class="bux-card__body">
          Gain practical skills in engineering technology labs, just like
          Zachary Ernest, and prepare for real-world innovation.
        </div>

        <div class="bux-card__cta">
          <a href="#" class="bux-card__link">
            <span>Explore engineering programs</span>
          </a>
        </div>
      </div>
    </div>

    <div
      class="bux-card"
      role="group"
      aria-roledescription="Card"
      aria-label="Dive into scientific discovery"
    >
      <img
        class="bux-image"
        src="https://bux.osu.edu/files/previews/images/template-images/story-card4_23_4317692_2015.jpg"
        alt=""
      />

      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Dive into scientific discovery</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></span>
        </h2>

        <div class="bux-card__body">
          Work in state-of-the-art labs, conducting experiments that build your
          knowledge and open doors to exciting careers.
        </div>

        <div class="bux-card__cta">
          <a href="#" class="bux-card__link">
            <span>Learn about lab opportunities</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="bux-card-carousel__nav bux-card-carousel__nav--right-column">
    <button
      class="bux-card-carousel__nav--right"
      tabindex="0"
      aria-label="Go to next card"
    ></button>
  </div>
</div>

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

<div class="bux-card-carousel" role="group" aria-label="{{name}}" aria-roledescription="carousel">
  <div class="bux-card-carousel__nav bux-card-carousel__nav--left-column">
    <button class="bux-card-carousel__nav--left" type="button" tabindex="0" aria-label="Go to previous card">
    </button>
  </div>
  <div class="bux-card-carousel__container">
    {% for item in items %}
        {% include base_path ~ directory ~ bux ~ '/twig/card.twig' with {
            card_image: true,
            image_url: item.card_image,
            card_image_alt: item.card_image_alt,
            card_heading_level: item.card_heading_level,
            card_heading: item.card_heading,
            card_body: item.card_body,
            card_url: item.card_url,
            card_cta: item.card_cta
        } %}
    {% endfor %}
  </div>
  <div class="bux-card-carousel__nav  bux-card-carousel__nav--right-column">
    <button class="bux-card-carousel__nav--right" tabindex="0" aria-label="Go to next card">
    </button>
  </div>
</div>

Usage

Dos

Use with 5 or more Cards
Limit the number of Cards to a manageable set (e.g. 5-8 items).
Establish consistent among the Cards by including the same elements within each Card (e.g. If one Card has an image, all Cards should include an image.)
Group cards in a carousel by related content.
Write copy within Cards to similar, concise lengths so Card heights are similar within the set.

Don'ts

Do not use carousels to navigate to crucial calls-to-action. A user may not discover all items in the carousel and therefore overlook crucial options.
Do not overload the carousel with an excessive amount of Cards.
Do not overload Cards with excessive text.
Do not auto-rotate content in the carousel; this takes away control from the user.

Implementation notes

Because the carousel is a collection of Card components, all Card implementation notes apply to the items within the carousel.

The carousel fills the width of its container and uses breakpoints to determine the number of cards displayed:

Small: 1 card
Medium: 3 cards
Large: 4 cards

Examples​

Default​