Sliding Selector

JSThis component requires JavaScript.

A compact, visual component that pairs titles with supporting content such as quotes, images, or storytelling cards.

The Sliding Selector is a compact, visual component that pairs titles with supporting content, such as quotes, images, or storytelling cards, making it ideal for highlighting storytelling content.

This component allows users to quickly scan, compare, and select items. It is effective where space is limited or when users benefit from revealing one option at a time. Common placements include landing pages, among others.

Examples

Default

• Connected Communities
• Opportunity
• Health

• 

  Early screenings are unlocking young readers’ potential

  With help from Ohio State, 9-year-old Harper found her voice and confidence in reading. Her journey shows the power of early dyslexia screening and advocacy.

  Read the story
• 

  Keeping Ohio’s experts in their fields

  Ohio farmer Len Vonderhaar feared losing his passion due to health issues, but thanks to Ohio State’s AgrAbility program, he's still farming and contributing to his community.

  Read more
• 

  Community health workers are changing local care

  A routine colonoscopy Joyce Calamese delayed for years revealed Stage 4 cancer — but thanks to a community health worker trained at Ohio State, she received life-saving care and ongoing support.

  Learn more

<section
  class="bux-selector bux-selector--sliding"
  aria-label="Most recent stories by category"
>
  <div
    class="visually-hidden bux-selector--sliding__announcer"
    aria-live="polite"
  ></div>

  <div class="bux-selector__titles" role="group" aria-label="Story categories">
    <div class="titles__indicator" aria-hidden="true">
      <div class="indicator__track"></div>
      <div class="indicator__active-line"></div>
    </div>
    <ul class="titles__item-titles" data-title-size="large">
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h2 text">Connected Communities</span>
        </button>
        <span class="title__text--mobile bux-hlarge">
          Connected Communities
        </span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h2 text">Opportunity</span>
        </button>
        <span class="title__text--mobile bux-hlarge">Opportunity</span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h2 text">Health</span>
        </button>
        <span class="title__text--mobile bux-hlarge">Health</span>
      </li>
    </ul>
  </div>

  <div
    class="bux-gallery-controls"
    aria-label="carousel navigation"
    role="group"
  >
    <button
      class="bux-gallery-controls__previous bux-gallery-controls__btn bux-button--alt"
      aria-label="previous"
    >
      <span class="icon icon-chevron-left" aria-hidden="true"></span>
    </button>
    <button
      class="bux-gallery-controls__next bux-gallery-controls__btn bux-button--alt"
      aria-label="next"
    >
      <span class="icon icon-chevron-right" aria-hidden="true"></span>
    </button>
  </div>

  <div class="bux-slider bux-selector__content">
    <ul class="bux-slider__slides" role="group" aria-roledescription="carousel">
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <div
            class="bux-card bux-card--no-border slide__content"
            role="group"
            aria-roledescription="Card"
            aria-label="Early screenings are unlocking young readers’ potential"
            class="slide__content"
          >
            <div class="bux-card__image">
              <img
                class="bux-image"
                src="/images/placeholders/selector/card/1.webp"
                alt="A mother and her daughter sit together and read on a lawn"
                height=""
                width=""
              />
            </div>

            <div class="bux-card__content">
              <h3 class="bux-heading bux-card__heading">
                <span>
                  Early screenings are unlocking young readers’ potential
                </span>
                <span class="bux-card__heading-icon" aria-hidden="true"></span>
              </h3>

              <div class="bux-card__body">
                With help from Ohio State, 9-year-old Harper found her voice and
                confidence in reading. Her journey shows the power of early
                dyslexia screening and advocacy.
              </div>

              <div class="bux-card__cta">
                <a class="bux-card__link" href="#" rel="noopener">
                  <span class="bux-card__link__text">Read the story</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <div
            class="bux-card bux-card--no-border slide__content"
            role="group"
            aria-roledescription="Card"
            aria-label="Keeping Ohio’s experts in their fields"
            class="slide__content"
          >
            <div class="bux-card__image">
              <img
                class="bux-image"
                src="/images/placeholders/selector/card/2.webp"
                alt="Ohio farmer Len Vonderhaar stands next to his combine."
                height=""
                width=""
              />
            </div>

            <div class="bux-card__content">
              <h3 class="bux-heading bux-card__heading">
                <span>Keeping Ohio’s experts in their fields</span>
                <span class="bux-card__heading-icon" aria-hidden="true"></span>
              </h3>

              <div class="bux-card__body">
                Ohio farmer Len Vonderhaar feared losing his passion due to
                health issues, but thanks to Ohio State’s AgrAbility program,
                he's still farming and contributing to his community.
              </div>

              <div class="bux-card__cta">
                <a class="bux-card__link" href="#" rel="noopener">
                  <span class="bux-card__link__text">Read more</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <div
            class="bux-card bux-card--no-border slide__content"
            role="group"
            aria-roledescription="Card"
            aria-label="Community health workers are changing local care"
            class="slide__content"
          >
            <div class="bux-card__image">
              <img
                class="bux-image"
                src="/images/placeholders/selector/card/3.webp"
                alt="Ohio State community health worker Delores Richardson and cancer survivor Joyce Calamese walk in a park."
                height=""
                width=""
              />
            </div>

            <div class="bux-card__content">
              <h3 class="bux-heading bux-card__heading">
                <span>Community health workers are changing local care</span>
                <span class="bux-card__heading-icon" aria-hidden="true"></span>
              </h3>

              <div class="bux-card__body">
                A routine colonoscopy Joyce Calamese delayed for years revealed
                Stage 4 cancer — but thanks to a community health worker trained
                at Ohio State, she received life-saving care and ongoing
                support.
              </div>

              <div class="bux-card__cta">
                <a class="bux-card__link" href="#" rel="noopener">
                  <span class="bux-card__link__text">Learn more</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>

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

