Hero

JSThis component requires JavaScript.

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

A Hero is often used at the top of a Landing page layout, such as a homepage, campaign page or section index page.

A Hero does have the capability of carouseling multiple slide. However, analytics have shown that engagement significantly decreases after the first slide, so only carousel if necessary.

Examples

Default

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero  bux-hero--card-left bux-hero--3x2">
  <div id="bux-hero__carousel-507877220-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-507877220-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--3x2 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Scarlet Left 3:2

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero bux-hero--scarlet bux-hero--card-left bux-hero--3x2">
  <div id="bux-hero__carousel-16356067-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-16356067-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--3x2 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Scarlet Right 3:2

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero bux-hero--scarlet bux-hero--card-right bux-hero--3x2">
  <div id="bux-hero__carousel-43779401-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-43779401-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--3x2 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Gray Left 3:2

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero  bux-hero--card-left bux-hero--3x2">
  <div id="bux-hero__carousel-1473199490-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-1473199490-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--3x2 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Gray Right 3:2

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero  bux-hero--card-right bux-hero--3x2">
  <div id="bux-hero__carousel-650405854-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-650405854-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--3x2 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Scarlet Left 16:9

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero bux-hero--scarlet bux-hero--card-left bux-hero--16x9">
  <div id="bux-hero__carousel-1610826405-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-1610826405-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--16x9 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Scarlet Right 16:9

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero bux-hero--scarlet bux-hero--card-right bux-hero--16x9">
  <div id="bux-hero__carousel-800402596-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-800402596-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--16x9 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Gray Left 16:9

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero  bux-hero--card-left bux-hero--16x9">
  <div id="bux-hero__carousel-790569818-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-790569818-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--16x9 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Gray Right 16:9

Headline lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero  bux-hero--card-right bux-hero--16x9">
  <div id="bux-hero__carousel-496833632-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-496833632-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--16x9 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Carousel

If necessary, the hero component can display multiple slides as a carousel.

Carousel of 3 slides. Use the Previous and Next buttons to navigate the slides.

Headline 1 lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

Headline 2 lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

Headline 3 lorem ipsum

Subhead lorem ipsum dolara met

Call to Action

<section class="bux-hero bux-hero--gray bux-hero--card-left bux-hero--carousel bux-hero--3x2" aria-roledescription="carousel" aria-label="Highlighted stories">
  <div class="visually-hidden">
    Carousel of 3 slides. Use the Previous and Next buttons to navigate the slides.
  </div>
  <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="bux-hero__carousel-1768951885-items" aria-label="Previous Slide">
    <span class="icon icon-chevron-left" aria-hidden="true"></span>
  </button>
  <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="bux-hero__carousel-1768951885-items" aria-label="Next Slide">
    <span class="icon icon-chevron-right" aria-hidden="true"></span>
  </button>
  <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
    <button id="bux-hero__carousel-1768951885-tabbutton-1" class="bux-hero__tab bux-hero__tab--active" type="button" role="tab" aria-label="Slide 1" aria-controls="bux-hero__carousel-1768951885-tab-1" tabindex="-1">
      <span class="visually-hidden">Slide 1</span>
    </button>
    <button id="bux-hero__carousel-1768951885-tabbutton-2" class="bux-hero__tab " type="button" role="tab" aria-label="Slide 2" aria-controls="bux-hero__carousel-1768951885-tab-2" tabindex="-1">
      <span class="visually-hidden">Slide 2</span>
    </button>
    <button id="bux-hero__carousel-1768951885-tabbutton-3" class="bux-hero__tab " type="button" role="tab" aria-label="Slide 3" aria-controls="bux-hero__carousel-1768951885-tab-3" tabindex="-1">
      <span class="visually-hidden">Slide 3</span>
    </button>
  </div>
  <div id="bux-hero__carousel-1768951885-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-1768951885-tab-1" class="bux-hero__container  showing" role="tabpanel" aria-roledescription="slide" aria-label="1 of 3">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline 1 lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--3x2 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
    <div id="bux-hero__carousel-1768951885-tab-2" class="bux-hero__container " role="tabpanel" aria-roledescription="slide" aria-label="2 of 3">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline 2 lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--3x2 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-2.jpg" alt="A marching band member high-fives a crowd" />
        </div>
      </div>
    </div>
    <div id="bux-hero__carousel-1768951885-tab-3" class="bux-hero__container " role="tabpanel" aria-roledescription="slide" aria-label="3 of 3">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline 3 lorem ipsum</span>
        </h2>
        <div class="bux-hero__subheader">
          <span>Subhead lorem ipsum dolara met</span>
        </div>
        <a class="bux-button bux-button--alt" href="#" rel="noopener">
          <span class="bux-button__text bux-button--alt__text">Call to Action</span>
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image--3x2 ">
          <img class="bux-image" src="/images/placeholders/osu-bux-4.jpg" alt="A person in a scarlet shirt poses for a photo" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Image with Gray Text Box

