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.

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(' ') ~ '"'
%}
<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>
        {% 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 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 %}
</section>