7 Containers

Sections of the layout that group various components.

7.1 Header View in a new window

The global header.

Twig: containers/header/header.twig

Example
Markup
<header class="header" role="banner">
  <div class="header__first">
    {% include '@uts_theme/components/mobile-menu/mobile-menu-toggle.twig' %}
    {% include '@uts_theme/components/logo/logo.twig' %}
    {% include '@uts_theme/components/site-search/site-search-toggle.twig' %}
  </div>
  {% include '@uts_theme/components/mega-menu/mega-menu-complete.twig' %}
</header>

7.2 Footer View in a new window

The global footer.

Twig: containers/footer/footer.twig

Example
Markup
<div class="footer__wrapper">
  <footer class="footer footer-grid__container">
    <div class="footer-grid__row">
      <div class="footer__first footer-grid__col footer-grid--col-4">
        {% include '@uts_theme/components/footer-menu/footer-menu.twig' %}
      </div>
      <div class="footer__second footer-grid__col footer-grid--col-2">
        <h3 class="footer__title"><a href="#">Contact us</a></h3>
        <p><a href="#">Student inquiries</a></p>
        {% include '@uts_theme/components/footer-social/footer-social.twig' %}
      </div>
    </div>
    <div class="footer__third">
      <p>&copy; Copyright UTS - CRICOS Provider No: 00099F - 27 February 2017 12:07 PM. The page is authorised by Director of Student Administration Unit and Director of Student Services Unit</p>
    </div>
  </footer>
</div>

7.3 One column View in a new window

The main content area, spanning one full-width column.

Twig: containers/one-col/one-col.twig

Example

Staff listing

A table caption
Name Unit Position
Adair, Daryl Management Discipline Group Associate Professor
Adriaanse, Johanna Management Discipline Group Associate of the faculty
Agarwal, Renu Management Discipline Group Associate Professor
Alexeev, Vital Finance Discipline Group Senior Lecturer
Golsby-Smith, Tony Finance Discipline Group Associate of the faculty
Adair, Daryl Management Discipline Group Associate Professor
Adriaanse, Johanna Management Discipline Group Associate of the faculty
Agarwal, Renu Management Discipline Group Associate Professor
Alexeev, Vital Finance Discipline Group Senior Lecturer
Golsby-Smith, Tony Finance Discipline Group Associate of the faculty
Markup
<main class="one-col {{ modifier_class }}">
  {% block content %}
    <div class="page-title">
      <h1>Staff listing</h1>
    </div>
    {% include '@uts_theme/components/table/responsive-table.twig' %}
  {% endblock %}
</main>

7.4 Home Page View in a new window

The main content area, full viewport width column.

7.4 Two column with sidebar View in a new window

Various layouts that use two columns with a sidebar.

7.4.1 Sidebar A View in a new window

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

Twig: containers/sidebars/sidebar-a.twig

Example
Markup
{% block banner %}
{% endblock %}
<div class="sidebar-grid sidebar-grid--a">
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
      {% block sidebar %}
        {% include '@uts_theme/components/sidebar/sidebar-with-back.twig' %}
      {% endblock %}
    </aside>
    <main class="sidebar-grid__main">
      {% block main %}
        {% include '@uts_theme/components/listing/listing-stacked.twig' %}
      {% endblock %}
    </main>
  </div>
</div>

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
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>

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>

7.4.4 Sidebar D View in a new window

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

Twig: containers/sidebars/sidebar-d.twig

Example
Markup
<div class="sidebar-grid sidebar-grid--d">
  {% block title %}
  {% endblock %}
  <div class="sidebar-grid__row">
    <main class="sidebar-grid__main">
      {% block main %}
        <p>Innovation, collaboration and engagement are at the core of UTS's range of strategic initiatives: from services for the local community to campus development plans that will strengthen our role in the local education precinct and Sydney business community, our engagement with Indigenous education and employment to our commitment to sustainability and internationalisation.</p>
        <ul class="flex-tile flex-tile--2x">
          <li class="flex-tile__item">
            {% include '@uts_theme/components/image-teaser/image-teaser.twig' %}
          </li>
          <li class="flex-tile__item">
            {% include '@uts_theme/components/image-teaser/image-teaser.twig' %}
          </li>
          <li class="flex-tile__item">
            {% include '@uts_theme/components/image-teaser/image-teaser.twig' %}
          </li>
          <li class="flex-tile__item">
            {% include '@uts_theme/components/image-teaser/image-teaser.twig' %}
          </li>
        </ul>
      {% endblock %}
    </main>
    <aside class="sidebar-grid__sidebar">
      <div class="sidebar--alt">
        {% block sidebar %}
          <h3>Services for the Community</h3>
          <p>
            <a href="#">UTS Child Care</a><br>
            <a href="#">Fitness Centre</a><br>
            <a href="#">Multi-purpose Sports Hall</a><br>
            <a href="#">Traditional Chinese Medicine Clinic</a><br>
            <a href="#">2SER community radio</a><br>
            <a href="#">UTS Landlords Register</a><br>
            <a href="#">UTS IELTS Test Centre</a><br>
            <a href="#">UTS Library</a><br>
            <a href="#">Donors</a><br>
            <a href="#">Body Donor Program</a><br>
            <a href="#">Alumni</a><br>
            <a href="#">UTS ART: Gallery and Collection</a>
          </p>
        {% endblock %}
      </div>
      {% block sidebar_after %}
      {% endblock %}
    </aside>
  </div>
