<ul class="event-listing">
  <li>
    <h2>
      Friday <strong class="date">12</strong><strong class="month">September</strong>2014 
    </h2>
    <ul>
      <li>
        <a href=""><strong class="time">2:00pm – 5:00pm</strong>
          <h3>
            Lorem ipsum dolor
          </h3>
          <p>
            Nam vestibulum porttitor ipsum tincidunt semper. Suspendisse id euismod orci, quis egestas nulla. Donec sit amet auctor justo. Nam a turpis ac diam fringilla ullamcorper ac quis quam.
          </p>
        </a>
        <div class="tags">
          <span class="tag"><span data-icon="tag">Etiam quis</span></span><span class="tag"><span data-icon="tag">aliquam sem</span></span><span class="tag"><span data-icon="tag">Aenean sed feugiat nulla</span></span>
        </div>
      </li>
      <li>
        <a href=""><strong class="time">12 September - 23 September</strong>
          <h3>
            Duis ultricies eget diam laoreet molestie
          </h3>
          <p>
            Nulla interdum magna a euismod laoreet. Pellentesque convallis posuere placerat.  Tempor dictum nisi vitae bibendum. Praesent nec quam tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          </p>
        </a>
        <div class="tags">
          <span class="tag"><span data-icon="tag">Etiam quis</span></span><span class="tag"><span data-icon="tag">Nulla</span></span>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <h2>
      Saturday <strong class="date">13</strong><strong class="month">Sep</strong>2014 
    </h2>
    <ul>
      <li>
        <a href="">
          <h3>
            Mei liber scaevola
          </h3>
          <p>
            Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an. Nam tristique, elit quis vehicula ullamcorper, tellus lacus rutrum lacus.
          </p>
        </a>
      </li>
    </ul>
  </li>
</ul>
      

<ul class="event-listing">
  <li>
    <h2>
      Friday <strong class="date">12</strong><strong class="month">Sep</strong>2014 
    </h2>
    <ul>
      <li>
        <a class="col" href=""><strong class="time">2:00pm – 5:00pm</strong>
          <h3>
            Lorem ipsum dolor
          </h3>
          <p>
            Nam vestibulum porttitor ipsum tincidunt semper. Suspendisse id euismod orci, quis egestas nulla. Donec sit amet auctor justo. Nam a turpis ac diam fringilla ullamcorper ac quis quam.
          </p>
        </a>
        <div class="presenters">
          <strong>Presenters</strong><a href="">Ms Louise Adler</a><a href="">Ms Hanifa Deen</a><a href="">Mr Mathew Kenneally</a><a href="">Beth Wilson</a><a href="">Loruem Exum Ipsum</a><a href="">Professor Doulum</a><a href="">Endus Hoopes</a><a href="">Exum Padamadahm III</a>
        </div>
      </li>
      <li>
        <a class="col" href=""><strong class="time">12 September - 23 September</strong>
          <h3>
            Duis ultricies eget diam laoreet molestie
          </h3>
          <p>
            There is no doubt that technology is a powerful agent of transformation, and will be an essential component of any attempt at reforming the way healthcare is delivered. Making care safer, more efficient, and economically sustainable is unlikely to...
          </p>
          <div class="tags">
            <span class="tag"><span data-icon="tag">Medical Informatics</span></span><span class="tag"><span data-icon="tag">Medical</span></span><span class="tag"><span data-icon="tag">Technology</span></span>
          </div>
        </a>
        <div class="presenters">
          <strong>Presenters</strong><a href="">Loruem Exum Ipsum</a><a href="">Professor Doulum</a><a href="">Endus Hoopes</a><a href="">Exum Padamadahm III</a>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <h2>
      Saturday <strong class="date">13</strong><strong class="month">September</strong>2014 
    </h2>
    <ul>
      <li>
        <a class="col" href=""><strong class="time">9:30pm – 10:30am</strong>
          <h3>
            Mei liber scaevola
          </h3>
          <p>
            Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an. Nam tristique, elit quis vehicula ullamcorper, tellus lacus rutrum lacus.
          </p>
          <div class="tags">
            <span class="tag"><span data-icon="tag">Etiam quis</span></span><span class="tag"><span data-icon="tag">aliquam sem</span></span><span class="tag"><span data-icon="tag">Aenean sed feugiat nulla</span></span>
          </div>
        </a>
        <div class="presenters">
          <strong>Presenters</strong><a href="">Ms Louise Adler</a><a href="">Ms Hanifa Deen</a>
        </div>
      </li>
      <li>
        <a class="col" href=""><strong class="time">12 noon – 1:30pm</strong>
          <h3>
            sociis natoque penatibus et magnis ridiculus mus
          </h3>
          <p>
            Cum dis parturient montes, nascetur. Aliquam pretium ante vitae pulvinar efficitur. In interdum finibus metus, et elementum quam fringilla at. Duis at diam nisi. Mauris consequat tincidunt dolor, vel tempor diam cursus nec. Curabitur vulputate porttitor scelerisque. Vestibulum vulputate porttitor maximus. Aenean facilisis, augue ut finibus placerat, sem nisi convallis mauris, eget molestie turpis eros eu libero. Donec sit amet luctus enim, sit amet ornare sem.
          </p>
          <div class="tags">
            <span class="tag"><span data-icon="tag">Etiam quis</span></span><span class="tag"><span data-icon="tag">Nulla</span></span>
          </div>
        </a>
        <div class="presenters">
          <strong>Presenters</strong><a href="">Ms Louise Adler</a><a href="">Ms Hanifa Deen</a><a href="">Mr Mathew Kenneally</a><a href="">Beth Wilson</a>
        </div>
      </li>
    </ul>
  </li>
