Components
Grid row
Grid rows are similar to media lists but the image is placed above the content on desktop breakpoints.
Default grid row
.jpg)
<div class="grid-row">
<div class="row sm-gutter">
<ul class="media">
<li class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<a class="media-imgrev" href="#">
<img src="http://www.brookes.ac.uk/uploadedImages/Main_Site/Fixed_pages/About_Brookes/NewsImport/Slow-Loris-in-wild.jpg" alt="Javan Slow Loris in the wild">
</a>
<div class="media-body">
<h3><a href="#">Research highlights Japan’s role in illegal trade in threatened slow lorises</a></h3>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<a class="media-imgrev" href="#">
<img src="http://www.brookes.ac.uk/uploadedImages/Main_Site/Fixed_pages/About_Brookes/NewsImport/Special-collections-1.jpg" alt="Visitors at the special collections event">
</a>
<div class="media-body">
<h3><a href="#">Special Collections and Archives officially open in new home</a></h3>
</div>
</li>
<div class="clearfix visible-sm-block"></div>
<li class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<a class="media-imgrev" href="#">
<img src="http://www.brookes.ac.uk/uploadedImages/Main_Site/Fixed_pages/About_Brookes/NewsImport/THE WUR logo(1).jpg" alt="The Times Higher Education University Rankings - top 200 most international universities 2016">
</a>
<div class="media-body">
<h3><a href="#">Oxford Brookes named as one of the world’s most international universities</a></h3>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<a class="media-imgrev" href="#">
<img src="http://www.brookes.ac.uk/uploadedImages/Site_assets/Images/About_Brookes/News/Plant sciences.jpg" alt="Plant sciences">
</a>
<div class="media-body">
<h3><a href="#">Professor highlights importance of plant science in new videos</a></h3>
</div>
</li>
</ul>
</div>
</div>Use the class media-imgrev on the image link.
Ensure the alternative text for the image is descriptive. Try not to use images that include text, if the image includes text, ensure that text is in the alternative text.
Grid row with event box
<div class="grid-row">
<div class="row">
<ul class="media">
<li class="col-xs-12 col-sm-6 col-md-3">
<a class="media-imgrev event-box" href="#">
<div class="event-badge"><span class="event-day">24</span><span class="event-month">May</span></div>
<img src="http://www.brookes.ac.uk/uploadedImages/Main_Site/Fixed_pages/About_Brookes/Events/global-mba-image.png?n=5004" alt="MBA live online information session">
</a>
<div class="media-body">
<h3><a href="#">24 May 2016, MBA live online information session</a></h3>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-3">
<a class="media-imgrev event-box" href="#">
<div class="event-badge"><span class="event-day">01</span><span class="event-month">Jun</span></div>
<img src="http://www.brookes.ac.uk/uploadedImages/Resources/Images/ferndale rs.jpg" alt="Swindon Drop In Sessions">
</a>
<div class="media-body">
<h3><a href="#">01 June 2016, Swindon Drop In Sessions</a></h3>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-3">
<a class="media-imgrev event-box" href="#">
<div class="event-badge"><span class="event-day">01</span><span class="event-month">Jun</span></div>
<img src="http://www.brookes.ac.uk/uploadedImages/Main_Site/Fixed_pages/About_Brookes/Events/unnamed.jpg" alt="Doctorate in Education Taster Session">
</a>
<div class="media-body">
<h3><a href="#">01 June 2016, Doctorate in Education Taster Session</a></h3>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-3">
<a class="media-imgrev event-box" href="#">
<div class="event-badge"><span class="event-day">01</span><span class="event-month">Jun</span></div>
<img src="http://www.brookes.ac.uk/uploadedImages/Resources/Images/Events/rsz_hadeland_museum_-_9471886258.jpg" alt="">
</a>
<div class="media-body">
<h3><a href="#">01 June 2016, "O wot 'orrid langwidge!": Working-class literature from John Clare to James Kelman</a></h3>
</div>
</li>
</ul>
</div>
</div>These are similar to grid rows but with an event date box.
Combine the media-imgrev with the event-box class.
Add a wrapping div with the event-badge class before the image.
Add spans for event-day and event-month.
Ensure the alternative text for the image is descriptive. Try not to use images that include text, if the image includes text, ensure that text is in the alternative text.