The media object is a multi-purpose object that can be used in a variety of different location. It's basic use is to float an image to the left, with some text next to it (see this blog post). The basic set-up of the media object is:
- A picture on the left (usually containing a
.c-figure) - A body on the right, which can contain any markup, usually a title, subtitle and content
Here's an example with all the bits filled in:
Investing in our campus
Vision for a 21st-century campus
The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.
Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.
<div class="o-media o-media--top">
<div class="o-media__picture">
<figure class="c-figure">
<img class="c-figure__image" src="https://picsum.photos/200/200/?image=200" alt="A caption for the image" width="200px">
<figcaption class="c-figure__caption c-figure__caption--bottom-left">A caption for the image</figcaption>
</figure>
</div>
<div class="o-media__body">
<h4 class="o-media__title">Investing in our campus</h4>
<h5 class="subtitle">Vision for a 21st-century campus</h5>
<p>The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.</p>
<p>Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.</p>
</div>
</div>
The picture can be vertically-aligned to the top (as above), middle or bottom (below):
Investing in our campus
Vision for a 21st-century campus
The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.
Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.
<div class="o-media o-media--middle">
<div class="o-media__picture">
<figure class="c-figure">
<img class="c-figure__image" src="https://picsum.photos/200/200/?image=201" alt="A caption for the image" width="200px">
<figcaption class="c-figure__caption c-figure__caption--bottom-left">A caption for the image</figcaption>
</figure>
</div>
<div class="o-media__body">
<h4 class="o-media__title">Investing in our campus</h4>
<h5 class="subtitle">Vision for a 21st-century campus</h5>
<p>The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.</p>
<p>Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.</p>
</div>
</div>
Investing in our campus
Vision for a 21st-century campus
The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.
Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.
<div class="o-media o-media--bottom">
<div class="o-media__picture">
<figure class="c-figure">
<img class="c-figure__image" src="https://picsum.photos/200/200/?image=202" alt="A caption for the image" width="200px">
<figcaption class="c-figure__caption c-figure__caption--bottom-left">A caption for the image</figcaption>
</figure>
</div>
<div class="o-media__body">
<h4 class="o-media__title">Investing in our campus</h4>
<h5 class="subtitle">Vision for a 21st-century campus</h5>
<p>The University is in the middle of an unprecedented period of expansion and renewal. Since 2000, we have invested in 20 new buildings on the original Heslington West campus and have completed the first and second phases of a £750m campus expansion at Heslington East.</p>
<p>Our investment in new colleges, teaching and learning space, laboratories, research facilities and a new sport village mean it has never been a better time to join our student body or research groups at York.</p>
</div>
</div>
The media image and body can contain any arbitrary content (but the figure element used to hold the media picture should be used for images:
Ah, look, some HTML content.
<div class="o-media">
<div class="o-media__picture">
<img src="https://picsum.photos/400/300/?image=203">
</div>
<div class="o-media__body">
<p>Ah, look, some <abbr title="HyperText Markup Language">HTML</abbr> content.</p>
</div>
</div>