</ul>
      

<ul class="event-listing">
  <li>
    <h2>
      Friday <strong class="date">12</strong><strong class="month">September</strong>2014 
    </h2>
    <ul>
      <li>
        <a class="ribbon-wrapper" href=""><strong class="time">2:00pm – 5:00pm</strong>
          <h3>
            Lorem ipsum dolor
          </h3>
          <span class="ribbon ribbon--event-listing ribbon--warning">Waiting list</span>
          <p>
            Nam vestibulum porttitor ipsum tincidunt semper. Suspendisse id euismod orci, quis egestas nulla. Donec sit amet auctor justo. Nam a turpis ac diam fringilla ullamcorper ac quis quam.
          </p>
        </a>
        <div class="tags">
          <span class="tag"><span data-icon="tag">Etiam quis</span></span><span class="tag"><span data-icon="tag">aliquam sem</span></span><span class="tag"><span data-icon="tag">Aenean sed feugiat nulla</span></span>
        </div>
      </li>
    </ul>
  </li>
</ul>
<ul class="event-listing">
  <li>
    <h2>
      Friday <strong class="date">12</strong><strong class="month">Sep</strong>2014 
    </h2>
    <ul>
      <li>
        <a class="col ribbon-wrapper" href=""><strong class="time">12 September - 23 September</strong>
          <h3>
            Duis ultricies eget diam laoreet molestie
          </h3>
          <span class="ribbon ribbon--event-listing ribbon--danger">Booked out</span>
          <p>
            There is no doubt that technology is a powerful agent of transformation, and will be an essential component of any attempt at reforming the way healthcare is delivered. Making care safer, more efficient, and economically sustainable is unlikely to...
          </p>
          <div class="tags">
            <span class="tag"><span data-icon="tag">Medical Informatics</span></span><span class="tag"><span data-icon="tag">Medical</span></span><span class="tag"><span data-icon="tag">Technology</span></span>
          </div>
        </a>
        <div class="presenters">
          <strong>Presenters</strong><a href="">Loruem Exum Ipsum</a><a href="">Professor Doulum</a><a href="">Endus Hoopes</a><a href="">Exum Padamadahm III</a>
        </div>
      </li>
    </ul>
  </li>
</ul>
      

