Hero
Component status:Ready
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#
DefaultHeadline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--card-left bux-hero--3x2">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Scarlet Left 3:2Headline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--scarlet bux-hero--card-left bux-hero--3x2">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Scarlet Right 3:2Headline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--scarlet bux-hero--card-right bux-hero--3x2">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Gray Left 3:2Headline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--card-left bux-hero--3x2">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Gray Right 3:2Headline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--card-right bux-hero--3x2">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Scarlet Left 16:9Headline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--scarlet bux-hero--card-left bux-hero--16x9">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Scarlet Right 16:9Headline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--scarlet bux-hero--card-right bux-hero--16x9">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Gray Left 16:9Headline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--card-left bux-hero--16x9">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Gray Right 16:9Headline lorem ipsum
Subhead lorem ipsum dolara met
<section class="bux-hero bux-hero--card-right bux-hero--16x9">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<div class="bux-hero__subheader"><span>Subheadline lorem ipsum</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
CarouselIf necessary, the hero component can display multiple slides as a carousel.
Headline 1 lorem ipsum dolara met lorem ipsum
Subhead 1 lorem ipsum dolara met lorem ipsum dolara met lorem ipsum dolara met lorem ipsum
CTA LinkHeadline 2 lorem ipsum dolara met lorem ipsum
Subhead 2 lorem ipsum dolara met lorem ipsum dolara met lorem ipsum dolara met lorem ipsum
CTA LinkHeadline 3 lorem ipsum dolara met lorem ipsum
Subhead 3 lorem ipsum dolara met lorem ipsum dolara met lorem ipsum dolara met lorem ipsum
CTA Link<section class="bux-hero bux-hero--card-left bux-hero--carousel bux-hero--3x2" aria-roledescription="carousel" aria-label="Highlighted stories">
<button class="bux-hero__button bux-hero__button--left" type="button" aria-controls="my-bux-hero__carousel-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="my-bux-hero__carousel-items" aria-label="Next Slide">
<span class="icon icon-chevron-right" aria-hidden="true"></span>
</button>
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items" aria-live="off">
<div id="bux-hero-carousel-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">Header 1</h2>
<div class="bux-hero__subheader"><span>Subhead 1</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/img" alt="Graduates performing the O-H-I-O pose" />
</div>
</div>
</div>
<div id="bux-hero-carousel-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">Header 2</h2>
<div class="bux-hero__subheader"><span>Subhead 2</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/img" alt="Graduates performing the O-H-I-O pose" />
</div>
</div>
</div>
<div id="bux-hero-carousel-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">Header 3</h2>
<div class="bux-hero__subheader"><span>Subhead 3</span></div>
<button class="bux-button bux-button--alt">Call to Action</button>
</div>
<div class="bux-hero__image-container">
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/img" alt="Graduates performing the O-H-I-O pose" />
</div>
</div>
</div>
<div class="bux-hero__tabs" role="tablist" aria-label="Slides">
<button id="bux-hero-tab-1" class="bux-hero__tab bux-hero__tab--active" type="button" role="tab" aria-label="Slide 1" aria-controls="bux-hero-carousel-1" tabindex="-1">
<span class="visually-hidden">Slide 1</span>
</button>
<button id="bux-hero-tab-2" class="bux-hero__tab" type="button" role="tab" aria-label="Slide 2" aria-controls="bux-hero-carousel-2" tabindex="-1">
<span class="visually-hidden">Slide 2</span>
</button>
<button id="bux-hero-tab-3" class="bux-hero__tab" type="button" role="tab" aria-label="Slide 3" aria-controls="bux-hero-carousel-3" tabindex="-1">
<span class="visually-hidden">Slide 3</span>
</button>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Image with Gray Text BoxHeadline lorem ipsum
Subhead 1 lorem ipsum dolara met lorem ipsum<section class="bux-hero bux-hero--gray bux-hero--card-full">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<a class="bux-hero__subheader bux-text-link">Subheadline lorem ipsum</a>
</div>
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Image with White Text Box<section class="bux-hero bux-hero--white bux-hero--card-full">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">Headline lorem ipsum</h2>
<a class="bux-hero__subheader bux-text-link">Subheadline lorem ipsum</a>
</div>
<div class="bux-hero__image">
<img class="bux-image" src="/path/to/image.png" alt="" />
</div>
</div>
</div>
</section>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Video with Gray Text BoxHeadline 1 lorem ipsum dolara met lorem ipsum
Subhead 1 lorem ipsum dolara met lorem ipsum<section class="bux-hero bux-hero--gray bux-hero--card-full">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">
<span>Heading lorem ipsum dolara met</span>
</h2>
<a class="bux-hero__subheader bux-text-link"
>Subhead lorem ipsum dolara met lorem ipsum</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>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</section>
#
Video with White Text BoxHeadline 1 lorem ipsum dolara met lorem ipsum
Subhead 1 lorem ipsum dolara met lorem ipsum<section class="bux-hero bux-hero--white bux-hero--card-full">
<div id="my-bux-hero__carousel-items" class="bux-hero__carousel-items">
<div class="bux-hero__container showing">
<div class="bux-hero__content">
<h2 class="bux-hero__header">
<span>Heading lorem ipsum dolara met</span>
</h2>
<a class="bux-hero__subheader bux-text-link"
>Subhead lorem ipsum dolara met lorem ipsum</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>
{% 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) %}
<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 %}
<div id="{{carousel_uniqueid}}-items" class="bux-hero__carousel-items"{% if (cards|length > 1) %} aria-live="off"{% endif %}>
{% 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>
<a class="bux-button bux-button--alt" href="{{ card.button_url }}">{{ card.button_text }}</a>
{% else %}
<a class="bux-hero__subheader bux-text-link">{{ card.hero_subheader }}</a>
{% 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 '@image' %}
{% 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>
{% 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 %}
</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