7.4.2 Sidebar B View in a new window

  • Large blue offset sidebar.
  • Appears first in the markup order.
  • Right aligned.

Twig: containers/sidebars/sidebar-b.twig

Example

Delivering rigorous, practical and industry-focused education and research that encourages disruptive technologies and cultivates exceptional engineering and information technology professionals.

Markup 
{% block banner %}
  {% include '@uts_theme/components/banner/banner-hero.twig' %}
{% endblock %}
<div class="sidebar-grid sidebar-grid--b{% if banner_is_empty %} sidebar-grid--no-v-offset{% endif %}">
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
      <div class="sidebar-grid__offset">
        {% block sidebar %}
          <div class="sidebar">
            <div class="page-title">
              <h1>International students</h1>
            </div>
            <div class="sidebar__landing">
              <nav class="sidebar-menu" role="navigation" aria-label="Sidebar menu">
                <ul class="sidebar-menu__level-1">
                  <li class="sidebar-menu__item is-active"><a href="#">View all schools</a>
                    <ul class="sidebar-menu__level-2">
                      <li class="sidebar-menu__item"><a href="#">Civil and Environmental</a></li>
                      <li class="sidebar-menu__item"><a href="#">Computing and Communications</a></li>
                      <li class="sidebar-menu__item"><a href="#">Electrical, Mechanical and Mechantronic Systems</a></li>
                      <li class="sidebar-menu__item"><a href="#">Software</a></li>
                      <li class="sidebar-menu__item"><a href="#">Systems, Management and Leadership</a></li>
                    </ul>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        {% endblock %}
      </div>
    </aside>
    <main class="sidebar-grid__main">
      {% block main %}
        <div class="intro">
          <p>Delivering rigorous, practical and industry-focused education and research that encourages disruptive technologies and cultivates exceptional engineering and information technology professionals.</p>
        </div>
      {% endblock %}
    </main>
  </div>
</div>