<div class="detail">
  <div class="upper">
    <h1>
      My Event's Title
    </h1>
    <div class="aside">
      <div class="when range">
        <time datetime="2014-09-01">Monday<strong>01 Sep</strong>2014</time><time datetime="2014-09-12">Friday<strong>12 Sep</strong>2014</time>
      </div>
    </div>
    <img alt="Photo of my event" src="http://placeimg.com/1050/500" />
  </div>
  <div class="lower">
    <div class="aside">
      <div>
        <p>
          780 Elizabeth Street<br />Melbourne VIC 3000
        </p>
        <a class="button-small" href="">Map<span class="small" data-icon="location"></span></a>
      </div>
      <div>
        <a class="button-small" href="">Share<span class="small" data-icon="share"></span></a>
      </div>
      <div>
        <p>
          T: +61 3 9035 9400
        </p>
        <p>
          <a href="mailto:mcd-web@unimelb.edu.au">mcd-web@unimelb.edu.au</a>
        </p>
        <p>
          Wheelchair accessible
        </p>
      </div>
    </div>
    <p>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
    </p>
    <p>
      Nam vestibulum porttitor ipsum tincidunt semper. Suspendisse id euismod orci, quis egestas nulla. Donec sit amet auctor justo. Nam a turpis ac diam fringilla ullamcorper ac quis quam. Duis ultricies eget diam laoreet molestie. Donec accumsan est nibh, eu pretium ante volutpat vitae. Nam vitae arcu eget tellus sollicitudin vehicula. Ut lectus elit, semper ac feugiat sed, sagittis eget magna. In condimentum purus et libero fringilla, nec tincidunt libero suscipit. Nam fermentum velit et orci gravida, a hendrerit elit fermentum.
    </p>
    <p>
      Nulla interdum magna a euismod laoreet. Pellentesque convallis posuere placerat. Nam tristique, elit quis vehicula ullamcorper, tellus lacus rutrum lacus, vel pretium lectus elit non urna. Nulla consectetur facilisis enim, in ultricies dui facilisis vel. Etiam vestibulum nec mi nec tempus. Ut luctus ex vitae imperdiet lobortis. Vestibulum placerat mi turpis, quis laoreet urna varius id. Curabitur id sagittis justo.
    </p>
  </div>
</div>
      

