Hero

This is the hero component which is used in several high profile pages incuding homepage. Default overlay for default hero including a gold piece on left corner. 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.
Full-time students at Goizueta
Student Blog

Download view book
Markup Details
                            {{ attach_library('goizueta_theme/hero') }}

{% 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 %}
    <div class="hero__media">
      <div class="hero__media--inner" style="background-image: url({{ image }})">
        {% if modifier_class == 'hero--tall' %}
          <div class="hero__overlay--left">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 705 197"><path fill="#fff" d="M0 160h705v37H0z"/><path fill="#aa8d53" d="M0 126h705v34H0z"/><path fill="#d7ab4b" d="M0 0v126h705V0z"/></svg>
          </div>
          <div class="hero__overlay--tall-right"></div>
        {% elseif modifier_class == 'hero--2col' %}
          <div class="hero__overlay--full"></div>
        {% else %}
          <div class="hero__overlay--left">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 705 197"><path fill="#fff" d="M0 160h705v37H0z"/><path fill="#aa8d53" d="M0 126h705v34H0z"/><path fill="#d7ab4b" d="M0 0v126h705V0z"/></svg>
          </div>
          <div class="hero__overlay--center">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1262.8 625.2"><style>.centerOne{opacity:0.85;fill:#222c50}</style><path class="centerOne" d="M0 526.6h1262.2v98H0zM.5.6h1262.2v81H.5z"/><path opacity="1" fill="#222c50" d="M.5 81L.3 294v36L.1 526l1262.2 1.2.2-196v-36l.2-213z"/></svg>
          </div>
          <div class="hero__overlay--right">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760.9 738"><style>.rightOne,.rightTwo{opacity:0.65;fill:#222c50}.rightTwo{opacity:0.85}</style><path class="rightOne" d="M128 322L0 738h130l175.9-416zM760 322v416s2-418 0-416z"/><path class="rightTwo" d="M560 0H442L305.9 322h118z"/><path class="rightOne" d="M305.9 322L130 738h118l175.9-416z"/><path class="rightTwo" d="M305.9 322L130 738h118l175.9-416z"/><path fill="#222c50" d="M642 0h-82L423.9 322 248 738h512V0z"/></svg>
          </div>
        {% endif %}
        </div>
    </div>
  {% endif %}
  {% 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 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 %}
        {% if form_url %}
          {% include '@components/slate-form-embed/slate-form-embed.twig' %}
        {% endif %}
      </div>
    {% endif %}
  {% endif %}
</section>