1. Design System
  2. Base
  3. Images

Images In Progress

See the banners page for more information.

Image with caption

This image should be cropped to 800 by 450 pixels.

<div class="content">
  <figure class="image m-bottom-30">
    <img src="https://www.brookes.ac.uk/getmedia/036d3d80-1bee-4be0-85c2-50d043b9de4a/Graduate-in-ceremony-800x450.jpg" alt="Group of undergraduates dressed in caps and gowns" />
    <figcaption class="is-size-7 p-10 has-background-light">Students on graduation day</figcaption>
  </figure>
</div>

Sponsor/funder logos

<div class="columns is-multiline">
	<div class="column is-one-quarter-desktop is-half-tablet">
		<div>
			<div class="cms-content has-text-centered">
				<a href="https://www.brookes.ac.uk/osnm/">
					<img class="m-right-10 m-bottom-10" alt="Oxford School of Nursing and Midwifery" src="/design-system/assets/img/OSNM-logo.jpg">
				</a>
			</div>
		</div>
	</div>
	<div class="column is-one-quarter-desktop is-half-tablet">
		<div>
			<div class="cms-content has-text-centered"> 
				<a href=" https://www.birmingham.ac.uk/">
					<img class="m-right-10 m-bottom-10" alt="University of Birmingham" src="/design-system/assets/img/University-of-Birmingham-logo.jpg">
				</a>
			</div>
		</div>
	</div>
	<div class="column is-one-quarter-desktop is-half-tablet">
		<div>
			<div class="cms-content has-text-centered">
				<a href="https://www.cardiff.ac.uk/">
					<img class="m-right-10 m-bottom-10" alt="Cardiff University" src="/design-system/assets/img/Cardiff-University.png">
				</a>
			</div>
		</div>
	</div>
	<div class="column is-one-quarter-desktop is-half-tablet">
		<div>
			<div class="cms-content has-text-centered">
				<a href=" https://www.ulster.ac.uk/">
					<img class="m-right-10 m-bottom-10" alt="Ulster University" src="/design-system/assets/img/Ulster-University.png">
				</a> 
			</div>
		</div>
	</div>
</div>