</div>

7.4.5 Sidebar E View in a new window

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

Twig: containers/sidebars/sidebar-e.twig

Example
Markup
<div class="sidebar-grid sidebar-grid--e">
  {% block title %}
  {% endblock %}
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
      <div class="sidebar--alt">
        {% block sidebar %}
        <div class="sidebar__info">
          <h3 class="sidebar__info-title">Location</h3>
          <p>City Campus</p>
        </div>
        <div class="sidebar__info">
          <h3 class="sidebar__info-title">Min. Duration</h3>
          <p>2 years full time or 4 years part time</p>
        </div>
        <div class="sidebar__info">
          <h3 class="sidebar__info-title">Course Codes</h3>
          <p>UTS: C04018v6</p>
          <p>CRICOS: 025004A</p>
        </div>
      {% endblock %}
    </div>
    {% block sidebar_after %}
    {% endblock %}
    </aside>
    <main class="sidebar-grid__main">
      {% block main %}
        <p>The UTS MBA is distinguished from the competition by its practical, vocational orientation and by the open architecture of the course design. All MBA subjects are approved by an industry board that insists on 'relevance to workplace' as a pre-eminent subject design principle. The MBA provides knowledge and skills that are essential for superior management performance.</p>
        <p>The course provides unparalleled program flexibility. Students design their MBA to match their employment aspirations. A wide range of specialist skills is also introduced through a choice of majors and sub-majors. The teaching staff are drawn from among the finest researchers and university educators around the world, keeping students abreast of current trends and focusing on the global picture.</p>
        <p>Students with business ideas who want to develop their entrepreneurial skills and knowledge benefit from studying this program. The flexible modular structure of the program allows students to take up program in stages while developing and working on their business ideas. Students also have access to non-award based seminars and events with entrepreneurs and other relevant industry practitioners which provide 'reality and rigour' to supplement their classroom study.</p>
        {% include '@uts_theme/components/collapsible/collapsible.twig' %}
      {% endblock %}
    </main>
  </div>
</div>

7.4.6 Sidebar F View in a new window

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

Twig: containers/sidebars/sidebar-f.twig

