Hero

This is the default hero component which is used for any page that doesn't have an image. The hero can also be rendered tall. This is achieved by passing the value hero--tall in the modifier_class var. Alternatively, the hero can be rendered as 2-columns with modifier_class hero--2col.

The Roberto C. Goizueta Center

Entrepreneurship & Innovation Programs

We meet students where they are with access points and general exposure for the curious as well as skill development and in-depth learning opportunities for the highly engaged.
Explore Programs
Meet the Team
Markup Details
                            {{ attach_library('goizueta_theme/hero') }}
{{ attach_library('goizueta_theme/hero-video') }}

{% set component_class = ['hero', modifier_class|default('')] %}
{%
  set attributes = attributes ? attributes.addClass(component_class) : ' class="' ~ component_class|join(' ') ~ '"'
%}
{% set is_2col = (modifier_class == 'hero--2col') %}
<section{{ attributes|raw }}>
  {% if image or video %}
    <div class="hero__media">
      {% if video %}
        <div class="hero__video">
          <iframe id="hero__video-iframe" title="youtube-player" width="500" height="600" src="https://www.youtube-nocookie.com/embed/{{ video }}?enablejsapi=1&autoplay=1&loop=1&controls=0&showinfo=0&modestbranding=1&rel=0&iv_load_policy=3&mute=1&playsinline=1&playlist={{ video }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen tabindex="-1"></iframe>
          <div class="hero__video-control">
            <button id="hero__video-control-button" class="hero__video-control-button" aria-pressed="false">
              <span class="visually-hidden">Video Play Control</span>
            </button>
          </div>
        </div>
      {% elseif image %}
        {{ image }}
      {% else %}
        {# Debugging output to confirm this block renders #}
        <p>No media available</p>
      {% endif %}
    </div>
  {% endif %}
  <div class="hero__wrapper">
    <div class="hero__container">
      {% if is_2col %}
        <div class="hero__content">
          <div class="hero__column1">
            {% if eyebrow %}
              {% include '@components/eyebrow/eyebrow.twig' with {
                "text": eyebrow,
                "classes": ' hero__eyebrow',
              } only %}
            {% endif %}
            {% if heading %}
              {% include '@components/heading/heading.twig' %}
            {% endif %}
            {% if cta_1 or cta_2 %}
              <div class="hero__ctas">
                {% if cta_1 %}
                  {% include '@components/button/button.twig' with {
                    "button": {
                      "text": cta_1.text,
                      "url": cta_1.url,
                      "icon": cta_1.icon,
                      "type": "",
                      "classes": cta_1.classes,
                    }
                  } only %}
                {% endif %}
                {% if cta_2 %}
                  {% include '@components/button/button.twig' with {
                    "button": {
                      "text": cta_2.text,
                      "url": cta_2.url,
                      "icon": cta_2.icon,
                      "type": "",
                      "classes": cta_2.classes,
                    }
                  } only %}
                {% endif %}
              </div>
            {% endif %}
            {% if intro_text %}
              <div class="hero__intro">
                {{ intro_text }}
              </div>
            {% endif %}
          </div>
          <div class="hero__column2">
            {% if form_url %}
              {% include '@components/slate-form-embed/slate-form-embed.twig' %}
            {% endif %}
          </div>
        </div>
      {% else %}
        {% if eyebrow or heading %}
          <div class="hero__content">
            {% if eyebrow %}
              {% include '@components/eyebrow/eyebrow.twig' with {
                "text": eyebrow,
                "classes": ' hero__eyebrow',
              } only %}
            {% endif %}
            {% if heading %}
              {% include '@components/heading/heading.twig' %}
            {% endif %}
            {% if intro_text %}
              <div class="hero__intro">
                {{ intro_text }}
              </div>
            {% endif %}
            {% if cta_1 or cta_2 %}
              <div class="hero__ctas">
                {% if cta_1 %}
                  {% include '@components/button/button.twig' with {
                    "button": {
                      "text": cta_1.text,
                      "url": cta_1.url,
                      "icon": cta_1.icon,
                      "type": "",
                      "classes": cta_1.classes,
                    }
                  } only %}
                {% endif %}
                {% if cta_2 %}
                  {% include '@components/button/button.twig' with {
                    "button": {
                      "text": cta_2.text,
                      "url": cta_2.url,
                      "icon": cta_2.icon,
                      "type": "",
                      "classes": cta_2.classes,
                    }
                  } only %}
                {% endif %}
              </div>
            {% endif %}
            {% if form_url %}
              {% include '@components/slate-form-embed/slate-form-embed.twig' %}
            {% endif %}
          </div>
        {% endif %}
      {% endif %}
    </div>
  </div>
</section>