<div class="detail">
  <div class="upper ribbon-wrapper">
    <h1>
      Create the main events listing page
    </h1>
    <span class="ribbon ribbon--event-page ribbon--danger">Booked out</span>
    <div class="aside">
      <div class="when">
        <time datetime="2014-09-01">Monday<strong class="date">12</strong><strong class="month">Sep</strong>2014</time>
      </div>
    </div>
    <img alt="Photo of my event" src="http://placeimg.com/1050/500" />
  </div>
  <div class="lower">
    <div class="aside">
      <div>
        <p>
          780 Elizabeth Street <br />Melbourne VIC 3000 <a class="button-small" href="http://maps.unimelb.edu.au/parkville/building/220" target="_blank">Map <span class="small" data-icon="location"></span></a>
        </p>
      </div>
      <div>
        <p>
          <em>More Information</em>
        </p>
        <p>
          Donna Kevey
        </p>
        <p>
          <a href="mailto:dkevey@unimelb.edu.au">dkevey@unimelb.edu.au</a>
        </p>
        <p>
          <a href="tel:+61383441693">T: +61 3 8344 1693</a>
        </p>
      </div>
    </div>
    <h1>
      About this template and how to use it
    </h1>
    <p>
      This template <strong>Event block listing (local assets)</strong> is available if you wish to create local calendar events for your site. 
    </p>
    <p>
      If you wish to promote your event to a wider audience you should post on <a href="events.unimelb.edu.au">events.unimelb.edu.au</a> and use the feed as described on the events.unimelb examples.
    </p>
    <p>
      This event listing is using an <a href="http://manuals.matrix.squizsuite.net/calendar/chapters/upcoming-events-list">upcoming events list </a> and is set to show: 
    </p>
    <ul>
      <li>
        360 events in the future
      </li>
      <li>
        Maximum of 20 events
      </li>
    </ul>
    <ol>
      <li>
        Add a new standard page to your site
      </li>
      <li>
        From the metadata screen select the page template: Event block listing (local assets). 
      </li>
      <li>
        Fields that can be used are:  
        <ul>
          <li>
            Header text
          </li>
          <li>
            Header subline
          </li>
          <li>
            Banner image
          </li>
          <li>
            Introductory text
          </li>
        </ul>
      </li>
      <li>
        Create single calendar events under this asset and they will automatically be listed on this page.
      </li>
    </ol>
    <h3>
      Adding calendar events
    </h3>
    <p>
      When adding local calendar events they should be: 
    </p>
    <ul class="ticked-list">
      <li>
        Single Calendar Events (recurring calendar events needs some further work)
      </li>
      <li>
        Type 2 (don't show in menu)
      </li>
      <li>
        Asset status needs to be <strong>Live </strong>to be included on the event listing page
      </li>
      <li>
        Only future upcoming events show
      </li>
    </ul>
    <p>
      Optional settings:
    </p>
    <ul>
      <li>
        Thumbnail image (set on details screen)
      </li>
      <li>
        Contact details (set on metadata screen)
      </li>
      <li>
        Location details  (set on metadata screen)
      </li>
    </ul>
    <p>
      <img alt="" src="http://cms.unimelb.edu.au/__data/assets/image/0010/1544977/research-three.jpg" width="450px" />
    </p>
    <div class="center">
      <p>
        <a class="button-small" href="http://cms.unimelb.edu.au/controlled-environment/melbourne-cshe/study/award-courses/graduate-certificate-in-university-teaching/Grad-Cert-University-Teaching.pdf" target="_blank">Course brochure</a>
      </p>
    </div>
    <div>
      <iframe frameborder="0" height="450" src="//maps.unimelb.edu.au/parkville/building/220?SQ_DESIGN_NAME=embed" width="100%"></iframe>
    </div>
  </div>
</div>
      

<div class="detail">
  <div class="upper">
    <h1>
      My Event's Title
    </h1>
    <div class="aside">
      <div class="when">
        <time datetime="2014-09-01">Monday<strong class="date">12</strong><strong class="month">Sep</strong>2014</time><time datetime="13:00">1:00 - 5:00pm</time>
      </div>
    </div>
    <img alt="Photo of my event" src="http://placeimg.com/1050/500" />
  </div>
  <div class="lower">
    <div class="aside">
      <div>
        <p>
          780 Elizabeth Street<br />Melbourne VIC 3000
        </p>
        <a class="button-small" href="">Map<span class="small" data-icon="location"></span></a>
      </div>
      <div>
        <ul class="social-links">
          <li>
            <a href="#"><span class="small icon--hide-label" data-icon="twitter">Share on Twitter</span></a>
          </li>
          <li>
            <a href="#"><span class="small icon--hide-label" data-icon="facebook">Share on Facebook</span></a>
          </li>
          <li>
            <a href="#"><span class="small icon--hide-label" data-icon="linkedin">Share on LinkedIn</span></a>
          </li>
        </ul>
      </div>
      <div>
        <p>
          T: +61 3 9035 9400
        </p>
        <p>
          <a href="mailto:extremely-long-hyphened-email.mcd-web@unimelb.edu.au">extremely-long-hyphened-email.mcd-web@unimelb.edu.au</a>
        </p>
        <p>
          Wheelchair accessible
        </p>
      </div>
    </div>
    <p>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
    </p>
    <p>
      Nam vestibulum porttitor ipsum tincidunt semper. Suspendisse id euismod orci, quis egestas nulla. Donec sit amet auctor justo. Nam a turpis ac diam fringilla ullamcorper ac quis quam. Duis ultricies eget diam laoreet molestie. Donec accumsan est nibh, eu pretium ante volutpat vitae. Nam vitae arcu eget tellus sollicitudin vehicula. Ut lectus elit, semper ac feugiat sed, sagittis eget magna. In condimentum purus et libero fringilla, nec tincidunt libero suscipit. Nam fermentum velit et orci gravida, a hendrerit elit fermentum.
    </p>
    <p>
      Nulla interdum magna a euismod laoreet. Pellentesque convallis posuere placerat. Nam tristique, elit quis vehicula ullamcorper, tellus lacus rutrum lacus, vel pretium lectus elit non urna. Nulla consectetur facilisis enim, in ultricies dui facilisis vel. Etiam vestibulum nec mi nec tempus. Ut luctus ex vitae imperdiet lobortis. Vestibulum placerat mi turpis, quis laoreet urna varius id. Curabitur id sagittis justo.
    </p>
    <div class="presenters">
      <strong>Presenters</strong><a href="">Ms Louise Adler</a><a href="">Ms Hanifa Deen</a><a href="">Mr Mathew Kenneally</a><a href="">Beth Wilson</a><a href="">Loruem Exum Ipsum</a><a href="">Professor Doulum</a><a href="">Endus Hoopes</a><a href="">Exum Padamadahm III</a>
    </div>
  </div>
</div>