Headline lorem ipsum

Subhead lorem ipsum dolara met

<section class="bux-hero bux-hero--gray bux-hero--card-full">
  <div id="bux-hero__carousel-1048650992-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-1048650992-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <a class="bux-hero__subheader bux-text-link" rel="noopener">
          Subhead lorem ipsum dolara met
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image-- ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Image with White Text Box

Headline lorem ipsum

Subhead lorem ipsum dolara met

<section class="bux-hero bux-hero--white bux-hero--card-full">
  <div id="bux-hero__carousel-104942499-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-104942499-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <a class="bux-hero__subheader bux-text-link" rel="noopener">
          Subhead lorem ipsum dolara met
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image bux-hero__image-- ">
          <img class="bux-image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Video with Gray Text Box

Headline lorem ipsum

Subhead lorem ipsum dolara met

<section class="bux-hero bux-hero--gray bux-hero--card-full">
  <div id="bux-hero__carousel-395409758-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-395409758-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <a class="bux-hero__subheader bux-text-link" rel="noopener">
          Subhead lorem ipsum dolara met
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image">
          <video aria-label="Background Video" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
            <source src="/images/placeholders/hero-video-clip.mp4" type="video/mp4">
          </video>
          <button type="button" class="bux-hero__video-button">
            <span class="visually-hidden">Pause video</span>
            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
              <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
            </div>
            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
              <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Video with White Text Box

Headline lorem ipsum

Subhead lorem ipsum dolara met

<section class="bux-hero bux-hero--white bux-hero--card-full">
  <div id="bux-hero__carousel-1234096048-items" class="bux-hero__carousel-items">
    <div id="bux-hero__carousel-1234096048-tab-1" class="bux-hero__container  showing">
      <div class="bux-hero__content">
        <h2 class="bux-hero__header">
          <span>Headline lorem ipsum</span>
        </h2>
        <a class="bux-hero__subheader bux-text-link" rel="noopener">
          Subhead lorem ipsum dolara met
        </a>
      </div>
      <div class="bux-hero__image-container">
        <div class="bux-hero__image">
          <video aria-label="Background Video" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
            <source src="/images/placeholders/hero-video-clip.mp4" type="video/mp4">
          </video>
          <button type="button" class="bux-hero__video-button">
            <span class="visually-hidden">Pause video</span>
            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
              <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
            </div>
            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
              <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

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

