Block-listing

<p>Inside the basic <em>news</em>, <em>event</em>, and <em>exhibition</em> tiles, images should be provided as background images on an empty element with class <code>block-listing__img</code>, and have a ratio of 16/9 (56.25%). If you don't have a choice but to use <code>img</code> tags, make sure to wrap them inside containers with class <code>crop-height</code> in order to approximate the background-image behaviour.
</p>
<p>If a tile doesn't have a link (i.e. if <code>block-container</code> is a <code>div</code> rather than an anchor), use class <code>no-anim</code> to remove the hover effect.
</p>
<ul class="block-listing">
  <li class="event double newshero special" style="background-image: url(http://placeimg.com/740/320/any?5);">
    <a class="block-container" href=""><strong><span><em>Health & Medicine</em><br />Why today’s children need more than a good night’s sleep.</span></strong></a>
  </li>
  <li class="event">
    <a class="block-container" href="">
      <div class="when range">
        <time datetime="2014-03-18">18 March</time><time datetime="2014-05-04">4 May 2014</time>
      </div>
      <div class="mid-unit">
        <strong>Sed natum conceptam porro iuvaret sensibus quo ad constituam in mnesarchum. Sed porro iuvaret in, per eu natum conceptam.</strong>
      </div>
      <div class="block-listing__img" style="background-image: url(http://placeimg.com/740/620/animals);"></div>
      <div class="meta">
        <em class="meta-right">Event</em>
      </div>
    </a>
  </li>
  <li class="instagram" style="background-image: url(http://placeimg.com/400/600/any?5);">
    <a class="block-container" href="">
      <div class="meta">
        <em><span class="small" data-icon="instagram">Instagram</span> @unimelb</em>
      </div>
    </a>
  </li>
  <li class="news">
    <a class="block-container" href="">
      <div class="block-listing__img" style="background-image: url(http://placeimg.com/740/620/any?1);"></div>
      <strong>International law. Is it myth or reality?</strong>
      <p>
        The fate of boat people in the Indian Ocean and the Mediterranean proves attitudes are hardening.
      </p>
      <div class="meta">
        <em>Legal Affairs</em>
      </div>
    </a>
  </li>
  <li class="twitter">
    <div class="block-container">
      <strong>India hasn't signed nuclear treaty. So why did Aus sign a uranium deal? <a href="http://t.co/STetvM6GeA">http://t.co/STetvM6GeA</a> w/AProf Tilman Ruff</strong>
      <div class="meta">
        <em><span class="small" data-icon="twitter">Twitter</span><a href="#">@unimelb</a></em>
      </div>
    </div>
  </li>
  <li class="news">
    <a class="block-container" href="">
      <div class="crop-height">
        <img alt="" src="http://placeimg.com/740/320/any?3" />
      </div>
      <strong>Multi-party Government the way of future</strong>
      <p>This tile uses an <code>img</code> tag inside a <code>crop-height</code> container instead of a background image. The image appears shorter because it has a wider ratio than 16/9, so this technique should be avoided.
      </p>
      <div class="meta">
        <em>Politics & Society</em>
      </div>
    </a>
  </li>
  <li class="exhibition">
    <a class="block-container" href="">
      <div class="when">
        Wednesday<time datetime="2014-05-28"> 28 May 2014</time>5:00 pm - 1:00 am
      </div>
      <div class="mid-unit">
        <strong>This tile uses an <code>img</code> tag inside a <code>crop-height</code> container instead of a background image.</strong>
      </div>
      <div class="crop-height">
        <img alt="" src="http://placeimg.com/674/380/nature" />
      </div>
      <div class="meta">
        <em class="meta-right">Exhibition</em>
      </div>
    </a>
  </li>
  <li class="news no-anim">
    <div class="block-container">
      <strong>This is an example of a tile without a link</strong>
      <p>
        Ex debet appellantur eam, porro iuvaret in, per eu natum conceptam, nam at essent nam an case nemore mnesarchum. Sed porro iuvaret in, per eu natum conceptam, nam at essent petentium. Dicunt audiam aliquam eu sed, te mei decore maiorum. Ex debet appellantur eam, porro iuvaret in, per eu natum conceptam, nam at essent nam an case nemore mnesarchum.
      </p>
      <p>
        Sed porro iuvaret in, per eu natum conceptam, nam at essent petentium. Dicunt audiam aliquam eu sed, te mei decore maiorum. Ex debet appellantur eam, porro iuvaret in, per eu natum conceptam, nam at essent nam an case nemore mnesarchum. Sed porro iuvaret in, per eu natum conceptam, nam at essent petentium. Dicunt audiam aliquam eu sed, te mei decore maiorum. Dicunt audiam aliquam eu sed, te mei decore maiorum.
      </p>
      <div class="meta">
        <time class="meta-left" datetime="2015-02-30"> 30 Feb 2015</time><em class="meta-right">News</em>
      </div>
    </div>
  </li>
  <li class="more">
    <div class="block-container">
      <a href="#"><strong>More stories</strong></a><a href="#"><strong>More events</strong></a><a class="twitter" href="#"><strong><span class="small" data-icon="twitter">Twitter</span>@unimelb </strong></a><a class="instagram" href="#"><strong><span class="small" data-icon="instagram">Instagram</span>@unimelb </strong></a>
    </div>
  </li>
  <li class="event double" style="background-image: url(http://placeimg.com/680/590/arch);">
    <a class="block-container" href=""><strong>Apeirian nominati partiendo</strong>
      <p>
        Ullum ornatus intellegam in sea
      </p>
      <span class="button-hero-inverse" href=""> Call to Action</span></a>
  </li>
</ul>