6 Components
The bulk of reusable design components that can be applied using just the CSS class names and markup specified in each component.
6.1 Logo View in a new window
The site wide logo that appears in the header. A different svg will show depending on the device width.
Twig: components/logo/logo.twig
Markup
<a class="logo" href="{{ path }}" title="{{ title }}">
{% include '@uts_theme/components/logo/logo.svg' %}
</a>
6.2 Mega menu View in a new window
The mega menu is only used on medium to large devices. Initially it appears as a standard horizontal menu, until an item is clicked, revealing the a total of 3 menu levels.
6.2.1 Working example View in a new window
A testable version of the menu, as it appears in the full site.
Twig: components/mega-menu/mega-menu-complete.twig
Example
Markup
<nav class="mega-menu js-mega-menu" role="navigation" aria-label="Main navigation">
<ul block="block-mainnavigation" class="mega-menu__level-1">
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Future students</a>
<div class="mega-menu__wrapper" role="menu">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<li class="mega-menu--two-thirds">
<a href="#">Find a course</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Analytics and Data Science</a>
</li>
<li>
<a href="#">Business</a>
</li>
<li>
<a href="#">Communication</a>
</li>
<li>
<a href="#">Creative Intelligence and Innovation</a>
</li>
<li>
<a href="#">Design, Architecture and Building</a>
</li>
<li>
<a href="#">Education</a>
</li>
<li>
<a href="#">Engineering</a>
</li>
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Health (GEM)</a>
</li>
<li>
<a href="#">Information Technology</a>
</li>
<li>
<a href="#">International Studies</a>
</li>
<li>
<a href="#">Law</a>
</li>
<li>
<a href="#">Science</a>
</li>
<li>
<a href="#">Transdisciplinary Innovation</a>
</li>
</ul>
</li>
<li class="mega-menu--one-third">
<a href="#">Information for</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">High school students</a>
</li>
<li>
<a href="#">Non-current school leavers</a>
</li>
<li>
<a href="#">Postgraduate students</a>
</li>
<li>
<a href="#">Research students</a>
</li>
<li>
<a href="#">Short course students</a>
</li>
<li>
<a href="#">Indigenous Australians</a>
</li>
<li>
<a href="#">Students with special needs</a>
</li>
<li>
<a href="#">Careers advisers, teachers and principals</a>
</li>
<li>
<a href="#">International students</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Current students</a>
<div class="mega-menu__wrapper" role="menu">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<li>
<a href="#">Managing your course</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Your enrolment</a>
</li>
<li>
<a href="#">Fees and payment</a>
</li>
<li>
<a href="#">Your student info</a>
</li>
<li>
<a href="#">Classes and assessment</a>
</li>
<li>
<a href="#">Graduation</a>
</li>
</ul>
</li>
<li>
<a href="#">Opportunities</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Scholarships, prizes and awards</a>
</li>
<li>
<a href="#">Overseas opportunities</a>
</li>
<li>
<a href="#">Community and leadership programs</a>
</li>
<li>
<a href="#">Career development</a>
</li>
<li>
<a href="#">Work opportunities</a>
</li>
</ul>
</li>
<li>
<a href="#">Support</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Academic support</a>
</li>
<li>
<a href="#">Health and wellbeing</a>
</li>
<li>
<a href="#">Financial help</a>
</li>
<li>
<a href="#">Accommodation</a>
</li>
<li>
<a href="#">When things go wrong</a>
</li>
</ul>
</li>
<li>
<a href="#">Campus life</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Your campus</a>
</li>
<li>
<a href="#">Communication at UTS</a>
</li>
<li>
<a href="#">Social and cultural activities</a>
</li>
<li>
<a href="#">Sport and recreation</a>
</li>
<li>
<a href="#">Ways to meet people</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Research and teaching</a>
<div class="mega-menu__wrapper" role="menu">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<li>
<a href="#">Our research</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Data science</a>
</li>
<li>
<a href="#">Sustainability</a>
</li>
<li>
<a href="#">Future work and industry</a>
</li>
<li>
<a href="#">Social futures</a>
</li>
<li>
<a href="#">Research centres</a>
</li>
</ul>
</li>
<li>
<a href="#">Teaching and learning</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Learning futures</a>
</li>
<li>
<a href="#">UTS model of learning</a>
</li>
<li>
<a href="#">Iniatives and projects</a>
</li>
<li>
<a href="#">Learning and teaching grants</a>
</li>
<li>
<a href="#">Awards and citations</a>
</li>
</ul>
</li>
<li>
<a href="#">Future researchers</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Research degrees at UTS</a>
</li>
<li>
<a href="#">Future research staff</a>
</li>
<li>
<a href="#">Applying to UTS</a>
</li>
</ul>
</li>
<li>
<a href="#">Industry partnerships</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Ways to engage</a>
</li>
<li>
<a href="#">Working with us</a>
</li>
<li>
<a href="#">IP and commercialisation</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Partners and community</a>
<div class="mega-menu__wrapper" role="menu">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<li class="mega-menu--one-third">
<a href="#">Working with UTS</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Partner with us</a>
</li>
<li>
<a href="#">Recruit our best and brightest</a>
</li>
<li>
<a href="#">Develop your staff</a>
</li>
</ul>
</li>
<li class="mega-menu--one-third">
<a href="#">Community</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Alumni</a>
</li>
<li>
<a href="">Donors</a>
</li>
<li>
<a href="#">Art gallery</a>
</li>
<li>
<a href="#">Shopfront</a>
</li>
<li>
<a href="#">Venues and facilities</a>
</li>
<li>
<a href="#">Conferences and seminars</a>
</li>
</ul>
</li>
<li class="mega-menu--one-third">
<a href="#">Initiatives</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Campus master plan</a>
</li>
<li>
<a href="#">Social justice</a>
</li>
<li>
<a href="#">Data arena</a>
</li>
<li>
<a href="#">Internationalisation</a>
</li>
<li>
<a href="#">Indigenous education and employment</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
6.2.2 Menu closed View in a new window
The top level items, with the menu closed.
Twig: components/mega-menu/mega-menu.twig
Default example
When then menu item is open.
The hover style.
A link that has been given keyboard focus.
Markup
<nav class="mega-menu" role="navigation" aria-label="Main menu">
<ul class="mega-menu__level-1">
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Future students</a>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link {{ modifier_class }}">Current students</a>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Research and teaching</a>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Partners and community</a>
</li>
</ul>
</nav>
6.2.3 Menu open View in a new window
Levels 1 to 3, with the menu open.
Twig: components/mega-menu/mega-menu-child.twig
Default example
An active menu item.
The hover style.
A link that has been given keyboard focus.
Markup
<nav class="mega-menu" role="navigation" aria-label="Main menu">
<ul class="mega-menu__level-1" role="menubar">
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Future students</a>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Current students</a>
<div class="mega-menu__wrapper" role="menu" aria-hidden="false">
<div class="mega-menu__inner">
<ul class="mega-menu__level-2">
<li class="mega-menu--leading-item">
<a href="#">Overview</a>
</li>
<li>
<a href="#">Managing your course</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Your enrolment</a>
</li>
<li>
<a href="#">Fees and payment</a>
</li>
<li>
<a href="#">Your student info</a>
</li>
<li>
<a href="#">Classes and assessment</a>
</li>
<li>
<a href="#">Graduation</a>
</li>
</ul>
</li>
<li>
<a href="#">Opportunities</a>
<ul class="mega-menu__level-3">
<li>
<a href="#" class="{{ modifier_class }}">Scholarships, prizes and awards</a>
</li>
<li>
<a href="#">Overseas opportunities</a>
</li>
<li>
<a href="#">Community and leadership programs</a>
</li>
<li>
<a href="#">Career development</a>
</li>
<li>
<a href="#">Work opportunities</a>
</li>
</ul>
</li>
<li>
<a href="#">Support</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Academic support</a>
</li>
<li>
<a href="#">Health and wellbeing</a>
</li>
<li>
<a href="#">Financial help</a>
</li>
<li>
<a href="#">Accommodation</a>
</li>
<li>
<a href="#">When things go wrong</a>
</li>
</ul>
</li>
<li>
<a href="#">Campus life</a>
<ul class="mega-menu__level-3">
<li>
<a href="#">Your campus</a>
</li>
<li>
<a href="#">Communication at UTS</a>
</li>
<li>
<a href="#">Social and cultural activities</a>
</li>
<li>
<a href="#">Sport and recreation</a>
</li>
<li>
<a href="#">Ways to meet people</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="mega-menu__primary-item is-open">
<a href="#" class="mega-menu__primary-link">Research and teaching</a>
</li>
<li class="mega-menu__primary-item">
<a href="#" class="mega-menu__primary-link">Partners and community</a>
</li>
</ul>
</nav>
6.3 Mobile menu View in a new window
A menu used on devices with smaller screens.
6.3.1 Example (with toggle) View in a new window
Click the hamburger button to show the mobile menu.
Twig: components/mobile-menu/mobile-menu-complete.twig
Example
Markup
<button class="mobile-menu__toggle" id="mobile-menu-toggle">Show menu</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'mobile-menu-toggle', label: "Main menu"} %}
{% block content %}
<nav class="mobile-menu js-mobile-menu" role="navigation" aria-label="Main menu">
<ul class="mobile-menu__level-1">
<li>
<a href="#">Future students</a>
<ul class="mobile-menu__level-2">
<li>
<a href="#">Find a course</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Analytics and Data Science</a>
</li>
<li>
<a href="#">Business</a>
</li>
<li>
<a href="#">Communication</a>
</li>
<li>
<a href="#">Creative Intelligence and Innovation</a>
</li>
<li>
<a href="#">Design, Architecture and Building</a>
</li>
<li>
<a href="#">Education</a>
</li>
<li>
<a href="#">Engineering</a>
</li>
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Health (GEM)</a>
</li>
<li>
<a href="#">Information Technology</a>
</li>
<li>
<a href="#">International Studies</a>
</li>
<li>
<a href="#">Law</a>
</li>
<li>
<a href="#">Science</a>
</li>
<li>
<a href="#">Transdisciplinary Innovation</a>
</li>
</ul>
</li>
<li>
<a href="#">Information for</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">High school students</a>
</li>
<li>
<a href="#">Non-current school leavers</a>
</li>
<li>
<a href="#">Postgraduate students</a>
</li>
<li>
<a href="#">Research students</a>
</li>
<li>
<a href="#">Short course students</a>
</li>
<li>
<a href="#">Indigenous Australians</a>
</li>
<li>
<a href="#">Students with special needs</a>
</li>
<li>
<a href="#">Careers advisers, teachers and principals</a>
</li>
<li>
<a href="#">International students</a>
</li>
</ul>
</li>
<li>
<a href="#">Important info</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Entry schemes and pathways</a>
</li>
</ul>
</li>
<li>
<a href="#">Studying at UTS</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Practical learning</a>
</li>
<li>
<a href="#">Industry connections</a>
</li>
<li>
<a href="#">Overseas opportunities</a>
</li>
<li>
<a href="#">Student support</a>
</li>
<li>
<a href="#">Student life</a>
</li>
<li>
<a href="#">Living in Sydney</a>
</li>
<li>
<a href="#">Experience UTS in VR</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Current students</a>
<ul class="mobile-menu__level-2">
<li>
<a href="#">Managing your course</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Your enrolment</a>
</li>
<li>
<a href="#">Fees and payment</a>
</li>
<li>
<a href="#">Your student info</a>
</li>
<li>
<a href="#">Classes and assessment</a>
</li>
<li>
<a href="#">Graduation</a>
</li>
</ul>
</li>
<li>
<a href="#">Opportunities</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Scholarships, prizes and awards</a>
</li>
<li>
<a href="#">Overseas opportunities</a>
</li>
<li>
<a href="#">Community and leadership programs</a>
</li>
<li>
<a href="#">Career development</a>
</li>
<li>
<a href="#">Work opportunities</a>
</li>
</ul>
</li>
<li>
<a href="#">Support</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Academic support</a>
</li>
<li>
<a href="#">Health and wellbeing</a>
</li>
<li>
<a href="#">Financial help</a>
</li>
<li>
<a href="#">Accommodation</a>
</li>
<li>
<a href="#">When things go wrong</a>
</li>
</ul>
</li>
<li>
<a href="#">Campus life</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Your campus</a>
</li>
<li>
<a href="#">Communication at UTS</a>
</li>
<li>
<a href="#">Social and cultural activities</a>
</li>
<li>
<a href="#">Sport and recreation</a>
</li>
<li>
<a href="#">Ways to meet people</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="is-active">Research and teaching</a>
<ul class="mobile-menu__level-2">
<li>
<a href="#">Our research</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sustainability</a>
</li>
<li>
<a href="#">Future work and industry</a>
</li>
<li>
<a href="#">Social futures</a>
</li>
<li>
<a href="#">UTS research centres</a>
</li>
</ul>
</li>
<li>
<a href="#">Teaching and learning</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Learning futures</a>
</li>
<li>
<a href="#">UTS model of learning</a>
</li>
<li>
<a href="#">Iniatives and projects</a>
</li>
<li>
<a href="#">Learning and teaching grants</a>
</li>
<li>
<a href="#">Awards and citations</a>
</li>
</ul>
</li>
<li>
<a href="#">Future researchers</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Research degrees at UTS</a>
</li>
<li>
<a href="#">Future research staff</a>
</li>
<li>
<a href="#">Applying to UTS</a>
</li>
</ul>
</li>
<li>
<a href="#">Industry partnerships</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Ways to engage</a>
</li>
<li>
<a href="#">Working with us</a>
</li>
<li>
<a href="#">IP and commercialisation</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Partners and community</a>
<ul class="mobile-menu__level-2">
<li>
<a href="#">Initiatives</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">UTS Equal Futures</a>
</li>
<li>
<a href="#">UTS Innovation & Creative Intelligence Unit</a>
</li>
<li>
<a href="#">Data Arena</a>
</li>
<li>
<a href="#">Social justice at UTS</a>
</li>
<li>
<a href="#">UTS Sustainability</a>
</li>
<li>
<a href="#">Indigenous Education and Employment</a>
</li>
<li>
<a href="#">UTS Shopfront Community Program</a>
</li>
<li>
<a href="#">Student voice in university decision making</a>
</li>
<li>
<a href="#">Internationalisation</a>
</li>
<li>
<a href="#">UTS: Art Gallery and Collection</a>
</li>
<li>
<a href="#">City Campus Master Plan</a>
</li>
<li>
<a href="#">Australia Piano Quartet</a>
</li>
<li>
<a href="#">After da Vinci</a>
</li>
<li>
<a href="#">UTS Sustainability</a>
</li>
</ul>
</li>
<li>
<a href="#">Working with UTS</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Partner with us</a>
</li>
<li>
<a href="#">Recruit our best and brightest</a>
</li>
<li>
<a href="#">Develop your staff</a>
</li>
</ul>
</li>
<li>
<a href="#">Venues and facilities</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Our venues</a>
</li>
<li>
<a href="#">Booking and using venues</a>
</li>
</ul>
</li>
<li>
<a href="#">Conferences and seminars</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">InSPiRE</a>
</li>
<li>
<a href="#">Research Applications in Information and Library Studies (RAILS) Conference</a>
</li>
<li>
<a href="#">Documents Unbounded</a>
</li>
<li>
<a href="#">UTSpeaks</a>
</li>
<li>
<a href="#">UTS Science in focus</a>
</li>
<li>
<a href="#">Zunz lecture series</a>
</li>
<li>
<a href="#">UTSpotlight Events</a>
</li>
<li>
<a href="#">ASERA Conference</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
{% endblock %}
{% endembed %}
6.3.2 Example View in a new window
The mobile menu is shown here as it appears on a mobile device.
Twig: components/mobile-menu/mobile-menu.twig
Example
Markup
<div class="dialog" role="dialog" aria-label="Main menu">
<nav class="mobile-menu js-mobile-menu" role="navigation" aria-label="Main menu">
<ul class="mobile-menu__level-1">
<li>
<a href="#">Future students</a>
<ul class="mobile-menu__level-2">
<li>
<a href="#">Find a course</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Analytics and Data Science</a>
</li>
<li>
<a href="#">Business</a>
</li>
<li>
<a href="#">Communication</a>
</li>
<li>
<a href="#">Creative Intelligence and Innovation</a>
</li>
<li>
<a href="#">Design, Architecture and Building</a>
</li>
<li>
<a href="#">Education</a>
</li>
<li>
<a href="#">Engineering</a>
</li>
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Health (GEM)</a>
</li>
<li>
<a href="#">Information Technology</a>
</li>
<li>
<a href="#">International Studies</a>
</li>
<li>
<a href="#">Law</a>
</li>
<li>
<a href="#">Science</a>
</li>
<li>
<a href="#">Transdisciplinary Innovation</a>
</li>
</ul>
</li>
<li>
<a href="#">Information for</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">High school students</a>
</li>
<li>
<a href="#">Non-current school leavers</a>
</li>
<li>
<a href="#">Postgraduate students</a>
</li>
<li>
<a href="#">Research students</a>
</li>
<li>
<a href="#">Short course students</a>
</li>
<li>
<a href="#">Indigenous Australians</a>
</li>
<li>
<a href="#">Students with special needs</a>
</li>
<li>
<a href="#">Careers advisers, teachers and principals</a>
</li>
<li>
<a href="#">International students</a>
</li>
</ul>
</li>
<li>
<a href="#">Important info</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Entry schemes and pathways</a>
</li>
</ul>
</li>
<li>
<a href="#">Studying at UTS</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Practical learning</a>
</li>
<li>
<a href="#">Industry connections</a>
</li>
<li>
<a href="#">Overseas opportunities</a>
</li>
<li>
<a href="#">Student support</a>
</li>
<li>
<a href="#">Student life</a>
</li>
<li>
<a href="#">Living in Sydney</a>
</li>
<li>
<a href="#">Experience UTS in VR</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Current students</a>
<ul class="mobile-menu__level-2">
<li>
<a href="#">Managing your course</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Your enrolment</a>
</li>
<li>
<a href="#">Fees and payment</a>
</li>
<li>
<a href="#">Your student info</a>
</li>
<li>
<a href="#">Classes and assessment</a>
</li>
<li>
<a href="#">Graduation</a>
</li>
</ul>
</li>
<li>
<a href="#">Opportunities</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Scholarships, prizes and awards</a>
</li>
<li>
<a href="#">Overseas opportunities</a>
</li>
<li>
<a href="#">Community and leadership programs</a>
</li>
<li>
<a href="#">Career development</a>
</li>
<li>
<a href="#">Work opportunities</a>
</li>
</ul>
</li>
<li>
<a href="#">Support</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Academic support</a>
</li>
<li>
<a href="#">Health and wellbeing</a>
</li>
<li>
<a href="#">Financial help</a>
</li>
<li>
<a href="#">Accommodation</a>
</li>
<li>
<a href="#">When things go wrong</a>
</li>
</ul>
</li>
<li>
<a href="#">Campus life</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Your campus</a>
</li>
<li>
<a href="#">Communication at UTS</a>
</li>
<li>
<a href="#">Social and cultural activities</a>
</li>
<li>
<a href="#">Sport and recreation</a>
</li>
<li>
<a href="#">Ways to meet people</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Research and teaching</a>
<ul class="mobile-menu__level-2">
<li>
<a href="#">Our research</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#">Data Science</a>
</li>
<li>
<a href="#">Sustainability</a>
</li>
<li>
<a href="#">Future work and industry</a>
</li>
<li>
<a href="#">Social futures</a>
</li>
<li>
<a href="#">UTS research centres</a>
</li>
</ul>
</li>
<li>
<a href="#">Teaching and learning</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Learning futures</a>
</li>
<li>
<a href="#">UTS model of learning</a>
</li>
<li>
<a href="#">Iniatives and projects</a>
</li>
<li>
<a href="#">Learning and teaching grants</a>
</li>
<li>
<a href="#">Awards and citations</a>
</li>
</ul>
</li>
<li>
<a href="#">Future researchers</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Research degrees at UTS</a>
</li>
<li>
<a href="#">Future research staff</a>
</li>
<li>
<a href="#">Applying to UTS</a>
</li>
</ul>
</li>
<li>
<a href="#">Industry partnerships</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Ways to engage</a>
</li>
<li>
<a href="#">Working with us</a>
</li>
<li>
<a href="#">IP and commercialisation</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Partners and community</a>
<ul class="mobile-menu__level-2">
<li>
<a href="#">Initiatives</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">UTS Equal Futures</a>
</li>
<li>
<a href="#">UTS Innovation & Creative Intelligence Unit</a>
</li>
<li>
<a href="#">Data Arena</a>
</li>
<li>
<a href="#">Social justice at UTS</a>
</li>
<li>
<a href="#">UTS Sustainability</a>
</li>
<li>
<a href="#">Indigenous Education and Employment</a>
</li>
<li>
<a href="#">UTS Shopfront Community Program</a>
</li>
<li>
<a href="#">Student voice in university decision making</a>
</li>
<li>
<a href="#">Internationalisation</a>
</li>
<li>
<a href="#">UTS: Art Gallery and Collection</a>
</li>
<li>
<a href="#">City Campus Master Plan</a>
</li>
<li>
<a href="#">Australia Piano Quartet</a>
</li>
<li>
<a href="#">After da Vinci</a>
</li>
<li>
<a href="#">UTS Sustainability</a>
</li>
</ul>
</li>
<li>
<a href="#">Working with UTS</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Partner with us</a>
</li>
<li>
<a href="#">Recruit our best and brightest</a>
</li>
<li>
<a href="#">Develop your staff</a>
</li>
</ul>
</li>
<li>
<a href="#">Venues and facilities</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">Our venues</a>
</li>
<li>
<a href="#">Booking and using venues</a>
</li>
</ul>
</li>
<li>
<a href="#">Conferences and seminars</a>
<ul class="mobile-menu__level-3">
<li>
<a href="#">InSPiRE</a>
</li>
<li>
<a href="#">Research Applications in Information and Library Studies (RAILS) Conference</a>
</li>
<li>
<a href="#">Documents Unbounded</a>
</li>
<li>
<a href="#">UTSpeaks</a>
</li>
<li>
<a href="#">UTS Science in focus</a>
</li>
<li>
<a href="#">Zunz lecture series</a>
</li>
<li>
<a href="#">UTSpotlight Events</a>
</li>
<li>
<a href="#">ASERA Conference</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<button class="dialog__close">Close</button>
</div>
6.4 Site search View in a new window
The site search bar.
6.4.1 Example (With toggle) View in a new window
Click the magnifying glass icon to show the search dialog menu, as it appears on the site.
Twig: components/site-search/site-search-complete.twig
Example
Markup
<button class="site-search__toggle" id="site-search-dialog-toggle">Open dialog</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {classes: 'js-dialog site-search', toggle: 'site-search-dialog-toggle', label: 'Dialog'} %}
{% block content %}
<div class="tab-list js-tab-list">
<div class="tab-list__tab-wrapper">
<ul class="tab-list__list">
<li>
<a href="#searchSite" class="tab-list__tab">Search entire site</a>
</li>
<li>
<a href="#searchCourse" class="tab-list__tab">Search for a course</a>
</li>
<li>
<a href="#browseStudyAreas" class="tab-list__tab site-search__browse-toggle">Browse study areas</a>
</li>
</ul>
</div>
<section class="tab-list__panel" id="searchSite">
<input type="search" class="site-search__input-jumbo" placeholder="Search" autofocus>
</section>
<section class="tab-list__panel" id="searchCourse">
<input type="text" class="site-search__input-jumbo" placeholder="Search" value="Design" autofocus>
<ul class="site-search__results ui-autocomplete ui-front ui-menu ui-widget ui-widget-content">
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Design, architecture and buiding</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Creative intelligence and innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forecisic Science Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Science Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Science</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Environmental Biology</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forecisic Science</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forensic Science Bachelor of Arts in In International Studies</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__more-link">See all 137 results</a>
</div>
</li>
</ul>
</section>
<section class="tab-list__panel" id="browseStudyAreas">
<div class="site-search__browse">
<div class="site-search__category">
<h3><a href="#">Analytics & Data Science</a></h3>
<ul>
<li><a href="#">Postgraduate</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Business</a></a></h3>
<ul>
<li><a href="#">Accounting</a></li>
<li><a href="#">Economics</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">MBA Programs</a></li>
<li><a href="#">Postgraduate Programs</a></li>
<li><a href="#">Research Programs</a></li>
<li><a href="#">Undergraduate Programs</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Communication</a></h3>
<ul>
<li><a href="#">Undergraduate Programs</a></li>
<li><a href="#">Sports Media</a></li>
<li><a href="#">Digital and Social Media</a></li>
<li><a href="#">Digital Information Management</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Media Arts and Production</a></li>
<li><a href="#">Public Communication</a></li>
<li><a href="#">Social and Political Sciences</a></li>
<li><a href="#">Music and Sound Design</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Creative Intelligence and Innovation</a></h3>
<ul>
<li><a href="#">Creative Intelligence and Innovation</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Design, Architecture and Building</a></h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Design Innovation</a></li>
<li><a href="#">Architecture</a></li>
<li><a href="#">Built Environment</a></li>
<li><a href="#">DAB Research</a></li>
<li><a href="#">Local Government</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Education</a></h3>
<ul>
<li><a href="#">Master of Education</a></li>
<li><a href="#">Primary Education</a></li>
<li><a href="#">Secondary Education</a></li>
<li><a href="#">TESOL</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Engineering</a></h3>
<ul>
<li><a href="#">Undergraduate courses</a></li>
<li><a href="#">Postgraduate courses</a></li>
<li><a href="#">Biomedical</a></li>
<li><a href="#">Civil and Environmental</a></li>
<li><a href="#">Computer Systems and Software</a></li>
<li><a href="#">Electrical</a></li>
<li><a href="#">Engineering Management</a></li>
<li><a href="#">Mechanical and Mechatronic</a></li>
<li><a href="#">Systems and Operations</a></li>
<li><a href="#">Telecommunications</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Health</a></h3>
<ul>
<li><a href="#">Nursing (Undergraduate)</a></li>
<li><a href="#">Nursing (Postgraduate)</a></li>
<li><a href="#">Midwifery</a></li>
<li><a href="#">Sport and Exercise</a></li>
<li><a href="#">Public Health</a></li>
<li><a href="#">Health Science</a></li>
<li><a href="#">Health Services Management</a></li>
<li><a href="#">Health Policy</a></li>
<li><a href="#">Health (Postgraduate)</a></li>
<li><a href="#">Research and Honours</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Health (GEM)</a></h3>
<ul>
<li><a href="#">Physiotherapy</a></li>
<li><a href="#">Orthoptics</a></li>
<li><a href="#">Clinical Psychology</a></li>
<li><a href="#">Pharmacy</a></li>
<li><a href="#">Good Manufacturing Practice</a></li>
<li><a href="#">Pharmaceutical Science</a></li>
<li><a href="#">Health Policy</a></li>
<li><a href="#">Coursework Degrees</a></li>
<li><a href="#">Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Information Technology</a></h3>
<ul>
<li><a href="#">Undergraduate courses</a></li>
<li><a href="#">Postgraduate courses</a></li>
<li><a href="#">Business Analysis and Information Systems</a></li>
<li><a href="#">Computer Science, Data Analytics/Mining</a></li>
<li><a href="#">Games, Graphics and Multimedia</a></li>
<li><a href="#">IT Management and Leadership</a></li>
<li><a href="#">Networking and Security</a></li>
<li><a href="#">Software Development and Programming</a></li>
<li><a href="#">Systems Design and Analysis</a></li>
<li><a href="#">Web and Cloud Computing</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">International Studies</a></h3>
<ul>
<li><a href="#">Global Studies</a></li>
<li><a href="#">International Studies</a></li>
<li><a href="#">Languages</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Law</a></h3>
<ul>
<li><a href="#">Undergraduate Law Programs</a></li>
<li><a href="#">Juris Doctor</a></li>
<li><a href="#">Legal Studies</a></li>
<li><a href="#">Practical Legal Training</a></li>
<li><a href="#">Intellectual Property</a></li>
<li><a href="#">Dispute Resolution</a></li>
<li><a href="#">Master of Laws</a></li>
<li><a href="#">Higher Degree Research</a></li>
<li><a href="#">Overseas Practitioner Programs</a></li>
<li><a href="#">Postgraduate Law Programs</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Science</a></h3>
<ul>
<li><a href="#">Undergraduate Programs</a></li>
<li><a href="#">Postgraduate Programs</a></li>
<li><a href="#">Research Programs</a></li>
<li><a href="#">Life Sciences</a></li>
<li><a href="#">Mathematical and Physical Sciences</a></li>
</ul>
</div>
<div class="site-search__category">
<h3><a href="#">Transdisciplinary Innovation</a></h3>
<ul>
<li><a href="#">UTS Animal Logic Academy</a></li>
<li><a href="#">Creative Intelligence and Innovation</a></li>
<li><a href="#">Transdisciplinary Innovation</a></li>
</ul>
</div>
</div>
</section>
</div>
{% endblock %}
{% endembed %}
6.4.2 Example View in a new window
A dialog with site search, course search and browse. Click the magnifying glass to open the example.
Twig: components/site-search/site-search.twig
Example
Markup
<div class="dialog site-search" role="dialog" aria-label="Search">
<div class="tab-list js-tab-list">
<div class="tab-list__tab-wrapper">
<ul class="tab-list__list">
<li>
<a href="#searchSite1" class="tab-list__tab">Search entire site</a>
</li>
<li>
<a href="#searchCourse1" class="tab-list__tab">Search for a course</a>
</li>
<li>
<a href="#browseStudyAreas1" class="tab-list__tab site-search__browse-toggle">Browse study areas</a>
</li>
</ul>
</div>
<section class="tab-list__panel" id="searchSite1">
<input type="search" class="site-search__input-jumbo" placeholder="Search">
</section>
<section class="tab-list__panel" id="searchCourse1">
<input type="text" class="site-search__input-jumbo" placeholder="Search" value="Design">
<ul class="site-search__results ui-autocomplete ui-front ui-menu ui-widget ui-widget-content">
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Design, architecture and buiding</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Creative intelligence and innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Design in Architecture Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forecisic Science Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Science Bachelor of Creative Intelligence And Innovation</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__heading">Science</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Environmental Biology</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forecisic Science</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#">Bachelor of Forensic Science Bachelor of Arts in In International Studies</a>
</div>
</li>
<li class="ui-menu-item">
<div class="search-api-autocomplete-suggestion">
<a href="#" class="ui-autocomplete__more-link">See all 137 results</a>
</div>
</li>
</ul>
</section>
<section class="tab-list__panel" id="browseStudyAreas1">
<div class="site-search__browse">
<div class="site-search__category">
<h4><a href="#">Analytics & Data Science</a></h4>
<ul>
<li><a href="#">Postgraduate</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Business</a></a></h4>
<ul>
<li><a href="#">Accounting</a></li>
<li><a href="#">Economics</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">MBA Programs</a></li>
<li><a href="#">Postgraduate Programs</a></li>
<li><a href="#">Research Programs</a></li>
<li><a href="#">Undergraduate Programs</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Communication</a></h4>
<ul>
<li><a href="#">Undergraduate Programs</a></li>
<li><a href="#">Sports Media</a></li>
<li><a href="#">Digital and Social Media</a></li>
<li><a href="#">Digital Information Management</a></li>
<li><a href="#">Journalism</a></li>
<li><a href="#">Media Arts and Production</a></li>
<li><a href="#">Public Communication</a></li>
<li><a href="#">Social and Political Sciences</a></li>
<li><a href="#">Music and Sound Design</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Creative Intelligence and Innovation</a></h4>
<ul>
<li><a href="#">Creative Intelligence and Innovation</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Design, Architecture and Building</a></h4>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Design Innovation</a></li>
<li><a href="#">Architecture</a></li>
<li><a href="#">Built Environment</a></li>
<li><a href="#">DAB Research</a></li>
<li><a href="#">Local Government</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Education</a></h4>
<ul>
<li><a href="#">Master of Education</a></li>
<li><a href="#">Primary Education</a></li>
<li><a href="#">Secondary Education</a></li>
<li><a href="#">TESOL</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Engineering</a></h4>
<ul>
<li><a href="#">Undergraduate courses</a></li>
<li><a href="#">Postgraduate courses</a></li>
<li><a href="#">Biomedical</a></li>
<li><a href="#">Civil and Environmental</a></li>
<li><a href="#">Computer Systems and Software</a></li>
<li><a href="#">Electrical</a></li>
<li><a href="#">Engineering Management</a></li>
<li><a href="#">Mechanical and Mechatronic</a></li>
<li><a href="#">Systems and Operations</a></li>
<li><a href="#">Telecommunications</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Health</a></h4>
<ul>
<li><a href="#">Nursing (Undergraduate)</a></li>
<li><a href="#">Nursing (Postgraduate)</a></li>
<li><a href="#">Midwifery</a></li>
<li><a href="#">Sport and Exercise</a></li>
<li><a href="#">Public Health</a></li>
<li><a href="#">Health Science</a></li>
<li><a href="#">Health Services Management</a></li>
<li><a href="#">Health Policy</a></li>
<li><a href="#">Health (Postgraduate)</a></li>
<li><a href="#">Research and Honours</a></li>
</div>
<div class="site-search__category">
<h4><a href="#">Health (GEM)</a></h4>
<ul>
<li><a href="#">Physiotherapy</a></li>
<li><a href="#">Orthoptics</a></li>
<li><a href="#">Clinical Psychology</a></li>
<li><a href="#">Pharmacy</a></li>
<li><a href="#">Good Manufacturing Practice</a></li>
<li><a href="#">Pharmaceutical Science</a></li>
<li><a href="#">Health Policy</a></li>
<li><a href="#">Coursework Degrees</a></li>
<li><a href="#">Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Information Technology</a></h4>
<ul>
<li><a href="#">Undergraduate courses</a></li>
<li><a href="#">Postgraduate courses</a></li>
<li><a href="#">Business Analysis and Information Systems</a></li>
<li><a href="#">Computer Science, Data Analytics/Mining</a></li>
<li><a href="#">Games, Graphics and Multimedia</a></li>
<li><a href="#">IT Management and Leadership</a></li>
<li><a href="#">Networking and Security</a></li>
<li><a href="#">Software Development and Programming</a></li>
<li><a href="#">Systems Design and Analysis</a></li>
<li><a href="#">Web and Cloud Computing</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">International Studies</a></h4>
<ul>
<li><a href="#">Global Studies</a></li>
<li><a href="#">International Studies</a></li>
<li><a href="#">Languages</a></li>
<li><a href="#">Postgraduate Research Degrees</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Law</a></h4>
<ul>
<li><a href="#">Undergraduate Law Programs</a></li>
<li><a href="#">Juris Doctor</a></li>
<li><a href="#">Legal Studies</a></li>
<li><a href="#">Practical Legal Training</a></li>
<li><a href="#">Intellectual Property</a></li>
<li><a href="#">Dispute Resolution</a></li>
<li><a href="#">Master of Laws</a></li>
<li><a href="#">Higher Degree Research</a></li>
<li><a href="#">Overseas Practitioner Programs</a></li>
<li><a href="#">Postgraduate Law Programs</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Science</a></h4>
<ul>
<li><a href="#">Undergraduate Programs</a></li>
<li><a href="#">Postgraduate Programs</a></li>
<li><a href="#">Research Programs</a></li>
<li><a href="#">Life Sciences</a></li>
<li><a href="#">Mathematical and Physical Sciences</a></li>
</ul>
</div>
<div class="site-search__category">
<h4><a href="#">Transdisciplinary Innovation</a></h4>
<ul>
<li><a href="#">UTS Animal Logic Academy</a></li>
<li><a href="#">Creative Intelligence and Innovation</a></li>
<li><a href="#">Transdisciplinary Innovation</a></li>
</ul>
</div>
</div>
</section>
</div>
</div>
6.5 Footer menu View in a new window
The footer menu uses the standard grid.
Twig: components/footer-menu/footer-menu.twig
Example
Markup
<nav class="footer-menu" role="navigation" aria-label="Site information">
<ul class="footer-menu__level-1">
<li class="footer-menu__item">
<a href="#">About UTS</a>
<ul class="footer-menu__level-2">
<li class="footer-menu__item">
<a href="#">The University</a>
</li>
<li class="footer-menu__item">
<a href="#">Maps and facilities</a>
</li>
<li class="footer-menu__item">
<a href="#">UTS governance</a>
</li>
<li class="footer-menu__item">
<a href="#">Faculties</a>
</li>
<li class="footer-menu__item">
<a href="#">Privacy statement</a>
</li>
<li class="footer-menu__item">
<a href="#">Disclaimer</a>
</li>
</ul>
</li>
<li class="footer-menu__item">
<a href="#">Library</a>
<ul class="footer-menu__level-2">
<li class="footer-menu__item">
<a href="#">Search catalogue</a>
</li>
<li class="footer-menu__item">
<a href="#">What's on</a>
</li>
<li class="footer-menu__item">
<a href="#">Help and resources</a>
</li>
</ul>
</li>
<li class="footer-menu__item">
<a href="#">Newsroom</a>
<ul class="footer-menu__level-2">
<li class="footer-menu__item">
<a href="#">Events</a>
</li>
<li class="footer-menu__item">
<a href="#">Find an expert</a>
</li>
<li class="footer-menu__item">
<a href="#">Media centre</a>
</li>
</ul>
</li>
<li class="footer-menu__item">
<a href="#">Staff</a>
<ul class="footer-menu__level-2">
<li class="footer-menu__item">
<a href="#">Staff Connect</a>
</li>
<li class="footer-menu__item">
<a href="#">Webmail</a>
</li>
<li class="footer-menu__item">
<a href="#">Staff Directory</a>
</li>
<li class="footer-menu__item">
<a href="#">Jobs at UTS</a>
</li>
</ul>
</li>
</ul>
</nav>
6.6 Footer social View in a new window
Social links that appear in the footer.
Twig: components/footer-social/footer-social.twig
Example
Markup
<nav class="footer-social" role="navigation" aria-label="UTS social media">
<ul class="footer-social__menu">
<li class="footer-social__item">
<a href="http://facebook.com/UTSEngage" class="facebook">Facebook</a>
</li>
<li class="footer-social__item">
<a href="http://twitter.com/utsengage" class="twitter">Twitter</a>
</li>
<li class="footer-social__item">
<a href="http://instagram.com/utsengage" class="instagram">Instagram</a>
</li>
<li class="footer-social__item">
<a href="http://youtube.com/user/utschannel" class="youtube">Youtube</a>
</li>
<li class="footer-social__item">
<a href="http://linkedin.com/company/166678" class="linkedin">Linkedin</a>
</li>
</ul>
</nav>
6.7 Breadcrumbs View in a new window
Appearing at the top of most pages, the breadcrumbs let users know the location of the current page in relation to the site menu.
Twig: components/breadcrumbs/breadcrumbs.twig
Example
Markup
<nav class="breadcrumbs {{modifier_class}}" role="navigation" aria-label="You are here">
<ol class="breadcrumbs__menu">
{% for item in breadcrumb %}
{% if item.url %}
<li class="breadcrumbs__item">
<a href="{{ item.url }}">{{ item.text }}</a>
</li>
{% else %}
<li class="breadcrumbs__item" aria-current="page">{{ item.text }}</li>
{% endif %}
{% endfor %}
</ol>
</nav>
6.8 Buttons View in a new window
Various styles of button.
6.8.1 Navigational View in a new window
Buttons used for page navigation.
Twig: components/button/button-nav.twig
Markup
<a href="#" class="button__nav button--prev {{ modifier_class }}">Previous</a>
<br><br>
<a href="#" class="button__nav button--next {{ modifier_class }}">Next</a>
6.8.2 Navigational (on blue) View in a new window
As above, with white text suitable for use on a blue background.
Twig: components/button/button-nav-white.twig
Markup
<a href="#" class="button__nav button--prev-rev {{ modifier_class }}">Previous</a>
<br><br>
<a href="#" class="button__nav button--next-rev {{ modifier_class }}">Next</a>
6.8.3 Basic View in a new window
A simple button.
Twig: components/button/button.twig
Default example
With mouse cursor hover.
With keyboard focus.
When clicked/activated.
Markup
<a href="#" class="button {{ modifier_class }}">A button</a>
6.8.4 White View in a new window
A white version of the button.
Twig: components/button/button.twig
Default example
With mouse cursor hover.
With keyboard focus.
When clicked/activated.
Markup
<a href="#" class="button {{ modifier_class }}">A button</a>
6.8.5 Black View in a new window
A black version of the button.
Twig: components/button/button.twig
Default example
With mouse cursor hover.
With keyboard focus.
When clicked/activated.
Markup
<a href="#" class="button {{ modifier_class }}">A button</a>
6.8.6 Red View in a new window
A red version of the button.
Twig: components/button/button.twig
Default example
With mouse cursor hover.
With keyboard focus.
When clicked/activated.
Markup
<a href="#" class="button {{ modifier_class }}">A button</a>
6.9 Pager View in a new window
Full pager.
Twig: components/pager/pager.twig
Example
Markup
<nav class="pager" role="navigation" aria-label="Pagination" aria-describedby="pager-info">
{% if total_items %}
<p class="pager__desc" id="pager-info">Showing {{ first_item }}-{{ last_item }} of {{ total_items }}</p>
{% endif %}
<ul class="pager__menu">
{% if pager.previous %}
<li class="pager__previous"><a href="{{ pager.previous.href }}">{{ pager.previous.text }}</a></li>
{% endif %}
{% if pager.next %}
<li class="pager__next"><a href="{{ pager.next.href }}">{{ pager.next.text }}</a></li>
{% endif %}
{% if ellipses.previous %}
<li class="pager__ellipsis">…</li>
{% endif %}
{% for key, item in pager.pages %}
{% if current == key %}
<li class="pager__item" aria-current="page">{{ key }}</li>
{% else %}
<li class="pager__item"><a href="{{ item.href }}">{{ key }}</a></li>
{% endif %}
{% endfor %}
{% if ellipses.next %}
<li class="pager__ellipsis">…</li>
{% endif %}
</ul>
</nav>
6.10 Advanced table View in a new window
Features enlargeable table cells and a stacked responsive design. In addition
use the table--cell-width-x classes on td elements to control their size.
Twig: components/table/responsive-table.twig
Example
| 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
<div class="table__stretch-wrapper">
<table class="js-table--responsive">
<caption>A table caption</caption>
<thead>
<tr>
<th>Name</th>
<th>Unit</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table--cell-width-l table--enlarged"><a href="#">Adair, Daryl</a></td>
<td class="table--cell-width-l">Management Discipline Group</td>
<td class="table--cell-width-m">Associate Professor</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Adriaanse, Johanna</a></td>
<td>Management Discipline Group</td>
<td>Associate of the faculty</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Agarwal, Renu</a></td>
<td>Management Discipline Group</td>
<td>Associate Professor</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Alexeev, Vital</a></td>
<td>Finance Discipline Group</td>
<td>Senior Lecturer</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Golsby-Smith, Tony</a></td>
<td>Finance Discipline Group</td>
<td>Associate of the faculty</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Adair, Daryl</a></td>
<td>Management Discipline Group</td>
<td>Associate Professor</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Adriaanse, Johanna</a></td>
<td>Management Discipline Group</td>
<td>Associate of the faculty</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Agarwal, Renu</a></td>
<td>Management Discipline Group</td>
<td>Associate Professor</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Alexeev, Vital</a></td>
<td>Finance Discipline Group</td>
<td>Senior Lecturer</td>
</tr>
<tr>
<td class="table--enlarged"><a href="#">Golsby-Smith, Tony</a></td>
<td>Finance Discipline Group</td>
<td>Associate of the faculty</td>
</tr>
</tbody>
</table>
</div>
6.11 Page title View in a new window
The h1.
Twig: components/page-title/page-title.twig
Example
Events
Markup
<div class="page-title {{ modifier_class }}">
<h1{{ title_attributes }}>{% if title_prefix %}<span class="page-title__prefix">{{ title_prefix }}</span> {% endif %}{{ title }}</h1>
{% block component %}{% endblock %}
</div>
6.11.1 Page title with Component View in a new window
The h1 with a search combo box (or other component).
Twig: components/page-title/page-title-component.twig
Example
Staff listing
Markup
{% embed '@uts_theme/components/page-title/page-title.twig' with {
title: 'Staff listing',
modifier_class: 'page-title--component'
} only %}
{% block component %}
<div class="page-title__component">
<form action="#">
{% include '@uts_theme/form/input/input-combo.twig' %}
</form>
</div>
{% endblock %}
{% endembed %}6.12 Sidebar menu View in a new window
The sub-page menu.
6.12.1 1st level View in a new window
Example
Markup
<nav class="sidebar-menu" role="navigation" aria-label="Sidebar menu">
<ul class="sidebar-menu__level-1">
<li class="sidebar-menu__item"><a href="#">Who we are</a></li>
<li class="sidebar-menu__item"><a href="#">What we do</a></li>
<li class="sidebar-menu__item"><a href="#">Our research</a></li>
<li class="sidebar-menu__item"><a href="#">News</a></li>
<li class="sidebar-menu__item is-active"><a href="#">Events</a></li>
<li class="sidebar-menu__item"><a href="#">Industry partnerships</a></li>
<li class="sidebar-menu__item"><a href="#">Staff listing</a></li>
<li class="sidebar-menu__item"><a href="#">Academic staff</a></li>
<li class="sidebar-menu__item"><a href="#">FEIT Professional staff</a></li>
<li class="sidebar-menu__item"><a href="#">Inspire</a></li>
</ul>
</nav>
6.12.2 2nd level View in a new window
Example
Markup
<nav class="sidebar-menu" role="navigation" aria-label="Sidebar menu">
<ul class="sidebar-menu__level-1">
<li class="sidebar-menu__item"><a href="#">Faculty and schools</a></li>
<li class="sidebar-menu__item is-expanded"><a href="#">Featured courses</a>
<ul class="sidebar-menu__level-2">
<li class="sidebar-menu__item"><a href="#">Bachelor of Photography and</a></li>
<li class="sidebar-menu__item"><a href="#">Situated Media</a></li>
<li class="sidebar-menu__item"><a href="#">Bachelor of Landscape Architecture</a></li>
<li class="sidebar-menu__item"><a href="#">Bachelor of Design in Visual Communication Design</a></li>
<li class="sidebar-menu__item is-active"><a href="#">Master of Planning</a></li>
<li class="sidebar-menu__item"><a href="#">Master of Real Estate Investment</a></li>
<li class="sidebar-menu__item"><a href="#">Master of Landscape Architecture: new in 2018</a></li>
<li class="sidebar-menu__item"><a href="#">Study Project Management at UTS</a></li>
<li class="sidebar-menu__item"><a href="#">Property Development Dual-Discipline Degrees</a></li>
</ul>
</li>
<li class="sidebar-menu__item"><a href="#">Course guides</a></li>
<li class="sidebar-menu__item"><a href="#">Course enquiries</a></li>
<li class="sidebar-menu__item"><a href="#">Outstanding career and employment prospects</a></li>
<li class="sidebar-menu__item"><a href="#">World-class facilities</a></li>
<li class="sidebar-menu__item"><a href="#">Accredited by industry</a></li>
</ul>
</nav>
6.13 Teaser tiles View in a new window
6.13.1 Event teaser View in a new window
The teaser display for an event. Used for both upcoming and past events.
Twig: components/event/event-teaser.twig
Example
Women in Engineering and IT hands-on day
Opportunity for female students to participate in a range of engaging, educational and often explosive hands-on activities...
Markup
<article class="event event--teaser">
<time class="event__date" datetime="2017-05-20">20 May, 2017</time>
<h3 class="event__title"><a href="#">Women in Engineering and IT hands-on day</a></h3>
<p class="event__short-desc">Opportunity for female students to participate in a range of engaging, educational and often explosive hands-on activities...</p>
</article>
6.13.2 News teaser tile View in a new window
The teaser display for a news item.
Twig: components/news/news-teaser.twig
Example
How we can turn the tide of antimicrobial resistance
Opportunity for female students to participate in a range of engaging, educational and often explosive hands-on activities...
Markup
<article class="news--teaser">
<h3 class="news__title"><a href="#">How we can turn the tide of antimicrobial resistance</a></h3>
<time class="news__date" datetime="2017-05-20">3 April, 2017</time>
<p class="news__short-desc">Opportunity for female students to participate in a range of engaging, educational and often explosive hands-on activities...</p>
</article>
6.13.3 Image teaser View in a new window
A large image, with a clickable title and a teaser.
Twig: components/image-teaser/image-teaser.twig
Example
Markup
<div class="image-teaser">
<div class="image-teaser__image">
<img src="/themes/uts_theme/src/templates/event-example.jpg">
</div>
<div class="image-teaser__content">
<h3><a href="#">UTS Equal Futures</a></h3>
<p>The SAGE Athena SWAN program is an exciting new pilot that gives UTS the opportunity to focus on areas of stubborn gender disparity in STEMM.</p>
</div>
</div>
6.14 Listing View in a new window
Various ways to present lists of content.
6.14.1 Stacked View in a new window
A simple listing style with each item stacked after each other.
Twig: components/listing/listing-stacked.twig
Example
-
Women in Engineering and IT hands-on day
Opportunity for female students to participate in a range of engaging, educational and often explosive hands-on activities...
-
Women in Engineering and IT hands-on day
Opportunity for female students to participate in a range of engaging, educational and often explosive hands-on activities...
-
Women in Engineering and IT hands-on day
Opportunity for female students to participate in a range of engaging, educational and often explosive hands-on activities...
-
Women in Engineering and IT hands-on day
Opportunity for female students to participate in a range of engaging, educational and often explosive hands-on activities...
Markup
<ul class="listing listing--stacked">
<li>
{% include '@uts_theme/components/event/event-teaser.twig' %}
</li>
<li>
{% include '@uts_theme/components/event/event-teaser.twig' %}
</li>
<li>
{% include '@uts_theme/components/event/event-teaser.twig' %}
</li>
<li>
{% include '@uts_theme/components/event/event-teaser.twig' %}
</li>
</ul>
6.15 Sidebar View in a new window
Various layouts and combinations of the sidebar.
6.15.1 With title only View in a new window
Includes a menu and a section title.
Twig: components/sidebar/sidebar-with-title.twig
Example
Markup
<div class="sidebar">
<div class="sidebar__full">
<div class="sidebar__title">About Design, Architecture and Building</div>
{% include '@uts_theme/components/sidebar-menu/sidebar-menu-sub.twig' %}
</div>
<div class="sidebar__dialog">
<button class="sidebar__dialog-toggle" id="sidebar-dialog-toggle">About Design, Architecture and Building</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'sidebar-dialog-toggle', label: 'Menu'} %}
{% block content %}
{% include '@uts_theme/components/sidebar-menu/sidebar-menu-sub.twig' %}
{% endblock %}
{% endembed %}
</div>
</div>
6.15.2 With back button View in a new window
Includes a menu and a back button.
Twig: components/sidebar/sidebar-with-back.twig
Example
Markup
<div class="sidebar">
<div class="sidebar__full">
<div class="sidebar__seperator">
<a class="sidebar__back" href="#"><span>Back to Faculty of Engineering and Information Technology</span></a>
</div>
{% include '@uts_theme/components/sidebar-menu/sidebar-menu.twig' %}
</div>
<div class="sidebar__dialog">
<button class="sidebar__dialog-toggle" id="sidebar-dialog-toggle-2">Section title</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'sidebar-dialog-toggle-2', label: 'Menu'} %}
{% block content %}
<div class="sidebar__seperator">
<a class="sidebar__back" href="#">Back to Faculty of Engineering and Information Technology</a>
</div>
{% include '@uts_theme/components/sidebar-menu/sidebar-menu-sub.twig' %}
{% endblock %}
{% endembed %}
</div>
6.15.3 Alternate sidebar View in a new window
A grey sidebar.
Twig: components/sidebar/sidebar-alt.twig
Example
Markup
<div class="sidebar--alt">
<h3>A sidebar title</h3>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. <a href="#">Nullam id dolor id nibh ultricies</a> vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
6.15.4 Sidebar Info View in a new window
An info block with an icon, label and text that is shown in the sidebar on a full page.
Twig: components/sidebar/sidebar-info.twig
Default example
Date/time
Audience
Venue
Cost
RSVP
Email
ORCID
Contact
More
Markup
<div class="sidebar__info {{ modifier_class }}">
<h3 class="sidebar__info-title">Label</h3>
<p>Content line 1<br>Content line 2</p>
</div>
6.15.5 Sidebar promo View in a new window
An image promo that sits in the sidebar.
Twig: components/sidebar/sidebar-promo.twig
Markup
<div class="sidebar__promo">
<div class="promo promo--section">
<div class="promo__image">
{% block image %}
<img src="/themes/uts_theme/src/components/sidebar/square-blue-section-tile.svg" alt="Sidebar Promo">
{% endblock image %}
</div>
<h3 class="promo__title">
{% block title %}
<p><a href="#">Join us for the next International Postgraduate Evening</a></p>
{% endblock title %}
</h3>
</div>
</div>
6.16 Banner View in a new window
A full width banner image.
6.16.1 No overlay View in a new window
Standard banner. 1:3.428 ratio.
Twig: components/banner/banner.twig
Example
Markup
<div class="banner">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/health-course-area-3840x1845.jpg" alt="A man walking through the open area in the foyer of UTS" width="3840" height="1845">
</div>
</div>
6.16.2 Title overlay View in a new window
The standard banner, with the page title overlay.
Twig: components/banner/banner-page-title.twig
Example
Markup
<div class="banner">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/health-course-area-3840x1845.jpg" alt="A man walking through the open area in the foyer of UTS" width="3840" height="1845">
</div>
<div class="banner__overlay">
<div class="banner__content">
<div class="page-title">
<h1>Events</h1>
</div>
</div>
</div>
</div>
6.16.3 Hero View in a new window
A larger hero style banner used on course areas, landing pages, etc. 1:2.88 ratio.
Twig: components/banner/banner-hero.twig
Example
Markup
<div class="banner banner--hero">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/health-course-area-3840x1845.jpg" alt="A man walking through the open area in the foyer of UTS" width="3840" height="1845">
</div>
</div>
6.16.4 Research View in a new window
A hero banner used on research landing pages with a page title overlay.
Twig: components/banner/banner-research.twig
Example
Markup
<div class="banner banner--research">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/banner-lp-example.svg" alt="Abstract circle shapes" width="3840" height="1845">
</div>
<div class="banner__overlay">
<div class="banner__content">
<div class="banner__title-overlay">
<div class="page-title">
<h1><span class="page-title__prefix">WHO Collaborating Centre for</span> Nursing, Midwifery and Health Development</h1>
</div>
</div>
</div>
</div>
</div>
6.16.5 Clickable View in a new window
A hero banner used on the top level landing pages, it has a clickable link.
Twig: components/banner/banner-clickable.twig
Example
Markup
<div class="banner banner--clickable">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/health-course-area-3840x1845.jpg" alt="A man walking through the open area in the foyer of UTS" width="3840" height="1845">
</div>
<div class="banner__overlay">
<div class="banner__content">
<div class="banner__cta">
<div class="banner__cta-title">UTS Research wins $500k for safe water</div>
<a href="#">Technology Against Poverty prize</a>
</div>
</div>
</div>
</div>
6.16.6 Current students View in a new window
A hero banner with a row of clickable tiled boxes across the bottom.
Twig: components/banner/banner-current-students.twig
Example
Markup
<div class="banner banner--tiles">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/current-students.png" alt="Current students" width="3000" height="2000">
</div>
<div class="banner__overlay">
<div class="banner__content">
<div class="banner__title">
{% include '@uts_theme/components/page-title/page-title.twig' with { title: 'Current students' } only %}
</div>
{% include '@uts_theme/components/navigation-tiles/navigation-tiles.twig' %}
</div>
</div>
</div>
6.16.7 Homepage banner View in a new window
The largest banner ratio, used only on the homepage slider. 1:2.453 ratio.
Twig: components/banner/banner-home-page.twig
Example
Markup
<div class="banner banner--homepage">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/health-course-area-3840x1845.jpg" alt="A man walking through the open area in the foyer of UTS" width="3840" height="1845">
</div>
</div>
6.16.8 Search banner View in a new window
A banner with a search box
Twig: components/banner/banner-future-students.twig
Example
Markup
<div class="banner banner--search">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/future-students.jpg" alt="Current students" width="3000" height="2000">
</div>
<div class="banner__overlay">
<div class="banner__content">
<div class="banner__title">
{% include '@uts_theme/components/page-title/page-title.twig' with { title: 'Future students' } only %}
<form action="/" class="banner__search-form">
<div class="form-item">
<label>Find a course</label>
<input type="text" class="form-text" placeholder="Find courses by name...">
</div>
<div class="form-actions">
<input type="submit" class="form-submit" value="Search">
</div>
</form>
</div>
</div>
</div>
</div>
6.16.9 Banner testimonials View in a new window
Banner with light background, dark title and subtitle. No overlay colour.
Twig: components/banner/banner-testimonials.twig
Example
Markup
<div class="banner banner--testimonials">
<div class="banner__image">
<img src="/themes/uts_theme/src/components/banner/circles-on-grey.svg" alt="Circles on a grey background" width="3840" height="1845">
</div>
<div class="banner__overlay">
<div class="banner__content">
<div class="page-title">
<h1>Midwifery</h1>
</div>
<h2>Undergraduate student profiles</h2>
</div>
</div>
</div>
6.17 Intro View in a new window
Enlarged text, used at the start of articles.
Twig: components/intro/intro.twig
Example
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Markup
<div class="intro">
{{ content|default('Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.') }}
</div>
6.17.1 Offset intro View in a new window
An intro used on some landing pages, that is offset form the page container with a grey background.
Twig: components/intro/intro-offset.twig
Example
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Markup
<div class="intro intro--offset">
<p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
</div>
6.18 Dialog View in a new window
This is an example component to illustrate the required markup for a dialog.
Twig: components/dialog/dialog-example.twig
Example
Markup
<button class="button" id="example-dialog-toggle">Open dialog</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'example-dialog-toggle', label: 'Dialog'} %}
{% block content %}
<a href="#">A link</a>
{% endblock %}
{% endembed %}
6.19 Tab bar View in a new window
Large, row aligned tabs that become column on mobile.
Twig: components/tab-bar/tab-bar.twig
Example
Markup
<div class="tab-bar js-tab-bar">
<div class="tab-bar__tab-wrapper">
<ul class="tab-bar__list">
<li>
<a href="#tab1" class="tab-bar__tab">
<div class="tab-bar__tab-title"><span>First tab</span></div>
<div class="tab-bar__tab-description">A tab description</div>
</a>
</li>
<li>
<a href="#tab2" class="tab-bar__tab">
<div class="tab-bar__tab-title"><span>Second tab</span></div>
<div class="tab-bar__tab-description">A tab description</div>
</a>
</li>
<li>
<a href="#tab3" class="tab-bar__tab">
<div class="tab-bar__tab-title"><span>Third tab</span></div>
<div class="tab-bar__tab-description">A tab description</div>
</a>
</li>
</ul>
</div>
<section class="tab-bar__panel" id="tab1">
<h3>First tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tab-bar__panel" id="tab2">
<h3>Second tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tab-bar__panel" id="tab3">
<h3>Third tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</div>
6.20 Tooltip View in a new window
Tooltip pops up on hover or focus and displays help text to the user.
Twig: components/tooltip/tooltip.twig
Default example
If you hover over the blue word you'll find that I have a tooltip 2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course. to display containing help or aside information.
Tooltip left aligned above parent span.
If you hover over the blue word you'll find that I have a tooltip 2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course. to display containing help or aside information.
Tooltip right aligned above parent span.
If you hover over the blue word you'll find that I have a tooltip 2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course. to display containing help or aside information.
Tooltip aligned to the right of the parent span.
If you hover over the blue word you'll find that I have a tooltip 2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course. to display containing help or aside information.
Markup
<p>If you hover over the blue word you'll find that I have a <span class="tooltip__anchor {{ modifier_class }}" tabindex="0">tooltip <span class="tooltip">2017 ATAR cut-off for domestic applicants. The Australian Tertiary Admission Rank is the measure of a student’s overall academic achievement in the NSW Higher School Certificate (HSC) relative to other students. Different entry requirements apply to international applicants and mature aged and non-school leaver applicants. For further details, see the ‘How to apply’ tab for your course.</span></span> to display containing help or aside information.</p>
6.21 Landing page component tiles View in a new window
6.21.1 Section View in a new window
A tile with a background image, heading and link.
Twig: components/promo/promo-section.twig
Default example
Dark text
Light text
Markup
{% embed "@uts_theme/components/promo/promo-large.twig" with {title_tag: 'h3'} %}
{% block image %}
<img src="/themes/uts_theme/src/components/promo/images/section-bg-2.svg" alt="">
{% endblock %}
{% block title %}Who we are{% endblock %}
{% endembed %}
6.21.2 Promotion block View in a new window
An image with a caption and a link.
Twig: components/promo/promo-block.twig
Markup
<a href="#" class="promo__link">
<div class="promo promo--image">
<div class="promo__image">
<img src="/themes/uts_theme/src/components/promo/images/image-promo-example.png" alt="Placeholder alt">
</div>
<div class="promo__caption">
<h3 class="promo__caption-title">This is a title <span class="tag tag--bordered tag--white">{{ tag|default('Event') }}</span></h3>
<p>Technologists Scholarship for five FEIT students.</p>
</div>
</div>
</a>
6.21.3 Generic info block View in a new window
A WYSIWYG block, without text.
Twig: components/promo/promo-generic-info.twig
Default example
Contact the faculty
Tel +61 2 9514 2666
Fax +61 2 9514 2666
feit@uts.edu.au
City - Broadway > CB11 Faculty of Engineering and IT Building, Building 11
Light grey background
Contact the faculty
Tel +61 2 9514 2666
Fax +61 2 9514 2666
feit@uts.edu.au
City - Broadway > CB11 Faculty of Engineering and IT Building, Building 11
Dark grey background
Contact the faculty
Tel +61 2 9514 2666
Fax +61 2 9514 2666
feit@uts.edu.au
City - Broadway > CB11 Faculty of Engineering and IT Building, Building 11
White background
Contact the faculty
Tel +61 2 9514 2666
Fax +61 2 9514 2666
feit@uts.edu.au
City - Broadway > CB11 Faculty of Engineering and IT Building, Building 11
Markup
<div class="promo promo--info {{ modifier_class }}">
<h3 class="block-title"><span class="icon icon--inline icon--location-blue"></span> Contact the faculty</h3>
<p>
Tel +61 2 9514 2666<br>
Fax +61 2 9514 2666<br>
<a href="#">feit@uts.edu.au</a>
</p>
<p>City - Broadway > CB11 Faculty of Engineering and IT Building, Building 11</p>
<p><a href="#">View staff directory</a></p>
<p><a href="#" class="button">Make an enquiry</a></p>
</div>
6.21.4 Supplementary generic info block View in a new window
A WYSIWYG block, with centered text.
Twig: components/promo/promo-supplementary-generic-info.twig
Default example
Light grey background
Dark grey background
White background
Markup
<div class="promo promo--info-alt {{ modifier_class }}">
<h3>Looking to further your career in Engineering and Information Technology?</h3>
<p><a href="#">Apply <span class="icon icon--inline icon--arrow-blue-right"></span></a></p>
<p><a href="#">Find a supervisor <span class="icon icon--inline icon--arrow-blue-right"></span></a></p>
</div>
6.21.5 Split promotion View in a new window
A tile with an image (that is not full height), a title, text, icon and link.
Twig: components/promo/promo-split.twig
Default example
Dark text
Light text
Markup
<div class="promo promo--split {{ modifier_class }}">
<a href="#1" class="promo__link">
<div class="promo__image">
<img src="/themes/uts_theme/src/components/promo/images/promo-split-example.svg" alt="">
</div>
<h3 class="promo__title">Promotion</h3>
</a>
<div class="promo__split">
<a href="#2">
<p><span class="icon icon--inline icon--download-blue icon--size-24"></span> Download course guide</p>
</a>
</div>
</div>
6.21.6 Arrow promo View in a new window
A two tile width block displaying a teaser and an image.
Twig: components/promo/promo-arrow.twig
Default example
White text on blue background.
Dark text on white background.
Reversed text.
Reversed text, on blue background.
Reversed text, on white background.
Markup
<a href="#" class="promo__link">
<div class="promo promo--newsroom {{ modifier_class }}">
<div class="promo__info">
<h3>Get the full UTS Experience</h3>
<p>How does a 190-year-old research icon remain relevant? Just ask the Australian Museum lorem ipsum dolor.</p>
</div>
<div class="promo__media">
<img src="/themes/uts_theme/src/components/promo/images/image-promo-example.png" alt="">
</div>
</div>
</a>
6.22 Collapsible View in a new window
A collapsible content section.
6.22.1 Standard View in a new window
Collapsible with style and padding.
Twig: components/collapsible/collapsible.twig
Example
A collapsible section
| Autumn session | Credit PointsA credit point is the unit of measure of workload for individual subjects. | Subject Code |
|---|---|---|
| 21878 Organisational Dialogue: Theory and Practice | 6 | 21878 |
| 22747 Accounting for Managerial Decisions | 6 | 22747 |
| 23706 Economics for Management | 6 | 23706 |
| 21937 Managing, Leading and Stewardship | 6 | 21937 |
Section Title
Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Markup
<section class="js-collapsible collapsible {{ modifier_class }}"{% if id %} id="{{ id }}"{% endif %}>
<h4 class="collapsible__title">
{% block title %}
A collapsible section
{% endblock %}
</h4>
<div class="collapsible__content">
{% block content %}
<table data-striping="1">
<thead>
<tr>
<th>Autumn session</th>
<th><span class="tooltip__anchor" tabindex="0">Credit Points<span class="tooltip">A credit point is the unit of measure of workload for individual subjects.</span></span></th>
<th>Subject Code</th>
</tr>
</thead>
<tbody>
<tr>
<td class="unit--no-indent"><a href="http://handbook.uts.edu.au/subjects/21878.html">21878</a> Organisational Dialogue: Theory and Practice</td>
<td class="unit--no-indent">6</td>
<td>21878</td>
</tr>
<tr>
<td class="unit--no-indent"><a href="http://handbook.uts.edu.au/subjects/22747.html">22747</a> Accounting for Managerial Decisions</td>
<td class="unit--no-indent">6</td>
<td>22747</td>
</tr>
<tr>
<td class="unit--no-indent"><a href="http://handbook.uts.edu.au/subjects/23706.html">23706</a> Economics for Management</td>
<td class="unit--no-indent">6</td>
<td>23706</td>
</tr>
<tr>
<td class="unit--no-indent"><a href="http://handbook.uts.edu.au/subjects/21937.html">21937</a> Managing, Leading and Stewardship</td>
<td class="unit--no-indent">6</td>
<td>21937</td>
</tr>
</tbody>
</table>
<h3>Section Title</h3>
<p>Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac
cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus.</p>
<p>Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a
ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus
porttitor. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla
vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed
consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor
ligula, eget lacinia odio sem nec elit.</p>
{% endblock %}
</div>
</section>
6.22.2 Minimal View in a new window
Collapsible with less padding and chevron on the right used for inline collapsible sections.
.collapsible--minimal
Twig: components/collapsible/collapsible-minimal.twig
Example
View ATAR scores
99.5 (Advanced Materials and Data Science)
95.04 (Environmental Biotechnology)
96.05 (Infection and Immunity)
96.20 (Pre-Medicine)
Markup
{% embed '@uts_theme/components/collapsible/collapsible.twig' with { modifier_class: 'collapsible--minimal'} %}
{% block title %}
View ATAR scores
{% endblock %}
{% block content %}
<p>99.5 (Advanced Materials and Data Science)<br>
95.04 (Environmental Biotechnology)<br>
96.05 (Infection and Immunity)<br>
96.20 (Pre-Medicine)</p>
{% endblock %}
{% endembed %}
6.23 News View in a new window
6.23.1 Related View in a new window
A related news article.
Twig: components/news/news-related.twig
Example
Markup
<ul class="listing listing--stacked listing--stacked-small">
<li>
<article class="news--related">
<div class="news__image">
<img src="/themes/uts_theme/src/components/news/news-related-1.png" alt="">
</div>
<a href="#">Biophilic urbanism: how rooftop gardening soothes souls</a>
</article>
</li>
<li>
<article class="news--related">
<a href="#">Marking 50 years since vote to count Aborigines as Australians</a>
</article>
</li>
<li>
<article class="news--related">
<div class="news__image">
<img src="/themes/uts_theme/src/components/news/news-related-2.png" alt="">
</div>
<a href="#">New postgraduate program addresses the need for policy professionals with practical skills</a>
</article>
</li>
<li>
<article class="news--related">
<div class="news__image">
<img src="/themes/uts_theme/src/components/news/news-related-3.png" alt="">
</div>
<a href="#">Violence against nurses is on the rise, but protections remain weak</a>
</article>
</li>
</ul>
6.24 Staff View in a new window
Staff Image, Title and Role.
Twig: components/staff/staff.twig
Example
Dr Penelope Ajani
Markup
<div class="staff">
<div class="staff__thumbnail">
<img src="/themes/uts_theme/src/components/staff/staff-example.jpg" alt="Staff member">
</div>
<h2 class="staff__name">Dr Penelope Ajani</h2>
</div>
6.24.1 Staff Missing Image View in a new window
Staff Image, Title and Role, where the image is not found, background image is displayed.
Twig: components/staff/staff-not-found.twig
Example
Dr Penelope Ajani
Markup
<div class="staff">
<div class="staff__thumbnail">
<img src="" alt="Staff member image not found">
</div>
<h2 class="staff__name">Dr Penelope Ajani</h2>
</div>
6.25 Box View in a new window
Simple content block component.
6.25.1 Standard View in a new window
Simple content block component.
Twig: components/box/box.twig
Default example
Links
Bordered Box
Links
Coloured Box
Links
Coloured Box
Links
Markup
<div class="box {{ modifier_class }}">
<h3 class="box__title">Links</h3>
<p><a href="#">Link text goes here</a></p>
</div>
6.25.2 Related & Downloads View in a new window
Content block component used as an aside at the bottom of article pages.
Twig: components/box/box-related.twig
Example
Markup
<aside class="box box--related-content">
<section>
<h3 class="box__title--download">Downloads</h3>
<p>
<a href="#">Application Guidelines for Higher Degree by Research applications</a><br>
<span class="link__description">PDF, 266.36kB, 10 pages</span>
</p>
<p>
<a href="#">FAQ when you apply for a Higher Degree by Research at UTS</a><br>
<span class="link__description">PDF, 276.61kB, 3 pages</span>
</p>
<p>
<a href="#">HDR referee report</a><br>
<span class="link__description">PDF, 247.61kB, 2 pages</span>
</p>
</section>
<section>
<h3 class="box__title--related">Related Links</h3>
<p>
<a href="#">HECS-HELP Benefit - Study Assist</a>
</p>
<p>
<a href="#">Credit recognition</a>
</p>
<p>
<a href="#">Forms - UTS Student Admin</a>
</p>
</section>
</aside>
6.26 Read More View in a new window
Example
This is the first paragraph.
- This
- Is
- An
- Unordered
- List
This is the second paragraph.
This is the third paragraph.
Markup
<div class="js-read-more read-more">
{% block content %}
<p>This is the first paragraph.</p>
<ul>
<li>This</li>
<li>Is</li>
<li>An</li>
<li>Unordered</li>
<li>List</li>
</ul>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
{% endblock %}
</div>6.26.1 Standard View in a new window
A component that shows the first node in a HTML block with a class of .js-read-more and hides the rest.
Provides a link to show the additional content and hide it.
Default toggle (link) text is See all / See less but this can be passed through in options for the widget. You can also pass through a query selector for the additional content and toggle element
Twig: components/read-more/read-more.twig
Example
This is the first paragraph.
- This
- Is
- An
- Unordered
- List
This is the second paragraph.
This is the third paragraph.
Markup
<div class="js-read-more read-more">
{% block content %}
<p>This is the first paragraph.</p>
<ul>
<li>This</li>
<li>Is</li>
<li>An</li>
<li>Unordered</li>
<li>List</li>
</ul>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
{% endblock %}
</div>6.26.2 Alternate View in a new window
A different style of drop down, showing 3 items by default.
Twig: components/read-more/read-more-alt.twig
Example
Markup
<ul class="js-read-more-alt read-more read-more--alt">
{% block content %}
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Our research</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Handbook</a></li>
{% endblock %}
</ul>
6.27 Tab list View in a new window
Minimal, list of tabs that wrap on mobile.
Twig: components/tab-list/tab-list.twig
Example
First tab content
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Second tab content
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third tab content
Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Markup
<div class="tab-list js-tab-list">
<div class="tab-list__tab-wrapper">
<ul class="tab-list__list">
<li>
<a href="#tabList1" class="tab-list__tab">First tab</a>
</li>
<li>
<a href="#tabList2" class="tab-list__tab">Second tab</a>
</li>
<li>
<a href="#tabList3" class="tab-list__tab">Third tab</a>
</li>
</ul>
</div>
<section class="tab-list__panel" id="tabList1">
<h3>First tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tab-list__panel" id="tabList2">
<h3>Second tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tab-list__panel" id="tabList3">
<h3>Third tab content</h3>
<p>Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</div>
6.28 Select tabs View in a new window
Use a select element to show tab panels.
Twig: components/select-tab/select-tab.twig
Example
Tab 1
Tab 2
Tab 3
Markup
<div class="select-tab js-select-tab">
<div class="select-tab__form">
<label for="select-tab">Make a selection to show the results below:</label>
<select class="select-tab__menu" id="select-tab">
<option value="select-tab-1">Tab 1</option>
<option value="select-tab-2">Tab 2</option>
<option value="select-tab-3">Tab 3</option>
</select>
</div>
<section class="select-tab__panel" id="select-tab-1">
<p>Tab 1</p>
</section>
<section class="select-tab__panel" id="select-tab-2">
<p>Tab 2</p>
</section>
<section class="select-tab__panel" id="select-tab-3">
<p>Tab 3</p>
</section>
</div>
6.29 Media Gallery View in a new window
A component for displaying images as a carousel with lightbox.
Twig: components/media-gallery/media-gallery.twig
Example
Facilities and classrooms
Markup
<div class="media-gallery-wrapper">
<div class="media-gallery__header">
<h3 class="media-gallery__title">
Facilities and classrooms
</h3>
</div>
<div class="media-gallery">
<div class="media-gallery__slides js-media-gallery">
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 1 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 2 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 3 Lorem ipsum dolor sit amet.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 5 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg">
</figure>
<figure class="media-gallery__slide">
<figcaption class="media-gallery__slide-caption">
SLIDE 6 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</figcaption>
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg">
</figure>
</div>
</div>
</div>
6.30 Menu tile View in a new window
A menu that displays as a flex grid tile.
6.30.1 Automated visual index View in a new window
A style of menu that shows links on, used on the Automated visual index page.
Twig: components/content-menu/content-menu.twig
Default example
White background / Blue links
Markup
<nav class="content-menu {{modifier_class}}" role="navigation" aria-label="Content menu">
{% if title %}<h2 class="content-menu__title">{{ title }}</h2>{% endif %}
<ul>
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Our research</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Industry partnerships</a></li>
<li><a href="#">Staff listing</a></li>
<li><a href="#">Academic staff</a></li>
<li><a href="#">FEIT Professional staff</a></li>
<li><a href="#">Inspire</a></li>
</ul>
</nav>
6.30.2 Current students child sections View in a new window
A menu that shows child sections, and their children with collapsible links.
Twig: components/content-menu/content-menu-child-sections.twig
Example
Markup
<nav class="content-menu content-menu--child-sections content-menu--light" role="navigation" aria-label="Content menu">
<div class="content-menu__menu">
<h2 class="content-menu__title"><a href="#">Managing your course</a></h2>
<ul class="js-read-more-alt read-more read-more--alt">
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Our research</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Handbook</a></li>
</ul>
</div>
<div class="content-menu__menu">
<h2 class="content-menu__title"><a href="#">Support</a></h2>
<ul class="js-read-more-alt read-more read-more--alt">
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Our research</a></li>
<li><a href="#">Only 4</a></li>
</ul>
</div>
<div class="content-menu__menu">
<h2 class="content-menu__title"><a href="#">Opportunities</a></h2>
<ul class="js-read-more-alt read-more read-more--alt">
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Our research</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Fifth Element</a></li>
</ul>
</div>
<div class="content-menu__menu">
<h2 class="content-menu__title"><a href="#">Campus Life</a></h2>
<ul class="js-read-more-alt read-more read-more--alt">
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Our research</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Handbook</a></li>
</ul>
</div>
</nav>
6.30.3 Current students sidebar style View in a new window
A sidebar style content menu that uses a background image.
Twig: components/content-menu/content-menu-bg.twig
Example
Markup
<nav class="content-menu content-menu--full content-menu--light">
<div class="content-menu__image">
<svg width="441" height="640" viewBox="0 0 441 640" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg"><title>current-students-sidebar-background</title><g fill="none" fill-rule="evenodd"><path fill="#ECECEC" d="M1 0h440v640H1z"/><path fill="#000" d="M399.114 545.076H440v40.847h-40.886z"/><path fill="#0F4BEB" d="M399.114 505H440v40.847h-40.886z"/><path fill="#FFF" d="M358 505h40.886v40.847H358zM.114 40.076H41v40.847H.114zM361 134h40.886v40.847H361z"/><path fill="#000" d="M321 134h40.886v40.847H321z"/><path fill="#0F4BEB" d="M280 0h40.886v40.847H280z"/></g></svg> </div>
<div class="content-menu__menu">
<h3 class="content-menu__title">Faculty Specific Information</h3>
<ul>
<li><a href="#">Business</a></li>
<li><a href="#">Communication</a></li>
<li><a href="#">Design, Architecture and Building</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Engineering and IT</a></li>
<li><a href="#">Graduate School of Health</a></li>
<li><a href="#">Design, Architecture and Building</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Engineering and IT</a></li>
<li><a href="#">Graduate School of Health</a></li>
</ul>
</div>
</nav>
6.30.4 Future students two column, double width menu tile View in a new window
A menu that shows as two columns with a title.
Twig: components/content-menu/content-menu-course-areas.twig
Example
Markup
<nav class="content-menu content-menu--course-areas" role="navigation" aria-label="Content menu">
<h2 class="content-menu__title">Course areas</h2>
<ul>
<li><a href="#">Analytics and Data Science</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Communication</a></li>
<li><a href="#">Creative Intelligence and Innovation</a></li>
<li><a href="#">Design, Architecture and Building</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Engineering</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Health (GEM)</a></li>
<li><a href="#">Information Technology</a></li>
<li><a href="#">International Studies</a></li>
<li><a href="#">Law</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">Transdisciplinary Innovation</a></li>
</ul>
</nav>
6.31 Featured Slider View in a new window
A component for displaying images as a carousel with lightbox.
Twig: components/featured-slider/featured-slider.twig
Example
Markup
<div class="featured-slider">
<div class="featured-slider__slides js-featured-slider">
<div class="featured-slider__slide">
<div class="featured-slider__slide-video">
<img src="/themes/uts_theme/src/components/featured-slider/featured-slider-example.jpg">
<button id="featured-slider-video-0">Play video</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'featured-slider-video-0', label: 'Dialog', classes: 'js-dialog dialog--video'} %}
{% block content %}
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/en2xEswn45o" frameborder="0" allowfullscreen></iframe>
</div>
{% endblock %}
{% endembed %}
</div>
</div>
<div class="featured-slider__slide">
<div class="featured-slider__slide-image">
<img src="/themes/uts_theme/src/components/featured-slider/featured-slider-example-2.jpg">
</div>
<div class="featured-slider__overlay">
<div class="featured-slider__slide-caption-wrapper">
<div class="featured-slider__slide-caption">
<h3>Be inspired</h3>
<p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.</p>
<a href="#" class="button">Find out more</a>
</div>
</div>
</div>
</div>
<div class="featured-slider__slide">
<div class="featured-slider__slide-image">
<img src="/themes/uts_theme/src/components/featured-slider/featured-slider-example-3.jpg">
</div>
<div class="featured-slider__overlay">
<div class="featured-slider__slide-caption-wrapper">
<div class="featured-slider__slide-caption">
<h3>UTS ranked #1 young uni</h3>
<p>Come on campus to meet academics and have your questions answered. Morbi leo risus, porta ac consectetur ac.</p>
<a href="#" class="button">Find out more</a>
</div>
</div>
</div>
</div>
</div>
</div>
6.31.1 Featured Slider Multi View in a new window
Media Gallery options. Adding multiple images to be displayed at a time.
Twig: components/featured-slider/featured-slider-multi.twig
Example
Markup
<div class="featured-slider featured-slider--multi" data-show-single-caption="true" data-slides-to-show="1" data-center-padding="0%" data-center-mode="true" data-auto-play="false">
<div class="featured-slider__slides js-featured-slider">
<figure class="featured-slider__slide">
<figcaption class="featured-slider__slide-caption">
Fashion & Textiles - Menswear Studio
</figcaption>
<div class="featured-slider__slide-image">
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg" alt="Placeholder alt">
</div>
</figure>
<figure class="featured-slider__slide">
<div class="featured-slider__slide-video">
<figcaption class="featured-slider__slide-caption">
Pellentesque ornare sem lacinia quam venenatis vestibulum
</figcaption>
<img src="/themes/uts_theme/src/components/featured-slider/featured-slider-example.jpg">
<button id="featured-slider-video-0">Play video</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'featured-slider-video-0', label: 'Dialog', classes: 'js-dialog dialog--video'} %}
{% block content %}
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/en2xEswn45o" frameborder="0" allowfullscreen></iframe>
</div>
{% endblock %}
{% endembed %}
</div>
</figure>
<figure class="featured-slider__slide">
<figcaption class="featured-slider__slide-caption">
Pellentesque ornare sem lacinia quam venenatis vestibulum
</figcaption>
<div class="featured-slider__slide-image">
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg" alt="Placeholder alt">
</div>
</figure>
<figure class="featured-slider__slide">
<figcaption class="featured-slider__slide-caption">
Lorem ipsum dolor sit amet
</figcaption>
<div class="featured-slider__slide-image">
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg" alt="Placeholder alt">
</div>
</figure>
<figure class="featured-slider__slide">
<figcaption class="featured-slider__slide-caption">
Fashion & Design- Menswear Studio
</figcaption>
<div class="featured-slider__slide-image">
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg" alt="Placeholder alt">
</div>
</figure>
<figure class="featured-slider__slide">
<figcaption class="featured-slider__slide-caption">
Consectetur adipiscing elit
</figcaption>
<div class="featured-slider__slide-image">
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-2.jpg" alt="Placeholder alt">
</div>
</figure>
<figure class="featured-slider__slide">
<figcaption class="featured-slider__slide-caption">
Integer molestie lorem at massa.
</figcaption>
<div class="featured-slider__slide-image">
<img src="/themes/uts_theme/src/components/media-gallery/gallery-example-1.jpg" alt="Placeholder alt">
</div>
</figure>
</div>
</div>
6.32 Home page component tiles View in a new window
6.32.1 Large centered promo View in a new window
A block incorporating a background image with overlay WYSIWYG text. Light modifier allows for light text over a dark image.
Twig: components/promo/promo-large.twig
Default example
White text
Black text
Markup
{% block admin %}{% endblock %}
<a href="{{ href|default('#') }}" {{ attributes }} class="promo__link">
<div class="promo promo--section {{ modifier_class }} {{ background_class }}">
<div class="promo__image">
{% block image %}
<img src="/themes/uts_theme/src/components/promo/images/image-text-promo-dark.png" alt="#1 Young Uni">
{% endblock %}
</div>
<{{ title_tag|default('div') }} class="promo__title">{% block title %}Australia’s<br>
No. 1<br>
Young Uni{% endblock %}</{{ title_tag|default('div') }}>
</div>
</a>
6.32.2 Home promo (single) View in a new window
Home promo with smaller text.
Twig: components/promo/promo-home.twig
Default example
White text
Black text
Markup
{% block admin %}{% endblock %}
<a href="{{ href|default('#') }}" {{ attributes.addClass('koko') }} class="promo__link">
<div class="promo promo--home {{ modifier_class }}">
<div class="promo__image">
{% block image %}
<img src="/themes/uts_theme/src/components/promo/images/section-bg-3.svg" alt="">
{% endblock %}
</div>
<div class="promo__content">
<div class="promo__title">{% block title %}Future<br>students{% endblock %}</div>
{% block content %}<p>Find a course</p>{% endblock %}
</div>
</div>
</a>
6.32.3 Custom arrow promo View in a new window
A block displaying a custom sub title, a custom teaser and an image.
Twig: components/promo/promo-arrow-custom.twig
White text on blue background.
Dark text on white background.
Reversed text, on blue background.
Reversed text, on white background.
Markup
<a href="#" class="promo__link">
<div class="promo promo--newsroom {{ modifier_class }}">
<div class="promo__info">
<p>From the newsroom</p>
<h3>Get the full UTS Experience</h3>
<p>How does a 190-year-old research icon remain relevant? Just ask the Australian Museum lorem ipsum dolor.</p>
</div>
<div class="promo__media">
<img src="/themes/uts_theme/src/components/promo/images/image-promo-example.png" alt="">
</div>
</div>
</a>
6.32.4 Custom arrow promo with video View in a new window
A block displaying a custom promo as above, but with a video.
Twig: components/promo/promo-arrow-custom-video.twig
White text on blue background.
Dark text on white background.
Reversed text, on blue background.
Reversed text, on white background.
Markup
<div class="promo promo--newsroom promo--newsroom-video {{ modifier_class }}">
<div class="promo__video">
{% include '@uts_theme/base/media/video.twig' %}
</div>
<div class="promo__info">
<a href="#" class="promo__link">
<p>From the newsroom</p>
<h3>Get the full UTS Experience</h3>
<p>How does a 190-year-old research icon remain relevant? Just ask the Australian Museum lorem ipsum dolor.</p>
</a>
</div>
</div>
6.32.5 Home promo (double) View in a new window
A Double column sized block with a background image and overlay text.
Twig: components/promo/promo-double.twig
Default example
Postgrad Info Evenings
Register Now
Light Text
Postgrad Info Evenings
Register Now
Dark text
Postgrad Info Evenings
Register Now
Markup
<div class="promo promo--double {{ modifier_class }}">
<div class="promo__image">
{% include '@uts_theme/components/animations/blinkPaths.svg' %}
</div>
<div class="promo__content">
<h3>Postgrad Info Evenings</h3>
<h4>Register Now</h4>
</div>
</div>
6.33 Navigation Tiles View in a new window
A row of click-able tiled boxes. The row wraps when required to form multiple rows.
Twig: components/navigation-tiles/navigation-tiles.twig
Example
Markup
<div class="navigation-tiles">
<a href="#" class="navigation-tiles__tile">
<div class="navigation-tiles__inner">
<div class="navigation-tiles__icon navigation-tiles__icon--uts-online"></div>
<div class="navigation-tiles__text">UTS Online</div>
</div>
</a>
<a href="#" class="navigation-tiles__tile">
<div class="navigation-tiles__inner">
<div class="navigation-tiles__icon navigation-tiles__icon--web-mail"></div>
<div class="navigation-tiles__text">Web mail</div>
</div>
</a>
<a href="#" class="navigation-tiles__tile">
<div class="navigation-tiles__inner">
<div class="navigation-tiles__icon navigation-tiles__icon--library"></div>
<div class="navigation-tiles__text">Library</div>
</div>
</a>
<a href="#" class="navigation-tiles__tile">
<div class="navigation-tiles__inner">
<div class="navigation-tiles__icon navigation-tiles__icon--handbook"></div>
<div class="navigation-tiles__text">Handbook</div>
</div>
</a>
<a href="#" class="navigation-tiles__tile">
<div class="navigation-tiles__inner">
<div class="navigation-tiles__icon navigation-tiles__icon--student"></div>
<div class="navigation-tiles__text">My Student Admin</div>
</div>
</a>
</div>
6.34 Social Media Bar View in a new window
A full width blue bar with social media icons.
Twig: components/social-media-bar/social-media-bar.twig
Example
Markup
<nav class="social-media-bar" role="navigation" aria-label="UTS social media">
<h4 class="social-media-bar__title">Follow UTS Health</h4>
<ul class="social-media-bar__menu">
<li>
<a href="#">
<span class="icon icon--inline icon--facebook icon--size-24">Facebook</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon--inline icon--twitter icon--size-24">Twitter</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon--inline icon--instagram icon--size-24">Instagram</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon--inline icon--youtube icon--size-24">Youtube</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon--inline icon--linkedin icon--size-24">LinkedIn</span>
</a>
</li>
</ul>
</nav>
6.35 Icons View in a new window
A collection of icons used within the application. This is the start of a larger icon component which will incorporate many of the existing svgs
6.35.1 Default Icons View in a new window
Dark color icons to be displayed on a light background
Twig: components/icon/icon.twig
Default example
Arrow Top
Arrow Right
Arrow Down
Arrow Left
Briefcase
Calendar
Chevron Top
Chevron Right
Chevron Down
Chevron Left
Clock
Close
Cost
Course Code
Download
Duration
External Link
FAQ
Handbook
Home
Info
Intranet Profile
Library
Link
Location
Mail
Menu
Phone
Play with outlined triangle
Play Button
Profile
Qualification
RSVP
Settings
Upload
UTS Handbook
UTS Online
Wrench
OrchID
Comment
Heart
Facebook
Twitter
Linkedin
Markup
<span class="icon icon--inline icon--size-24 {{ modifier_class }}">{{ text }}</span>
6.35.2 Blue Icons View in a new window
Blue icons to be displayed on a light background
Twig: components/icon/icon.twig
Default example
Arrow Blue Top
Arrow Blue Right
Arrow Blue Down
Arrow Blue Left
Calendar Blue
Chevron Blue Top
Chevron Blue Right
Chevron Blue Down
Chevron Blue Left
Cost Blue
Course Code Blue
Info Blue
Link Blue
Library Blue
Location Blue
Mail Blue
Menu Blue
Play Button
RSVP Blue
Search
Download
Upload Blue
UTS Online Blue
Atar Blue
Checkmark
Arrow Circle Blue
Markup
<span class="icon icon--inline icon--size-24 {{ modifier_class }}">{{ text }}</span>
6.35.3 White Icons View in a new window
White icons To be displayed on a dark background
Twig: components/icon/icon.twig
Default example
Arrow White Top
Arrow White Right
Arrow White Down
Arrow White Left
Chevron Circle White Down
Chevron White Top
Chevron White Right
Chevron White Down
Chevron White Left
Close White
Download White
Library White
Link White
Mail White
Play Button
Profile White
Search White
Upload White
UTS Handbook White
UTS Online White
Facebook.
Twitter.
Instagram.
Youtube.
Linkedin.
Markup
<span class="icon icon--inline icon--size-24 {{ modifier_class }}">{{ text }}</span>
6.35.4 Grey Icons View in a new window
Grey versions of the icons
Twig: components/icon/icon.twig
Default example
Chevron Grey Left
Chevron Grey Right
Chevron Grey Up
Chevron Grey Down
Markup
<span class="icon icon--inline icon--size-24 {{ modifier_class }}">{{ text }}</span>
6.35.5 Icon sizes View in a new window
Icons can be used in 3 different sizes.
Twig: components/icon/icon-sizes.twig
Default example
16px
20px, standard size for inline icons.
24px
Markup
<span class="icon icon--inline {{ modifier_class }} icon--home">{{ text }}</span>
<span class="icon icon--inline {{ modifier_class }} icon--location-blue">{{ text }}</span>
<span class="icon icon--inline {{ modifier_class }} icon--search">{{ text }}</span>
6.35.5 Text icon element View in a new window
"p" tag with icon and padding
6.36 Future students component tiles View in a new window
6.36.1 Button promo View in a new window
A promo with a button and a background image.
Twig: components/promo/promo-button.twig
Example
Markup
<div class="promo promo--button">
<div class="promo__image">
<img src="/themes/uts_theme/src/templates/banner-ask-uts.svg" alt="">
</div>
<div class="promo__content">
<h3>AskUTS</h3>
<p>Make an enquiry online with the UTS Student Centre</p>
<a href="#">Enquire</a>
</div>
</div>
6.37 Testimonials View in a new window
6.37.1 Testimonial View in a new window
Image, name, course, and blurb.
Twig: components/testimonial/testimonial.twig
Example
Katie Hindmarsh
BACHELOR OF MIDWIFERY
“I don’t cry nearly as much as when I first started out! I appreciate the course for opening my eyes to women’s health issues around the world.”
Markup
<article class="testimonial">
<div class="testimonial__thumbnail">
<img src="/themes/uts_theme/src/components/testimonial/{{ image|default('katie-hindmarsh.jpg') }}" alt="Student">
</div>
<h3 class="testimonial__name"><a href="#">{{ name|default('Katie Hindmarsh') }}</a></h3>
<div class="testimonial__course-name">{{ course|default('BACHELOR OF MIDWIFERY') }}</div>
<p class="testimonial__blurb">“{{ blurb|default('I don’t cry nearly as much as when I first started out! I appreciate the course for opening my eyes to women’s health issues around the world.') }}”</p>
</article>
6.37.2 Testimonial Double View in a new window
Image, name, course, position on the left and blurb on the right.
Twig: components/testimonial/testimonial-double-tile.twig
Example
Katie Hindmarsh
Bachelor of Midwifery
Clinical Midwife, Sutheland hospital
I appreciate the course for opening my eyes to women’s health issues around the world.
Markup
<article class="testimonial--double">
<div class="testimonial__student">
<div class="testimonial__thumbnail">
{% block image %}
<img src="/themes/uts_theme/src/components/testimonial/katie-hindmarsh.jpg" alt="Student">
{% endblock %}
</div>
{% block student %}
<h1 class="testimonial__name">Katie Hindmarsh</h1>
<div class="testimonial__course-name">Bachelor of Midwifery</div>
<p class="testimonial__position">Clinical Midwife, Sutheland hospital</p>
{% endblock %}
</div>
<div class="testimonial__blurb">
{% block blurb %}
<blockquote>I appreciate the course for opening my eyes to women’s health issues around the world.</blockquote>
{% endblock %}
</div>
</article>
6.37.3 Testimonial Question View in a new window
Interview style text, bold question and normal text.
Twig: components/testimonial/testimonial-questions.twig
Example
What made you want to study this degree?
Having my own children; appreciating the people that helped me through my pregnancies and births; my interest and fascination in the human body, and the miracle of life; and, having been out of the workforce for the best part of 8 years to raise my kids, I wanted to give back and do something new that was more meaningful for me.
Markup
<div class="testimonial__questions">
{% block content %}
<h3>What made you want to study this degree?</h3>
<p>Having my own children; appreciating the people that helped me through my pregnancies and births; my interest and fascination in the human body, and the miracle of life; and, having been out of the workforce for the best part of 8 years to raise my kids, I wanted to give back and do something new that was more meaningful for me.</p>
{% endblock %}
</div>
6.38 Transcript View in a new window
Transcript trigger and inner.
Twig: components/transcript/transcript.twig
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nisi tortor, lacinia vel interdum id, porttitor nec est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur dolor metus, eleifend quis mattis quis, vulputate vel orci. Pellentesque egestas porta felis, ut mattis lectus maximus nec. Cras porta felis turpis, non accumsan libero tempor eu. Nullam elit urna, rhoncus a sapien non, fringilla rutrum odio. Proin magna urna, viverra sit amet sem nec, ullamcorper auctor arcu. Nullam eu laoreet nisi, quis dignissim lacus. Sed aliquet tortor feugiat, rutrum nibh eget, lobortis mi. Curabitur venenatis, nulla tempus condimentum tempor, felis magna placerat massa, eget sagittis sem arcu nec lorem. Ut viverra vel leo quis scelerisque. Vivamus quis magna ut dui vestibulum ultricies. Duis sagittis libero metus, quis viverra odio lobortis feugiat.
Markup
<div>
<!-- Video or similar goes here -->
<img src="http://lorempixel.com/880/440/animals/" alt="video" />
</div>
<a id="example-dialog-toggle" class="transcript__trigger">Transcript</a>
{% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'example-dialog-toggle', label: 'Transcript'} %}
{% block content %}
<div class="transcript__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nisi tortor, lacinia vel interdum id, porttitor nec est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur dolor metus, eleifend quis mattis quis, vulputate vel orci. Pellentesque egestas porta felis, ut mattis lectus maximus nec. Cras porta felis turpis, non accumsan libero tempor eu. Nullam elit urna, rhoncus a sapien non, fringilla rutrum odio. Proin magna urna, viverra sit amet sem nec, ullamcorper auctor arcu. Nullam eu laoreet nisi, quis dignissim lacus. Sed aliquet tortor feugiat, rutrum nibh eget, lobortis mi. Curabitur venenatis, nulla tempus condimentum tempor, felis magna placerat massa, eget sagittis sem arcu nec lorem. Ut viverra vel leo quis scelerisque. Vivamus quis magna ut dui vestibulum ultricies. Duis sagittis libero metus, quis viverra odio lobortis feugiat.
</div>
{% endblock %}
{% endembed %}
6.38 Video Gallery View in a new window
Video gallery components.
6.38.1 Video Gallery Stage View in a new window
Video gallery stage for active video.
Twig: components/video-gallery/video-gallery-stage.twig
Example
Creating artificial bones
Markup
<div class="video-gallery__stage">
<div class="video-embed-field-lazy">
<img src="/themes/uts_theme/src/templates/event-example.jpg" alt="">
<div class="video-embed-field-lazy-play"></div>
</div>
<h3 class="video-gallery__item-title">Creating artificial bones</h3>
</div>
6.38.2 Video Gallery Item View in a new window
Video gallery item in the gallery list.
Twig: components/video-gallery/video-gallery-item.twig
Example
Caption for video goes here
Markup
<div class="video-gallery__item">
<div class="video-embed-field-lazy">
<img src="/themes/uts_theme/src/templates/event-example.jpg" alt="">
<div class="video-embed-field-lazy-play"></div>
</div>
<h3 class="video-gallery__item-title">Caption for video goes here</h3>
</div>
6.39 SVG Animated with SMIL View in a new window
An example animation for use as banner using SMIL, not compatible with most versions of IE.
Twig: components/animations/smilSVG.twig
Example
Markup
{% include '@uts_theme/components/animations/smilSVG.svg' %}
6.40 SVG Animated with requestAnimationFrame javascript View in a new window
An example animation for use as banner that uses the javascript widget based on requestAnimationFrame.
Twig: components/animations/animatedSVG.twig
Example
Markup
{% include '@uts_theme/components/animations/animatedSVG.svg' %}
6.41 SVG Animated with setTimeout javascript View in a new window
An example animation for use as a double banner. Uses the modulus to kinf of randomise which squares blink and when.
Twig: components/animations/blinkPaths.twig
Example
BLINKY SQUARES
Markup
<div class="promo promo--double">
{% include '@uts_theme/components/animations/blinkPaths.svg' %}
<h1>BLINKY SQUARES</h1>
</div>6.42 Status View in a new window
Display a status indicator with a color.
Twig: components/status/status.twig
Default example
Coming Soon.
Black Status
Coming Soon.
Orange Status
Coming Soon.
Green Status
Coming Soon.
Markup
<div class="status status--circle {{ modifier_class }} tooltip__anchor">
<span class="tooltip">Coming Soon.</span>
</div>6.43 Scholarships View in a new window
Example
Value
$15,000
1 Scholarship(s) available for up to 2 years
Status
Coming Soon
Coming Soon.
Opens
20/03/2017
Closes
20/07/2017
Quick Links
Markup
<div class="scholarships__detail-header">
<div class="scholarships__detail-header-item">
<h6>Value</h6>
<p>$15,000<br>
1 Scholarship(s) available for up to 2 years</p>
</div>
<div class="scholarships__detail-header-item">
<div class="scholarships__detail-status">
<div class="scholarships__detail-status-left">
<h6>Status</h6>
<p>Coming Soon</p>
</div>
<div class="status status--circle status--orange tooltip__anchor scholarships__detail-status-right">
<span class="tooltip">Coming Soon.</span>
</div>
</div>
</div>
<div class="scholarships__detail-header-item">
<h6>Opens</h6>
<p>20/03/2017</p>
<h6>Closes</h6>
<p>20/07/2017</p>
</div>
<div class="scholarships__detail-header-item">
<h6>Quick Links</h6>
<ul>
<li><a href="$">Conditions of award</a></li>
<li><a href="#">Application Form</a></li>
</ul>
</div>
</div>6.44 6.44 View in a new window
6.44.1 Inline List View in a new window
An inline list.
Twig: components/inline-list/inline-list.twig
Example
Foo,
bar
Markup
<div class="inline-list">
<div class="inline-list__item">Foo,</div>
<div class="inline-list__item">bar</div>
</div>
6.45 Instafeed - Instagram Feed Styles View in a new window
Styles for the instagram feed, display 3 recent images with caption, comments, and likes.
Twig: components/instafeed/instafeed.twig
Example
Markup
<div class="instafeed" id="drupal-instagram-widget" data-instagram-user-id="1980586408" data-instagram-access-token="1980586408.9719f04.8816ee552c90402d9744790069c45c63"></div>
6.46 Tag View in a new window
Display text in a presentational box.
Twig: components/tag/tag.twig
Default example
Taxonomy
White bordered tag
Taxonomy
Blue bordered tag
Taxonomy
Red bordered tag
Taxonomy
Grey bordered tag
Taxonomy
Green bordered tag
Taxonomy
Orange bordered tag
Taxonomy
White solid tag
Taxonomy
Blue solid tag
Taxonomy
Red solid tag
Taxonomy
Grey solid tag
Taxonomy
Green solid tag
Taxonomy
Orange solid tag
Taxonomy
Markup
<span class="tag {{ modifier_class }}">{{ tag|default('Taxonomy') }}</span>
6.47 Masonry Grid View in a new window
Columns of items that create a brickwork looking grid.
Twig: components/masonry-grid/masonry-grid.twig
Example
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Title
Paragraph content follows the title
Markup
<div class="masonry-grid">
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/400x200', url: './item-8-32.html?hideAll' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/600x800' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/400x600' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/480x320' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/500x500' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/400x500' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/1400x700' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/700x700' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/700x900' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/350x150' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/700x700' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/700x700' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/480x320' } %}
{% include '@uts_theme/components/masonry-grid/masonry-grid-item.twig' with { src: '//via.placeholder.com/500x500' } %}
</div>
6.48 Select List View in a new window
Example
Markup
<div class="js-select-list select-list facets-widget-gallery_listing select-list--open">
<fieldset>
<legend>
<button class="select-list__current">All schools</button>
</legend>
<ul data-drupal-facet-id="school" data-drupal-facet-alias="school" class="select-list__list js-uts-gallery-listing-links item-list__gallery_listing" role="listbox">
<li class="facet-item select-list__item select-list__item--active" role="option">
<a href="/test-student-gallery-listing?f%5B0%5D=programme%3A452&f%5B1%5D=school%3A282" rel="nofollow" data-drupal-facet-item-id="school-282" data-drupal-facet-item-value="282">
<span class="facet-item__value">Active item</span>
</a>
</li>
<li class="facet-item select-list__item select-list__item--disabled" role="option">
<a href="/test-student-gallery-listing?f%5B0%5D=programme%3A452&f%5B1%5D=school%3A282" rel="nofollow" data-drupal-facet-item-id="school-282" data-drupal-facet-item-value="282">
<span class="facet-item__value">Disabled item</span>
</a>
</li>
<li class="facet-item select-list__item" role="option">
<a href="/test-student-gallery-listing?f%5B0%5D=programme%3A452&f%5B1%5D=school%3A283" rel="nofollow" data-drupal-facet-item-id="school-283" data-drupal-facet-item-value="283">
<span class="facet-item__value">Normal item</span>
</a>
</li>
</ul>
</fieldset>
</div>