Example
Markup
<div class="sidebar-grid sidebar-grid--f">
  {% block title %}
  {% endblock %}
  <div class="sidebar-grid__row">
    <aside class="sidebar-grid__sidebar">
      <div class="sidebar--alt">
        {% block sidebar %}
          {% include '@uts_theme/components/staff/staff.twig' %}
          <div class="sidebar__info">
            <h3 class="sidebar__info-title">Positions</h3>
            <p>Director (Postgraduate Research), The Dean's Unit</p>
            <p>Core Member, CCS - Cosmopolitan Civil Societies</p>
          </div>
          <div class="sidebar__info">
            <h3 class="sidebar__info-title">Education</h3>
            <p>GradDip in Tourism Mgmt, PhD (Commerce)</p>
            <p>Associate Fellow, Council of Australasian University Tourism and Hospitality Education</p>
          </div>
          <div class="sidebar__info sidebar--info-email">
            <h3 class="sidebar__info-title">Email</h3>
            <a href="mailto:Deborah.Edwards-1@uts.edu.au">Deborah.Edwards-1@uts.edu.au</a>
          </div>
          <div class="sidebar__info sidebar--info-phone">
            <h3 class="sidebar__info-title">Phone</h3>
            <span>+61 2 9514 5424</span>
          </div>
          <div class="sidebar__info sidebar--info-orcid">
            <h3 class="sidebar__info-title">ORCID</h3>
            <a href="#">0000-0002-8345-9700</a>
          </div>
        {% endblock %}
      </div>
      {% block sidebar_after %}
      {% endblock %}
    </aside>
    <main class="sidebar-grid__main">
      {% block main %}
        <h2>Biography</h2>
        {% embed '@uts_theme/components/read-more/read-more.twig' %}
          {% block content %}
            <p>Professor Edwards joined the Management Discipline Group in 2006 after previously working at the University of Western Sydney, Australia. Prior to pursuing an academic career in 1995, Deborah worked extensively in the hospitality and hotel sectors in Australia and overseas. Her PhD was on volunteerism at cultural attractions specifically urban museums and art museums.</p>
            <p>Deborah has been the principle investigator for a number of large industry studies in the areas of business events impacts, tourists\' spatial movements, sustainable tourism management, and urban precinct management and development.</p>
          {% endblock %}
        {% endembed %}

        <h2>Professional</h2>
        {% embed '@uts_theme/components/read-more/read-more.twig' %}
          {% block content %}
            <p>Deborah is leading the following projects:<br>UTS Visitor tracking project: using social networks to understand tourist dispersal beyond gateway cities. UTS Travel Tracks http://traveltracks.bus.uts.edu.au/</p>
            <p>The National Long Term Tourism Strategy encourages the dispersal of tourists beyond gateway cities to stimulate regional growth and economic productivity, however only a relatively small number of international tourists visit a regional area.</p>
          {% endblock %}
        {% endembed %}
      {% endblock %}
    </main>
  </div>
</div>

7.4.7 Sidebar G View in a new window

  • Large blue offset sidebar.
  • Appears first in the markup order.
  • Right aligned.
  • Offset suits regular (non-hero) banner size.

Twig: containers/sidebars/sidebar-g.twig

Example
Markup
{% block banner %}
  {% include '@uts_theme/components/banner/banner.twig' %}
{% endblock %}
<div class="sidebar-grid sidebar-grid--g{% 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 %}
          {% include '@uts_theme/components/sidebar/sidebar-with-title.twig' %}
        {% endblock %}
      </div>
    </aside>
    <main class="sidebar-grid__main">
      {% block main %}
        <div class="page-title">
          <h1>Master of Planning</h1>
        </div>

        <article>
          <p class="intro">With a strong emphasis on structure and masterplanning, sustainability and urban design, UTS’ Master of Planning will equip students with the skills to respond creatively to the design and planning of built environments within changing environmental, economic and social contexts.</p>
          <h2>Shape the urban environment</h2>
          <p>You will engage with policy, environmental and demographic frameworks to understand how planning shapes the urban environment. This engagement spans across several disciplines, including: urban design, property, planning, economics, law, architecture and urban ecology</p>
          {% include '@uts_theme/base/media/figure.twig' %}
          <h2>Engage with the Planning industry</h2>
          <p>As a Master of Planning student you will benefit from UTS’ close ties to industry with many of our academics having professional backgrounds and connections. Many of the projects are based on real-world scenarios taught in peer-led, multidisciplinary environments.</p>
          {% include '@uts_theme/base/media/video.twig' %}
          <h2>Your career in Planning</h2>
          <p>The Master of Planning enables professionals to change careers due to the multi-disciplinary nature of the learning. Our graduates are in public sector positions, private consulting and property development firms, with the option to pursue careers in areas such as strategic planning and sub regional planning.</p>
          <p>
            <a href="#" class="button">Make an enquiry</a>
          </p>
          <h2>What credit can I apply for?</h2>
          <h3>Master of Nursing</h3>
          <ul>
            <li>Graduate Certificates in nursing that appear on our precedent list (PDF, 94kB): These courses attract up to 24 credit points of unspecified credit (electives) or an equivalent sub-major (where a relevant Graduate Certificate has been completed at UTS).</li>
            <li>Postgraduate nursing qualifications and subjects that do not appear on the precedent list: These subjects may be credited as unspecified credit towards your elective choices or as specific subjects if the subject completed matches 80% of the content of the subject for which credit is sought.</li>
          </ul>
          <h3>Other postgraduate courses</h3>
          <ul>
            <li>Previously completed postgraduate subjects: These may be credited as unspecified credit towards your elective choices or as specific subjects if the subject completed matches 80% of the content of the subject for which credit is sought.</li>
          </ul>
        </article>
      {% endblock %}
    </main>
  </div>
</div>