1. Design System
  2. Components
  3. Profiles

Profiles

Default profiles

<div class="columns is-multiline">
	<div class="column">
		<div class="columns is-mobile">
			<div class="column is-narrow">
				<figure class="image is-128x128">
					<img class="is-rounded" src="https://static.brookes.ac.uk/design-system/assets/img/round-profile-default.jpg" alt="">
				</figure>
			</div>
			<div class="column">
				<h3 class="is-size-4 has-text-weight-bold">Dr Tina Smith</h3>
				<h4 class="is-size-5 has-text-weight-bold">Senior Lecturer in Politics </h4>
				<ul class="fa-ul">
					<li><span class="fa-li"><i class="fas fa-phone" aria-hidden="true"></i></span> +44 (0) 1865 xxxxxxx</li>
					<li><span class="fa-li"><i class="fas fa-paper-plane" aria-hidden="true"></i></span> xxxxxxx@brookes.ac.uk</li>
				</ul>
				<p><a class="is-size-6 text-link" href="#">View Tina's profile&nbsp;<span class="text-link-icon fas fa-arrow-right" aria-hidden="true"></span></a></p>
			</div>
		</div>
	</div>
	<div class="column">
		<div class="columns is-mobile">
			<div class="column is-narrow">
				<figure class="image is-128x128">
					<img class="is-rounded" src="https://static.brookes.ac.uk/design-system/assets/img/round-profile-default.jpg" alt="">
				</figure>
			</div>
			<div class="column">
				<h3 class="is-size-4 has-text-weight-bold">Professor Tom Snow</h3>
				<h4 class="is-size-5 has-text-weight-bold">Professor in Anthropology</h4>
				<ul class="fa-ul">
					<li><span class="fa-li"><i class="fas fa-paper-plane" aria-hidden="true"></i></span> xxxxxxx@brookes.ac.uk</li>
				</ul>
				<p><a class="is-size-6 text-link" href="#">View Tom's profile&nbsp;<span class="text-link-icon fas fa-arrow-right" aria-hidden="true"></span></a></p>
			</div>
		</div> 
	</div>
</div>

Small profiles

<div class="columns is-multiline">
	<div class="column">
		<div class="columns is-mobile">
			<div class="column is-narrow">
				<figure class="image is-96x96">
					<img class="is-rounded" src="https://static.brookes.ac.uk/design-system/assets/img/round-profile-default.jpg" alt="">
				</figure>
			</div>
			<div class="column">
				<h3 class="is-size-4 has-text-weight-bold">Glen Mills</h3>
				<h4 class="is-size-5 has-text-weight-bold">Senior Lecturer in History</h4>
				<ul class="fa-ul">
					<li><span class="fa-li"><i class="fas fa-paper-plane" aria-hidden="true"></i></span> xxxxxxx@brookes.ac.uk</li>
				</ul>
				<p><a class="is-size-6 text-link" href="#">View Glen's profile&nbsp;<span class="text-link-icon fas fa-arrow-right" aria-hidden="true"></span></a></p>
			</div>
		</div>
	</div>
	<div class="column">
		<div class="columns is-mobile">
			<div class="column is-narrow">
				<figure class="image is-96x96">
					<img class="is-rounded" src="https://static.brookes.ac.uk/design-system/assets/img/round-profile-default.jpg" alt="">
				</figure>
			</div>
			<div class="column">
				<h3 class="is-size-4 has-text-weight-bold">Katharine Bart</h3>
				<h4 class="is-size-5 has-text-weight-bold">Senior Lecturer in Law</h4>
				<ul class="fa-ul">
					<li><span class="fa-li"><i class="fas fa-paper-plane" aria-hidden="true"></i></span> xxxxxxx@brookes.ac.uk</li>
				</ul>
				<p><a class="is-size-6 text-link" href="#">View Katharine's profile&nbsp;<span class="text-link-icon fas fa-arrow-right" aria-hidden="true"></span></a></p>
			</div>
		</div>
	</div>
	<div class="column">
		<div class="columns is-mobile">
			<div class="column is-narrow">
				<figure class="image is-96x96">
					<img class="is-rounded" src="https://static.brookes.ac.uk/design-system/assets/img/round-profile-default.jpg" alt="">
				</figure>
			</div>
			<div class="column">
				<h3 class="is-size-4 has-text-weight-bold">Elizabeth Biggs</h3>
				<h4 class="is-size-5 has-text-weight-bold">Reader in Early Modern Literature</h4>
				<ul class="fa-ul">
					<li><span class="fa-li"><i class="fas fa-paper-plane" aria-hidden="true"></i></span> xxxxxxx@brookes.ac.uk</li>
				</ul>
				<p><a class="is-size-6 text-link" href="#">View Elizabeth's profile&nbsp;<span class="text-link-icon fas fa-arrow-right" aria-hidden="true"></span></a></p>
			</div>
		</div>
	</div>
</div>

Profiles with no image

<div class="columns is-multiline">
	<div class="column">
		<div class="columns is-mobile">
			<div class="column">
				<h3 class="is-size-4 has-text-weight-bold">Charlie Scott</h3>
				<h4 class="is-size-5 has-text-weight-bold">Reader in History</h4>
				<ul class="fa-ul">
					<li><span class="fa-li"><i class="fas fa-paper-plane" aria-hidden="true"></i></span> xxxxxxx@brookes.ac.uk</li>
				</ul>
				<p><a class="is-size-6 text-link" href="#">View Charlie's profile<span class="text-link-icon fas fa-arrow-right" aria-hidden="true"></span></a></p>
			</div>
		</div>
	</div>
	<div class="column">
		<div class="columns is-mobile">
			<div class="column">
				<h3 class="is-size-4 has-text-weight-bold">Arthur Galt</h3>
				<h4 class="is-size-5 has-text-weight-bold">Professor of Modern History</h4>
				<ul class="fa-ul">
					<li><span class="fa-li"><i class="fas fa-paper-plane" aria-hidden="true"></i></span> xxxxxxx@brookes.ac.uk</li>
				</ul>
				<p><a class="is-size-6 text-link" href="#">View Arthur's profile<span class="text-link-icon fas fa-arrow-right" aria-hidden="true"></span></a></p>
			</div>
		</div>
	</div>
	<div class="column">
		<div class="columns is-mobile">
			<div class="column">
				<h3 class="is-size-4 has-text-weight-bold">Fred Bishop</h3>
				<h4 class="is-size-5 has-text-weight-bold">Reader in Architectural History</h4>
				<ul class="fa-ul">
					<li><span class="fa-li"><i class="fas fa-paper-plane" aria-hidden="true"></i></span> xxxxxxx@brookes.ac.uk</li>
				</ul>
				<p><a class="is-size-6 text-link" href="#">View Fred's profile<span class="text-link-icon fas fa-arrow-right" aria-hidden="true"></span></a></p>
			</div>
		</div>
	</div>
</div>

Usage

Accessibility