{#

Hero

Available variables:

- background:           Sets the Hero background color. 
                        Allowed values: null, gray, scarlet
- card_orientation:     Sets whether the card is on the left, right or bottom.
                        Allowerd values: card-left, card-right, card-full
- ratio:                Sets the hero's image ratio.
                        Allowed values: null, 16x9, 3x2
- hero_heading_level:   Integer. Sets the heading level of the header.
- cards:                Array containing the cards for the hero carousel.
- card.hero_header:     String for the header section of the hero.
- card.hero_subheader:  String for the header subheader content.
- card.hero_image:      URL for the hero image.
- card.hero_image_alt:  String for the alt text of the hero image.
- card.button_text:     String for the hero button text.
- card.button_url:      URL for the hero button.

If using a video, the hero will default to the 'card-full' orientation.

- card.hero_video_mp4:  URL for the hero video.
- card.hero_aria_label: String for the video's aria-label.

If using more than one card in a carousel:

- carousel_aria_label:  String for the carousel aria-label.
- carousel_id:          Unique ID for the carousel.

#}

{% set random_seed = random() %}
{% set carousel_uniqueid = carousel_id ~ "-" ~ random_seed %}

<section class="bux-hero {% if background %}bux-hero--{{background}}{% endif %} bux-hero--{{card_orientation}}{% if cards|length > 1 %} bux-hero--carousel{% endif %}{% if ratio %} bux-hero--{{ratio}}{% endif %}"{% if (cards|length > 1) %} aria-roledescription="carousel" aria-label="{{carousel_aria_label}}"{% endif %}>
    {% if (cards|length > 1) %}
        <div class="visually-hidden">
            Carousel of {{ cards|length }} slides. Use the Previous and Next buttons to navigate the slides.
        </div>

        <button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Previous Slide"><span class="icon icon-chevron-left" aria-hidden="true"></span></button>
        <button class="bux-hero__button bux-hero__button--right" type="button" aria-controls="{{carousel_uniqueid}}-items" aria-label="Next Slide"><span class="icon icon-chevron-right" aria-hidden="true"></span></button>

    {% endif %}

    {% if (cards|length > 1) %}
        <div class="bux-hero__tabs" role="tablist" aria-label="Slides">
            {% for card in cards %}
                <button id="{{carousel_uniqueid}}-tabbutton-{{ loop.index }}" class="bux-hero__tab {% if loop.index == 1 %}bux-hero__tab--active{% endif %}" type="button" role="tab" aria-label="Slide {{ loop.index }}" aria-controls="{{carousel_uniqueid}}-tab-{{ loop.index }}" tabindex="-1">
                    <span class="visually-hidden">Slide {{ loop.index }}</span>
                </button>
            {% endfor %}
        </div>
    {% endif %}
    <div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items">
        {% for card in cards %}
        <div id="{{ carousel_uniqueid }}-tab-{{ loop.index }}" class="bux-hero__container {% if loop.index == 1 %} showing{% endif %}"{% if (cards|length > 1) %} role="tabpanel" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ cards.length }}"{% endif %}>

            <div class="bux-hero__content">

                <h{{ hero_heading_level|default(2) }} class="bux-hero__header">
                    <span>{{ card.hero_header }}</span>
                </h{{ hero_heading_level|default(2) }}>

                {% if card_orientation != 'card-full' %}
                    <div class="bux-hero__subheader">
                        <span>{{ card.hero_subheader }}</span>
                    </div>
                    {% include base_path ~ directory ~ bux ~ '/twig/link.twig' with {
                        base_class: "bux-button bux-button--alt",
                        link_url: card.button_url,
                        link_text: card.button_text,
                        show_underline: false
                    } %}
                {% else %}
                    {% embed '@link' with {
                        base_class: "bux-hero__subheader bux-text-link",
                        text_link_url: card.button_url,
                        text_link_text: card.hero_subheader,
                        show_underline: false
                    } %}
                        {% block content %}
                            Subhead lorem ipsum dolara met
                        {% endblock %}
                    {% endembed %}
                {% endif %}

            </div>
            <div class="bux-hero__image-container">

                {% if card.hero_image %}

                <div class="bux-hero__image bux-hero__image--{{ratio}} ">

                    {% set image_url = card.hero_image %}
                    {% set image_alt_text = card.hero_image_alt %}

                    {% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}

                    {% elseif card.hero_video_mp4 %}
                    <div class="bux-hero__image">
                        <video aria-label="{{card.hero_aria_label}}" tabindex="-1" loop="" autoplay="" playsinline="" muted="">
                            <source src="{{card.hero_video_mp4}}" type="video/mp4">
                        </video>
                        <button type="button" class="bux-hero__video-button">
                            <span class="visually-hidden">Pause video</span>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--play" aria-hidden="true">
                                <span class="bux-icon icon-play-fill" aria-hidden="true"></span>
                            </div>
                            <div class="bux-hero__video-button-icon bux-hero__video-button-icon--pause" aria-hidden="true">
                                <span class="bux-icon icon-pause-fill" aria-hidden="true"></span>
                            </div>
                        </button>
                        {% endif %}
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

</section>

Usage

Dos

• Use to call attention to the highest-priority among all content, such as a campaign, story or other call-to-action
• Limit to one per page
• Include a high-quality image
• Strongly consider using the included Button as a call-to-action
• Use the variant with scarlet background to convey a bold and energetic feel for a less formal audience
• Use the variant with image on the right if the subject of the image faces left
• Use the variant with image on the left if the subject of the image faces right

Don’ts

• Don’t autoplay the slides when using a Carousel
• Don’t use a Hero on a page that is not the homepage; If a high visual emphasis is needed, consider a Featured Card instead

Accessibility

• Make sure to write quality alternative text for the image in the Hero component