7.4.3 Sidebar C View in a new window

  • Large grey sidebar.
  • Appears second in the markup order.
  • Left aligned.

Twig: containers/sidebars/sidebar-c.twig

Example
Markup
<div class="sidebar-grid sidebar-grid--c">
  {% block title %}
  {% endblock %}
  <div class="sidebar-grid__row">
    <main class="sidebar-grid__main">
      {% block main %}
        <div class="intro">
          <p>UTS Engineering and Information Technology will be exhibiting again at CeBIT in 2017. CeBIT Australia is Australasia's leading Information & Communications Technology (ICT) event for the business marketplace and covers the entire spectrum of technology.</p>
        </div>
        <p></p><img src="/themes/uts_theme/src/templates/event-example.jpg"></p>
        <p>This year CeBIT will be from 23–25 May and be held at International Convention Centre (ICC) Darling Harbour. We will be present for the whole event and look forward to seeing you at our booth, number E56 located in the Big Data and Analyitcs section on the red carpet.</p>
        <p>Come and speak to us about our courses, taking our students for internships and see the latest research conducted by the faculty. Watch this space for more details on our displays and staff who will be available at the booth to speak with. UTS: Engineering and Information Technology has built a strong reputation for industry-oriented research and technology transfer and we welcome the opportunity to collaborate with a range of industry and research partners.</p>
      {% endblock %}
    </main>
    <aside class="sidebar-grid__sidebar">
      <div class="sidebar--alt">
        {% block sidebar %}
          <div class="sidebar__info event--info-when">
            <h3 class="sidebar__info-title">When</h3>
            <time>3 April, 2017<br>9:00am - 5:00pm</time>
          </div>
          <div class="sidebar__info event--info-who">
            <h3 class="sidebar__info-title">Who</h3>
            <p>Year 10-12 Students</p>
          </div>
          <div class="sidebar__info event--info-where">
            <h3 class="sidebar__info-title">Where</h3>
            <ul class="shs">
              <li>City - Broadway</li>
              <li>CB11 Faculty of Engineering and IT Building, Building 11</li>
            </ul>
          </div>
          <div class="sidebar__info event--info-cost">
            <h3 class="sidebar__info-title">Cost</h3>
            <p>Free</p>
          </div>
          <div class="sidebar__info event--info-rsvp">
            <h3 class="sidebar__info-title">RSVP</h3>
            <p>Register for our high school outreach activities using this <a href="#">form</a>.</p>
          </div>
        {% endblock %}
      </div>
      {% block sidebar_after %}
      {% endblock %}
    </aside>
  </div>
</div>