Utilities for content layout
.items-space-between
<div class="items-space-between">
<!-- START form-item--toggle component -->
<div class="v5-form-item v5-form-item--toggle">
<input type="checkbox" name="idf2a37e471c" id="idf2a37e471c">
<label for="idf2a37e471c">
<span>All</span>
</label>
</div>
<!-- END form-item--toggle component -->
<div class="v5-form-item v5-form-item--checkbox">
<input type="checkbox" name="id42db8c7b6f" id="id42db8c7b6f" value="id42db8c7b6f">
<label for="id42db8c7b6f">Email</label>
</div>
<div class="v5-form-item v5-form-item--checkbox">
<input type="checkbox" name="id7d85d96df4" id="id7d85d96df4" value="id7d85d96df4">
<label for="id7d85d96df4">Post</label>
</div>
<div class="v5-form-item v5-form-item--checkbox">
<input type="checkbox" name="id140282ef00" id="id140282ef00" value="id140282ef00">
<label for="id140282ef00">SMS</label>
</div>
</div>
.self-inline-end and .self-inline-end--from-small
Used on an item to line it up at the inline-end.
Mobile telephone number
05252805713
Other telephone number
08434417444
Email address
nesciuntvel@example.com
Mobile telephone number
01797546008
Other telephone number
02231781212
Email address
doloremharum@example.com
<button class="button button--link self-inline-end self-inline-end--from-small">Edit details</button>
.items-inline-end and .items-inline-end--from-small
Used on a container to line up its items at the inline-end.
In the following examples, the personal ID section (outlined in pink) has .items-inline-end
applied so both its title and the the number are aligned to its right at all breakpoints.
The bottom example only does this from the small breakpoint up.
Title
2020 Undergraduate Application
Title
2020 Undergraduate Application
<div class="items-inline-end items-inline-end--from-small">
<h2 class="h6">Your Personal ID number</h2>
<p class="impact impact--light impact--small">1160007564</p>
</div>