{#

Sliding Selector

Available Variables:
  - selector_label:  An accessible label for the whole selector component
  - items_label:     An accessible label for the item titles
  - title_size:      Optional. What size titles to use. Large (BUX H2-sized) is best for short titles, whereas small (BUX H4-sized) can accommodate longer titles.
  - heading:         Optional. Optional heading for the whole selector
  - heading_level:   Optional. Semantic HTML heading tag level for the selector heading
  - items:           Array of items, their titles, and content

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: 07-09-2026 10:36:15
#}

<section class="bux-selector bux-selector--sliding" aria-label="{{ selector_label }}">
  <div class="visually-hidden bux-selector--sliding__announcer" aria-live="polite"></div>
  {% if heading is defined %}
    <div class="bux-selector__heading">
      <h{{heading_level}} class="bux-h2 heading__text">
        {{ heading }}
      </h{{heading_level}}>
    </div>
  {% endif %}

  <div class="bux-selector__titles" role="group" aria-label="{{ items_label }}">
    <div class="titles__indicator" aria-hidden="true">
      <div class="indicator__track"></div>
      <div class="indicator__active-line"></div>
    </div>
    <ul class="titles__item-titles" data-title-size="{{ title_size }}">
      {% for item in items %}
        <li class="item-titles__title">
          <button type="button" class="title__text">
            <span class="bux-h{{ title_size == 'large' ? 2 : 4 }} text">{{ item.title }}</span>
          </button>
          <span class="title__text--mobile bux-h{{ title_size }}">{{ item.title }}</span>
        </li>
      {% endfor %}
    </ul>
  </div>

  {% include '@bux/gallery/gallery-controls/gallery-controls.twig' only %}

  <div class="bux-slider bux-selector__content">
    <ul class="bux-slider__slides" role="group" aria-roledescription="carousel">
      {% for item in items %}
        <li class="bux-slider__slide" aria-roledescription="slide">
          <div class="slide__content-wrapper">
            {% set content_component = '@bux/' ~ item.content_component ~ '/' ~ item.content_component ~ '.twig' %}
            {% include content_component with item.content|merge({
              attrs: {
                class: 'slide__content'
              }
            }) only %}
          </div>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

Large Titles with Quotes

Large (BUX H2-sized) titles are best for short titles. Here they are paired with Quote content.

• Marti Chaatsmith
• Dr. Christine Ballengee-Morris
• Dr. John Low

• 

  “Tribal participation in the interpretation and management of the ancient and historical landscape is vital to the Indigenous legacy of Ohio.”

  Marti Chaatsmith

  Associate Director of Newark Earthworks Center; Comanche Nation, descendant of the Choctaw Nation of Oklahoma

• 

  “Without collective traditional ways, the earthworks would not exist. The builders’ knowledge enfolded in the everyday and the story of the everyday was passed down generation to generation; connecting who they were to who we are becoming.”

  Dr. Christine Ballengee-Morris

  Former Director of American Indian Studies at The Ohio State University

• 

  “Forty-two current sovereign American Indian Nations... were scattered and fled north to Canada, Michigan, Wisconsin, Minnesota, and/or Mexico during the removal period... But the citizens of these tribal nations remain stakeholders in the management and care of these ‘monuments of the Ohio River Valley.’”

  Dr. John Low (Pokagon Band of Potawatomi)

  Director of the Newark Earthworks Center

<section
  class="bux-selector bux-selector--sliding"
  aria-label="Most recent stories by category"
>
  <div
    class="visually-hidden bux-selector--sliding__announcer"
    aria-live="polite"
  ></div>

  <div class="bux-selector__titles" role="group" aria-label="Story categories">
    <div class="titles__indicator" aria-hidden="true">
      <div class="indicator__track"></div>
      <div class="indicator__active-line"></div>
    </div>
    <ul class="titles__item-titles" data-title-size="large">
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h2 text">Marti Chaatsmith</span>
        </button>
        <span class="title__text--mobile bux-hlarge">Marti Chaatsmith</span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h2 text">Dr. Christine Ballengee-Morris</span>
        </button>
        <span class="title__text--mobile bux-hlarge">
          Dr. Christine Ballengee-Morris
        </span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h2 text">Dr. John Low</span>
        </button>
        <span class="title__text--mobile bux-hlarge">Dr. John Low</span>
      </li>
    </ul>
  </div>

  <div
    class="bux-gallery-controls"
    aria-label="carousel navigation"
    role="group"
  >
    <button
      class="bux-gallery-controls__previous bux-gallery-controls__btn bux-button--alt"
      aria-label="previous"
    >
      <span class="icon icon-chevron-left" aria-hidden="true"></span>
    </button>
    <button
      class="bux-gallery-controls__next bux-gallery-controls__btn bux-button--alt"
      aria-label="next"
    >
      <span class="icon icon-chevron-right" aria-hidden="true"></span>
    </button>
  </div>

  <div class="bux-slider bux-selector__content">
    <ul class="bux-slider__slides" role="group" aria-roledescription="carousel">
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <figure class="bux-quote slide__content">
            <img
              class="bux-image bux-quote__image bux-image--1x1"
              src="/images/placeholders/selector/quote/1.webp"
              alt=""
              height=""
              width=""
            />
            <blockquote class="bux-quote__blockquote">
              <p class="bux-quote__text">
                “Tribal participation in the interpretation and management of
                the ancient and historical landscape is vital to the Indigenous
                legacy of Ohio.”
              </p>
            </blockquote>
            <figcaption class="bux-quote__figcaption">
              <div class="bux-quote__author">Marti Chaatsmith</div>
              <cite class="bux-quote__source">
                Associate Director of Newark Earthworks Center; Comanche Nation,
                descendant of the Choctaw Nation of Oklahoma
              </cite>
            </figcaption>
          </figure>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <figure class="bux-quote slide__content">
            <img
              class="bux-image bux-quote__image bux-image--1x1"
              src="/images/placeholders/selector/quote/2.webp"
              alt=""
              height=""
              width=""
            />
            <blockquote class="bux-quote__blockquote">
              <p class="bux-quote__text">
                “Without collective traditional ways, the earthworks would not
                exist. The builders’ knowledge enfolded in the everyday and the
                story of the everyday was passed down generation to generation;
                connecting who they were to who we are becoming.”
              </p>
            </blockquote>
            <figcaption class="bux-quote__figcaption">
              <div class="bux-quote__author">
                Dr. Christine Ballengee-Morris
              </div>
              <cite class="bux-quote__source">
                Former Director of American Indian Studies at The Ohio State
                University
              </cite>
            </figcaption>
          </figure>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <figure class="bux-quote slide__content">
            <img
              class="bux-image bux-quote__image bux-image--1x1"
              src="/images/placeholders/selector/quote/3.webp"
              alt=""
              height=""
              width=""
            />
            <blockquote class="bux-quote__blockquote">
              <p class="bux-quote__text">
                “Forty-two current sovereign American Indian Nations... were
                scattered and fled north to Canada, Michigan, Wisconsin,
                Minnesota, and/or Mexico during the removal period... But the
                citizens of these tribal nations remain stakeholders in the
                management and care of these ‘monuments of the Ohio River
                Valley.’”
              </p>
            </blockquote>
            <figcaption class="bux-quote__figcaption">
              <div class="bux-quote__author">
                Dr. John Low (Pokagon Band of Potawatomi)
              </div>
              <cite class="bux-quote__source">
                Director of the Newark Earthworks Center
              </cite>
            </figcaption>
          </figure>
        </div>
      </li>
    </ul>
  </div>
</section>

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

{#

Sliding Selector

Available Variables:
  - selector_label:  An accessible label for the whole selector component
  - items_label:     An accessible label for the item titles
  - title_size:      Optional. What size titles to use. Large (BUX H2-sized) is best for short titles, whereas small (BUX H4-sized) can accommodate longer titles.
  - heading:         Optional. Optional heading for the whole selector
  - heading_level:   Optional. Semantic HTML heading tag level for the selector heading
  - items:           Array of items, their titles, and content

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: 07-09-2026 10:36:15
#}

<section class="bux-selector bux-selector--sliding" aria-label="{{ selector_label }}">
  <div class="visually-hidden bux-selector--sliding__announcer" aria-live="polite"></div>
  {% if heading is defined %}
    <div class="bux-selector__heading">
      <h{{heading_level}} class="bux-h2 heading__text">
        {{ heading }}
      </h{{heading_level}}>
    </div>
  {% endif %}

  <div class="bux-selector__titles" role="group" aria-label="{{ items_label }}">
    <div class="titles__indicator" aria-hidden="true">
      <div class="indicator__track"></div>
      <div class="indicator__active-line"></div>
    </div>
    <ul class="titles__item-titles" data-title-size="{{ title_size }}">
      {% for item in items %}
        <li class="item-titles__title">
          <button type="button" class="title__text">
            <span class="bux-h{{ title_size == 'large' ? 2 : 4 }} text">{{ item.title }}</span>
          </button>
          <span class="title__text--mobile bux-h{{ title_size }}">{{ item.title }}</span>
        </li>
      {% endfor %}
    </ul>
  </div>

  {% include '@bux/gallery/gallery-controls/gallery-controls.twig' only %}

  <div class="bux-slider bux-selector__content">
    <ul class="bux-slider__slides" role="group" aria-roledescription="carousel">
      {% for item in items %}
        <li class="bux-slider__slide" aria-roledescription="slide">
          <div class="slide__content-wrapper">
            {% set content_component = '@bux/' ~ item.content_component ~ '/' ~ item.content_component ~ '.twig' %}
            {% include content_component with item.content|merge({
              attrs: {
                class: 'slide__content'
              }
            }) only %}
          </div>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

Small Titles with Cards

Small (BUX H4-sized) titles can accommodate longer titles. Here they are paired with Card content.

Lorem ipsum dolor

• Ut enim ad minim veniam quis nostrud exercitation
• Ullamco laboris nisi ut aliquip ex ea commodo consequat
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
• Excepteur sint occaecat cupidatat

• 

  Early screenings are unlocking young readers’ potential

  With help from Ohio State, 9-year-old Harper found her voice and confidence in reading. Her journey shows the power of early dyslexia screening and advocacy.

  Read the story
• 

  Keeping Ohio’s experts in their fields

  Ohio farmer Len Vonderhaar feared losing his passion due to health issues, but thanks to Ohio State’s AgrAbility program, he's still farming and contributing to his community.

  Read more
• 

  Community health workers are changing local care

  A routine colonoscopy Joyce Calamese delayed for years revealed Stage 4 cancer — but thanks to a community health worker trained at Ohio State, she received life-saving care and ongoing support.

  Learn more
• 

  Shunt in culpa qui officia

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

  Lorem ipsum

<section
  class="bux-selector bux-selector--sliding"
  aria-label="Most recent stories by category"
>
  <div
    class="visually-hidden bux-selector--sliding__announcer"
    aria-live="polite"
  ></div>
  <div class="bux-selector__heading">
    <h2 class="bux-h2 heading__text">Lorem ipsum dolor</h2>
  </div>

  <div class="bux-selector__titles" role="group" aria-label="Story categories">
    <div class="titles__indicator" aria-hidden="true">
      <div class="indicator__track"></div>
      <div class="indicator__active-line"></div>
    </div>
    <ul class="titles__item-titles" data-title-size="small">
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">
            Ut enim ad minim veniam quis nostrud exercitation
          </span>
        </button>
        <span class="title__text--mobile bux-hsmall">
          Ut enim ad minim veniam quis nostrud exercitation
        </span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">
            Ullamco laboris nisi ut aliquip ex ea commodo consequat
          </span>
        </button>
        <span class="title__text--mobile bux-hsmall">
          Ullamco laboris nisi ut aliquip ex ea commodo consequat
        </span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum
          </span>
        </button>
        <span class="title__text--mobile bux-hsmall">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
        </span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">Excepteur sint occaecat cupidatat</span>
        </button>
        <span class="title__text--mobile bux-hsmall">
          Excepteur sint occaecat cupidatat
        </span>
      </li>
    </ul>
  </div>

  <div
    class="bux-gallery-controls"
    aria-label="carousel navigation"
    role="group"
  >
    <button
      class="bux-gallery-controls__previous bux-gallery-controls__btn bux-button--alt"
      aria-label="previous"
    >
      <span class="icon icon-chevron-left" aria-hidden="true"></span>
    </button>
    <button
      class="bux-gallery-controls__next bux-gallery-controls__btn bux-button--alt"
      aria-label="next"
    >
      <span class="icon icon-chevron-right" aria-hidden="true"></span>
    </button>
  </div>

  <div class="bux-slider bux-selector__content">
    <ul class="bux-slider__slides" role="group" aria-roledescription="carousel">
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <div
            class="bux-card bux-card--no-border slide__content"
            role="group"
            aria-roledescription="Card"
            aria-label="Early screenings are unlocking young readers’ potential"
            class="slide__content"
          >
            <div class="bux-card__image">
              <img
                class="bux-image"
                src="/images/placeholders/selector/card/1.webp"
                alt="A mother and her daughter sit together and read on a lawn"
                height=""
                width=""
              />
            </div>

            <div class="bux-card__content">
              <h4 class="bux-heading bux-card__heading">
                <span>
                  Early screenings are unlocking young readers’ potential
                </span>
                <span class="bux-card__heading-icon" aria-hidden="true"></span>
              </h4>

              <div class="bux-card__body">
                With help from Ohio State, 9-year-old Harper found her voice and
                confidence in reading. Her journey shows the power of early
                dyslexia screening and advocacy.
              </div>

              <div class="bux-card__cta">
                <a class="bux-card__link" href="#" rel="noopener">
                  <span class="bux-card__link__text">Read the story</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <div
            class="bux-card bux-card--no-border slide__content"
            role="group"
            aria-roledescription="Card"
            aria-label="Keeping Ohio’s experts in their fields"
            class="slide__content"
          >
            <div class="bux-card__image">
              <img
                class="bux-image"
                src="/images/placeholders/selector/card/2.webp"
                alt="Ohio farmer Len Vonderhaar stands next to his combine."
                height=""
                width=""
              />
            </div>

            <div class="bux-card__content">
              <h4 class="bux-heading bux-card__heading">
                <span>Keeping Ohio’s experts in their fields</span>
                <span class="bux-card__heading-icon" aria-hidden="true"></span>
              </h4>

              <div class="bux-card__body">
                Ohio farmer Len Vonderhaar feared losing his passion due to
                health issues, but thanks to Ohio State’s AgrAbility program,
                he's still farming and contributing to his community.
              </div>

              <div class="bux-card__cta">
                <a class="bux-card__link" href="#" rel="noopener">
                  <span class="bux-card__link__text">Read more</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <div
            class="bux-card bux-card--no-border slide__content"
            role="group"
            aria-roledescription="Card"
            aria-label="Community health workers are changing local care"
            class="slide__content"
          >
            <div class="bux-card__image">
              <img
                class="bux-image"
                src="/images/placeholders/selector/card/3.webp"
                alt="Ohio State community health worker Delores Richardson and cancer survivor Joyce Calamese walk in a park."
                height=""
                width=""
              />
            </div>

            <div class="bux-card__content">
              <h4 class="bux-heading bux-card__heading">
                <span>Community health workers are changing local care</span>
                <span class="bux-card__heading-icon" aria-hidden="true"></span>
              </h4>

              <div class="bux-card__body">
                A routine colonoscopy Joyce Calamese delayed for years revealed
                Stage 4 cancer — but thanks to a community health worker trained
                at Ohio State, she received life-saving care and ongoing
                support.
              </div>

              <div class="bux-card__cta">
                <a class="bux-card__link" href="#" rel="noopener">
                  <span class="bux-card__link__text">Learn more</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <div
            class="bux-card bux-card--no-border slide__content"
            role="group"
            aria-roledescription="Card"
            aria-label="Shunt in culpa qui officia"
            class="slide__content"
          >
            <div class="bux-card__image">
              <img
                class="bux-image"
                src="/images/placeholders/bux-image-placeholder-16-9.png"
                alt=""
                height=""
                width=""
              />
            </div>

            <div class="bux-card__content">
              <h4 class="bux-heading bux-card__heading">
                <span>Shunt in culpa qui officia</span>
                <span class="bux-card__heading-icon" aria-hidden="true"></span>
              </h4>

              <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">Lorem ipsum</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>

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

{#

Sliding Selector

Available Variables:
  - selector_label:  An accessible label for the whole selector component
  - items_label:     An accessible label for the item titles
  - title_size:      Optional. What size titles to use. Large (BUX H2-sized) is best for short titles, whereas small (BUX H4-sized) can accommodate longer titles.
  - heading:         Optional. Optional heading for the whole selector
  - heading_level:   Optional. Semantic HTML heading tag level for the selector heading
  - items:           Array of items, their titles, and content

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: 07-09-2026 10:36:15
#}

<section class="bux-selector bux-selector--sliding" aria-label="{{ selector_label }}">
  <div class="visually-hidden bux-selector--sliding__announcer" aria-live="polite"></div>
  {% if heading is defined %}
    <div class="bux-selector__heading">
      <h{{heading_level}} class="bux-h2 heading__text">
        {{ heading }}
      </h{{heading_level}}>
    </div>
  {% endif %}

  <div class="bux-selector__titles" role="group" aria-label="{{ items_label }}">
    <div class="titles__indicator" aria-hidden="true">
      <div class="indicator__track"></div>
      <div class="indicator__active-line"></div>
    </div>
    <ul class="titles__item-titles" data-title-size="{{ title_size }}">
      {% for item in items %}
        <li class="item-titles__title">
          <button type="button" class="title__text">
            <span class="bux-h{{ title_size == 'large' ? 2 : 4 }} text">{{ item.title }}</span>
          </button>
          <span class="title__text--mobile bux-h{{ title_size }}">{{ item.title }}</span>
        </li>
      {% endfor %}
    </ul>
  </div>

  {% include '@bux/gallery/gallery-controls/gallery-controls.twig' only %}

  <div class="bux-slider bux-selector__content">
    <ul class="bux-slider__slides" role="group" aria-roledescription="carousel">
      {% for item in items %}
        <li class="bux-slider__slide" aria-roledescription="slide">
          <div class="slide__content-wrapper">
            {% set content_component = '@bux/' ~ item.content_component ~ '/' ~ item.content_component ~ '.twig' %}
            {% include content_component with item.content|merge({
              attrs: {
                class: 'slide__content'
              }
            }) only %}
          </div>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

Small Titles with Images

Small titles paired with Image content.

• Audience growth
• Impressions
• Engagement
• Engagement vs Public Peers
• Engagement vs Private Peers

• 

  Q1-Q2 FY26 total followers: 2,749,639 (+6.4% increase compared to Q3-Q4 FY24)

• 

  Social media channels continue to drive a significant volume of impressions to bring awareness to the institution. Q1-Q2 FY26 total impressions: 103,003,009 (+24.9% increase compared to Q1-Q2 FY25). *Includes paid and organic impressions for Facebook and Instagram

• 

  Q1-Q2 FY26 total engagements: 3,770,255. *Includes paid and organic engagements for Facebook, Instagram and TikTok

• 

  In the first half of FY26, Ohio State led its public peers in total engagements in all content related to the university generated on X, Instagram and Facebook.

• 

  In the first half of FY26, Ohio State led its private peers in total engagements in all content related to the university generated on X, Instagram and Facebook.

<section
  class="bux-selector bux-selector--sliding"
  aria-label="Most recent stories by category"
>
  <div
    class="visually-hidden bux-selector--sliding__announcer"
    aria-live="polite"
  ></div>

  <div class="bux-selector__titles" role="group" aria-label="Story categories">
    <div class="titles__indicator" aria-hidden="true">
      <div class="indicator__track"></div>
      <div class="indicator__active-line"></div>
    </div>
    <ul class="titles__item-titles" data-title-size="small">
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">Audience growth</span>
        </button>
        <span class="title__text--mobile bux-hsmall">Audience growth</span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">Impressions</span>
        </button>
        <span class="title__text--mobile bux-hsmall">Impressions</span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">Engagement</span>
        </button>
        <span class="title__text--mobile bux-hsmall">Engagement</span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">Engagement vs Public Peers</span>
        </button>
        <span class="title__text--mobile bux-hsmall">
          Engagement vs Public Peers
        </span>
      </li>
      <li class="item-titles__title">
        <button type="button" class="title__text">
          <span class="bux-h4 text">Engagement vs Private Peers</span>
        </button>
        <span class="title__text--mobile bux-hsmall">
          Engagement vs Private Peers
        </span>
      </li>
    </ul>
  </div>

  <div
    class="bux-gallery-controls"
    aria-label="carousel navigation"
    role="group"
  >
    <button
      class="bux-gallery-controls__previous bux-gallery-controls__btn bux-button--alt"
      aria-label="previous"
    >
      <span class="icon icon-chevron-left" aria-hidden="true"></span>
    </button>
    <button
      class="bux-gallery-controls__next bux-gallery-controls__btn bux-button--alt"
      aria-label="next"
    >
      <span class="icon icon-chevron-right" aria-hidden="true"></span>
    </button>
  </div>

  <div class="bux-slider bux-selector__content">
    <ul class="bux-slider__slides" role="group" aria-roledescription="carousel">
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <figure class="bux-image slide__content">
            <img
              src="/images/placeholders/selector/image/1.png"
              alt=""
              height=""
              width=""
            />
            <figcaption class="bux-image-caption">
              <div class="bux-image-caption__text">
                Q1-Q2 FY26 total followers: 2,749,639 (+6.4% increase compared
                to Q3-Q4 FY24)
              </div>
            </figcaption>
          </figure>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <figure class="bux-image slide__content">
            <img
              src="/images/placeholders/selector/image/2.png"
              alt=""
              height=""
              width=""
            />
            <figcaption class="bux-image-caption">
              <div class="bux-image-caption__text">
                Social media channels continue to drive a significant volume of
                impressions to bring awareness to the institution. Q1-Q2 FY26
                total impressions: 103,003,009 (+24.9% increase compared to
                Q1-Q2 FY25). *Includes paid and organic impressions for Facebook
                and Instagram
              </div>
            </figcaption>
          </figure>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <figure class="bux-image slide__content">
            <img
              src="/images/placeholders/selector/image/3.png"
              alt=""
              height=""
              width=""
            />
            <figcaption class="bux-image-caption">
              <div class="bux-image-caption__text">
                Q1-Q2 FY26 total engagements: 3,770,255. *Includes paid and
                organic engagements for Facebook, Instagram and TikTok
              </div>
            </figcaption>
          </figure>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <figure class="bux-image slide__content">
            <img
              src="/images/placeholders/selector/image/4.png"
              alt=""
              height=""
              width=""
            />
            <figcaption class="bux-image-caption">
              <div class="bux-image-caption__text">
                In the first half of FY26, Ohio State led its public peers in
                total engagements in all content related to the university
                generated on X, Instagram and Facebook.
              </div>
            </figcaption>
          </figure>
        </div>
      </li>
      <li class="bux-slider__slide" aria-roledescription="slide">
        <div class="slide__content-wrapper">
          <figure class="bux-image slide__content">
            <img
              src="/images/placeholders/selector/image/5.png"
              alt=""
              height=""
              width=""
            />
            <figcaption class="bux-image-caption">
              <div class="bux-image-caption__text">
                In the first half of FY26, Ohio State led its private peers in
                total engagements in all content related to the university
                generated on X, Instagram and Facebook.
              </div>
            </figcaption>
          </figure>
        </div>
      </li>
    </ul>
  </div>
</section>

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

{#

Sliding Selector

Available Variables:
  - selector_label:  An accessible label for the whole selector component
  - items_label:     An accessible label for the item titles
  - title_size:      Optional. What size titles to use. Large (BUX H2-sized) is best for short titles, whereas small (BUX H4-sized) can accommodate longer titles.
  - heading:         Optional. Optional heading for the whole selector
  - heading_level:   Optional. Semantic HTML heading tag level for the selector heading
  - items:           Array of items, their titles, and content

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: 07-09-2026 10:36:15
#}

<section class="bux-selector bux-selector--sliding" aria-label="{{ selector_label }}">
  <div class="visually-hidden bux-selector--sliding__announcer" aria-live="polite"></div>
  {% if heading is defined %}
    <div class="bux-selector__heading">
      <h{{heading_level}} class="bux-h2 heading__text">
        {{ heading }}
      </h{{heading_level}}>
    </div>
  {% endif %}

  <div class="bux-selector__titles" role="group" aria-label="{{ items_label }}">
    <div class="titles__indicator" aria-hidden="true">
      <div class="indicator__track"></div>
      <div class="indicator__active-line"></div>
    </div>
    <ul class="titles__item-titles" data-title-size="{{ title_size }}">
      {% for item in items %}
        <li class="item-titles__title">
          <button type="button" class="title__text">
            <span class="bux-h{{ title_size == 'large' ? 2 : 4 }} text">{{ item.title }}</span>
          </button>
          <span class="title__text--mobile bux-h{{ title_size }}">{{ item.title }}</span>
        </li>
      {% endfor %}
    </ul>
  </div>

  {% include '@bux/gallery/gallery-controls/gallery-controls.twig' only %}

  <div class="bux-slider bux-selector__content">
    <ul class="bux-slider__slides" role="group" aria-roledescription="carousel">
      {% for item in items %}
        <li class="bux-slider__slide" aria-roledescription="slide">
          <div class="slide__content-wrapper">
            {% set content_component = '@bux/' ~ item.content_component ~ '/' ~ item.content_component ~ '.twig' %}
            {% include content_component with item.content|merge({
              attrs: {
                class: 'slide__content'
              }
            }) only %}
          </div>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

Usage

Dos

• Use related items, such as featured stories, long quotes, or people.
• Use high-quality imagery that aligns to our Photography standards and guidelines, such as images from our Signature Gallery.
• Limit items to 3-5.
• Keep item titles very short.

Don'ts

• Don't use low-quality images.
• Don't mix unrelated items that don't belong together conceptually.
• Don't use as primary navigation; use the Menu instead.
• Don't hide important navigation links inside this component, as they won't be easily found by users.

Implementation Notes

Adding content

With the Twig templates

When adding items using the Twig template, you'll provide your content items through the items variable as an array of item objects. Each item object should provide a title to display and specify which BUX component the "slide" is using via the content_component property — currently, the Sliding Selector supports card, quote, and image slides. Then, the content property should contain the variables needed by whichever BUX component you're using.

Other methods

If you implement the Sliding Selector without using the Twig templates, note that you'll need to put each "slide" content item inside a slide__content-wrapper div and add the slide__content class to the root element of your actual content item.

Accessibility

Labels and headings

Give the component context for screen reader users:

• Provide a concise heading to label the whole Sliding Selector (for example, "Most recent stories by category" or "Quotes from our faculty"). A heading is best paired with small-sized titles.
• Each item's title acts as its selection control, so keep titles short and descriptive — they're read when the user moves through the item titles area (or dropdown on mobile).

The component renders the heading with an appropriate semantic heading tag based on the chosen title_size so it fits into the page's heading order without changing the heading's visual appearance.

Controlling the Sliding Selector

The Sliding Selector should only change slides in response to the user's action. Don't programmatically change slides using a timer or other mechanism.