Background colour
Apply a background colour to an element. Works with any of our colours. Font colour is set to light/dark depending on background colour.
<div class="background--astral">
Astral
</div>
<div class="background--ship-grey">
Ship gray
</div>
<div class="background--poppy">
Poppy
</div>
<div class="background--mercury">
Mercury
</div>
Width
Set how many columns wide an element should be.
<div class="background--abbey width--34">
34 columns wide
</div>
<div class="background--iron-light width-sm--10">
10 columns wide only on small
</div>
<div class="background--abbey width-md--25">
25 columns wide on medium and up
</div>
<div class="background--iron-light width-lg--48">
48 columns wide on large
</div>
Height
Set the height of an element, in multiples of 8 pixels.
<div class="background--abbey height--8">
8 height
</div>
<div class="background--iron-light height-sm--7">
7 height only on small
</div>
<div class="background--abbey height-md--10">
10 height on medium and up
</div>
<div class="background--iron-light height-lg--6">
6 height on large
</div>
Margin
Set margin on an element. Margin is spacing applied outside of the div.
<div class="background--abbey margin-left--5">
Margin left 5
</div>
<div class="background--iron-light margin-top-sm--3">
Margin top 3, only for small
</div>
<div class="background--abbey margin-top-md--4 margin-left-md--5">
Margin top and left on medium and up
</div>
<div class="background--iron-light margin-top-lg--2 margin-left-lg--5 margin-right-lg--5">
Margin top, left and right on large
</div>
Padding
Set padding on an element. Padding is applied inside the div.
<div class="background--abbey padding-top--2 padding-left--1 padding-right--1 padding-bottom--2">
Padded box on all screen sizes
</div>
<div class="background--iron-light padding-top-sm--2 padding-left-sm--1 padding-right-sm--1 padding-bottom-sm--2">
Padded box only on small screens
</div>
<div class="background--abbey padding-bottom-md--2">
Padding on bottom for medium and up
</div>
<div class="background--iron-light padding-left-md--17">
Padding left on large screens
</div>
Visibility
Hide elements at certain screen sizes.
<div class="hide--sm">
Hidden on small screens only
</div>
<div class="hide--md">
Hidden on medium and up screens
</div>
<div class="hide--lg">
Hidden on large screens
</div>
Ellipsis
The ellipsis utility needs the element to have a background colour.
Curabitur eget elementum sem. Nam interdum tellus non metus pellentesque sagittis. Sed a sollicitudin velit, vel luctus lorem. Cras facilisis eleifend est. Donec felis quam, varius vitae ligula vel, scelerisque fermentum odio. Mauris tempus ornare diam sit amet condimentum. Aenean odio tellus, maximus ut nibh in, sollicitudin ornare risus. Suspendisse tempus dolor id nunc tempus, quis mattis sapien congue. Donec sem ipsum, sagittis sed elementum at, maximus in erat. Sed ornare sodales tempus. Proin aliquam dapibus sem, id faucibus enim commodo vel. Phasellus lacinia venenatis nisl, egestas luctus turpis pharetra non. Curabitur purus leo, luctus sit amet dolor id, maximus ultricies massa. Donec sit amet diam vitae purus iaculis laoreet vitae cursus nibh. Donec condimentum neque a est facilisis, ac aliquet augue dignissim. Fusce hendrerit consequat odio, in fermentum neque lobortis et.
<div class="height--31-ellipsis width--15 background--white">
<p>Curabitur eget elementum sem. Nam interdum tellus non metus pellentesque sagittis. Sed a sollicitudin velit, vel luctus lorem. Cras facilisis eleifend est. Donec felis quam, varius vitae ligula vel, scelerisque fermentum odio. Mauris tempus ornare diam sit amet condimentum. Aenean odio tellus, maximus ut nibh in, sollicitudin ornare risus. Suspendisse tempus dolor id nunc tempus, quis mattis sapien congue. Donec sem ipsum, sagittis sed elementum at, maximus in erat. Sed ornare sodales tempus. Proin aliquam dapibus sem, id faucibus enim commodo vel. Phasellus lacinia venenatis nisl, egestas luctus turpis pharetra non. Curabitur purus leo, luctus sit amet dolor id, maximus ultricies massa. Donec sit amet diam vitae purus iaculis laoreet vitae cursus nibh. Donec condimentum neque a est facilisis, ac aliquet augue dignissim. Fusce hendrerit consequat odio, in fermentum neque lobortis et.</p>
</div>