8.4 Course area - Flex template View in a new window

Example

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

  • Promotion

    Download course guide

  • Why IT at UTS

  • I want to study

  • What our students say.

  • What do I need to know

  • What's it really like?

  • Moore Park precinct set for a world-class development.

  • Facilities and classrooms

    SLIDE 1 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa.
    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.
    SLIDE 3 Lorem ipsum dolor sit amet.
    SLIDE 5 Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer molestie lorem at massa.
    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.
Markup 
{% include '@uts_theme/containers/header/header.twig' %}

{% include 'breadcrumb-inc.twig' %}

{% embed '@uts_theme/containers/sidebars/sidebar-b.twig' %}
  {% block sidebar %}
    <div class="sidebar">
      {% include '@uts_theme/components/page-title/page-title.twig' with { title: 'Information Technology' } only %}
      <div class="sidebar__landing">
        <nav class="sidebar-menu" role="navigation" aria-label="Sidebar menu">
          <ul class="sidebar-menu__level-1">
            <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>
        </nav>
      </div>
    </div>
  {% endblock %}
  {% block main %}
    <div class="intro">
      <p>Delivering rigorous, practical and industry-focused education and research that encourages disruptive technologies and cultivates exceptional engineering and information technology professionals.</p>
    </div>
  {% endblock %}
  {% block banner %}
    {% include '@uts_theme/components/banner/banner-course-area-hd.twig' %}
  {% endblock %}
{% endembed %}

{% embed '@uts_theme/containers/one-col/one-col.twig' %}
  {% block content %}
    <ul class="flex-tile flex-tile--3x">
      <li class="flex-tile__item">
        {% include '@uts_theme/components/event/event-teaser.twig' %}
      </li>
      <li class="flex-tile__item">
        {% include '@uts_theme/components/news/news-teaser.twig' %}
      </li>
      <li class="flex-tile__item">
        {% include '@uts_theme/components/promo/promo-split.twig' %}
      </li>
      <li class="flex-tile__item">
        <a href="#" class="promo__link">
          <div class="promo promo--section promo--dark">
            <div class="promo__image">
              <img src="/themes/uts_theme/src/components/promo/images/section-bg-1.svg" alt="">
            </div>
            <h3 class="promo__title">Why IT at UTS</h3>
          </div>
        </a>
      </li>
      <li class="flex-tile__item">
        <a href="#" class="promo__link">
          <div class="promo promo--section">
            <div class="promo__image">
              <img src="/themes/uts_theme/src/components/promo/images/section-bg-2.svg" alt="">
            </div>
            <h3 class="promo__title">I want to study</h3>
          </div>
        </a>
      </li>
      <li class="flex-tile__item">
        <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-2.png" alt="">
            </div>
            <div class="promo__caption">
              <p>What our students say.</p>
            </div>
          </div>
        </a>
      </li>
      <li class="flex-tile__item">
        <a href="#" class="promo__link">
          <div class="promo promo--section">
            <div class="promo__image">
              <img src="/themes/uts_theme/src/components/promo/images/section-bg-3.svg" alt="">
            </div>
            <h3 class="promo__title">What do I need to know</h3>
          </div>
        </a>
      </li>
      <li class="flex-tile__item">
        <a href="#" class="promo__link">
          <div class="promo promo--section promo--dark">
            <div class="promo__image">
              <img src="/themes/uts_theme/src/components/promo/images/section-bg-4.svg" alt="">
            </div>
            <h3 class="promo__title">What's it really like?</h3>
          </div>
        </a>
      </li>
      <li class="flex-tile__item">
        <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-3.png" alt="">
            </div>
            <div class="promo__caption">
              <p>Moore Park precinct set for a world-class development.</p>
            </div>
          </div>
        </a>
      </li>
      <li class="flex-tile__item flex-tile--span-3x flex-tile--content-height">
        {% include '@uts_theme/components/media-gallery/media-gallery.twig' %}
      </li>
    </ul>
  {% endblock %}
{% endembed %}

{% include '@uts_theme/components/social-media-bar/social-media-bar.twig' %}
{% include '@uts_theme/containers/footer/footer.twig' %}