ws_small_y-1.0.x-dev/templates/small-y-header.html.twig

{#
/**
 * @file
 * Template for a WS Header layout.
 *
 * This template provides a five columns display layout.
 *
 * Variables:
 * - $content: An array of content, each item in the array is keyed to one
 *   content for the layout. This layout supports the following sections:
 *   - $content['header_top_left']: Content in first header's row first column.
 *   - $content['header_top_middle']: Content in first header's row second column.
 *   - $content['header_top_right']: Content in first header's row third column.
 *   - $content['header_bottom_left']: Content in second header's row first column.
 *   - $content['header_bottom_right']: Content in second header's row second column.
 */
#}

{% set classes = [
  'header',
  'ws-header',
  'small-y-header',
  'desktop',
] %}

{% if content %}
  <header{{ attributes.addClass(classes) }}>
    <div class="header--top" id="top">
      <div class="row">
        {% if content.header_top_left %}
          <section class="col-sm-6 header--top-left-column">
            {{ content.header_top_left }}
          </section>
        {% endif %}

        {% if content.header_top_right %}
          <section class="col-sm-6 header--top-right-column">
            {{ content.header_top_right }}
          </section>
        {% endif %}
      </div>
    </div>
    <div class="header--bottom">
      <div class="row">
        {% if content.header_bottom_left %}
          <section class="header--bottom-left-column">
            {{ content.header_bottom_left }}
          </section>
        {% endif %}

        {% if content.header_bottom_middle %}
          <section class="header--bottom-middle-column">
            {{ content.header_bottom_middle }}
          </section>
        {% endif %}

        {% if content.header_bottom_right %}
          <section class="header--bottom-right-column">
            {{ content.header_bottom_right }}
          </section>
        {% endif %}
      </div>
      {# mobile menu toggler #}
      <div class="menu-toggle">
        <button class="header-navbar-toggler" aria-label="Menu toggle">
        </button>
      </div>
    </div>
  </header>
  <a id="main-content" tabindex="-1" class="sr-only sr-only-focusable"></a>
{% endif %}