Trumps

Flex

Align Center

<div class="flex flex-align--center">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Align End

<div class="flex flex-align--end">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Align Start

<div class="flex flex-align--start">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Direction Column Reverse

<div class="flex flex-direction--column-rev">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Direction Column

<div class="flex flex-direction--column">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Direction Row Reverse

<div class="flex flex-direction--row-rev">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Direction Row

<div class="flex flex-direction--row">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Flex

<div class="flex">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Grow Equal

<div class="flex flex-grow--equal">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Grow

<div class="flex flex--grow">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Justify Around

<div class="flex flex-justify--around">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Justify Between

<div class="flex flex-justify--between">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Justify Center

<div class="flex flex-justify--center">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Justify End

<div class="flex flex-justify--end">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Justify Start

<div class="flex flex-justify--start">
	<div class="padding--default background-color--grey">1</div>
	<div class="padding--default background-color--grey">2</div>
	<div class="padding--default background-color--grey">3</div>
	<div class="padding--default background-color--grey">4</div>
	<div class="padding--default background-color--grey">5</div>
</div>
1
2
3
4
5

Margin

Bottom

<div class="margin-bottom--tiny">
	<p>Margin bottom tiny</p>
</div>
<div class="margin-bottom--small">
	<p>Margin bottom small</p>
</div>
<div class="margin-bottom--default">
	<p>Margin bottom default</p>
</div>
<div class="margin-bottom--large">
	<p>Margin bottom large</p>
</div>
<div class="margin-bottom--huge">
	<p>Margin bottom huge</p>
</div>
<div class="margin-bottom--none">
	<p>Margin bottom none</p>
</div>

Margin bottom tiny

Margin bottom small

Margin bottom default

Margin bottom large

Margin bottom huge

Margin bottom none

Complete

<div class="margin--tiny">
	<p>Margin tiny</p>
</div>
<div class="margin--small">
	<p>Margin small</p>
</div>
<div class="margin--default">
	<p>Margin default</p>
</div>
<div class="margin--large">
	<p>Margin large</p>
</div>
<div class="margin--huge">
	<p>Margin huge</p>
</div>

Margin tiny

Margin small

Margin default

Margin large

Margin huge

Horizontal

<div class="margin-horizontal--tiny">
	<p>Margin horizontal tiny</p>
</div>
<div class="margin-horizontal--small">
	<p>Margin horizontal small</p>
</div>
<div class="margin-horizontal--default">
	<p>Margin horizontal default</p>
</div>
<div class="margin-horizontal--large">
	<p>Margin horizontal large</p>
</div>
<div class="margin-horizontal--huge">
	<p>Margin horizontal huge</p>
</div>
<div class="margin-horizontal--none">
	<p>Margin horizontal none</p>
</div>

Margin horizontal tiny

Margin horizontal small

Margin horizontal default

Margin horizontal large

Margin horizontal huge

Margin horizontal none

Left

<div class="margin-left--tiny">
	<p>Margin left tiny</p>
</div>
<div class="margin-left--small">
	<p>Margin left small</p>
</div>
<div class="margin-left--default">
	<p>Margin left default</p>
</div>
<div class="margin-left--large">
	<p>Margin left large</p>
</div>
<div class="margin-left--huge">
	<p>Margin left huge</p>
</div>
<div class="margin-left--none">
	<p>Margin left none</p>
</div>

Margin left tiny

Margin left small

Margin left default

Margin left large

Margin left huge

Margin left none

Right

<div class="margin-right--tiny">
	<p>Margin right tiny</p>
</div>
<div class="margin-right--small">
	<p>Margin right small</p>
</div>
<div class="margin-right--default">
	<p>Margin right default</p>
</div>
<div class="margin-right--large">
	<p>Margin right large</p>
</div>
<div class="margin-right--huge">
	<p>Margin right huge</p>
</div>
<div class="margin-right--none">
	<p>Margin right none</p>
</div>

Margin right tiny

Margin right small

Margin right default

Margin right large

Margin right huge

Margin right none

Top

<div class="margin-top--tiny">
	<p>Margin top tiny</p>
</div>
<div class="margin-top--small">
	<p>Margin top small</p>
</div>
<div class="margin-top--default">
	<p>Margin top default</p>
</div>
<div class="margin-top--large">
	<p>Margin top large</p>
</div>
<div class="margin-top--huge">
	<p>Margin top huge</p>
</div>
<div class="margin-top--none">
	<p>Margin top none</p>
</div>

Margin top tiny

Margin top small

Margin top default

Margin top large

Margin top huge

Margin top none

Overlay

Black

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--black padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Blue

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--blue padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Grey

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--grey padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Orange

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--orange padding--large">
		<h4 class="">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Pink

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--pink padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Purple

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--purple padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Red

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--red padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Teal

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--teal padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Weak

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--weak overlay--teal padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Overlay Gradients

Blue

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--blue-gradient padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Orange

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--orange-gradient padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Purple

<section class="display--inline-block position--relative">
	<picture>
		<img src="/assets/toolkit/examples/event_artwork.png" alt="" class="display--block">
	</picture>

	<div class="hero__content overlay overlay--purple-gradient padding--large">
		<h4 class="text--white">Overlay text on image</h4>
	</div>
</section>

Overlay text on image

Padding

Bottom

<div class="padding-bottom--tiny">
	<p>padding bottom tiny</p>
</div>
<div class="padding-bottom--small">
	<p>padding bottom small</p>
</div>
<div class="padding-bottom--default">
	<p>padding bottom default</p>
</div>
<div class="padding-bottom--large">
	<p>padding bottom large</p>
</div>
<div class="padding-bottom--huge">
	<p>padding bottom huge</p>
</div>
<div class="padding-bottom--none">
	<p>padding bottom none</p>
</div>

padding bottom tiny

padding bottom small

padding bottom default

padding bottom large

padding bottom huge

padding bottom none

Complete

<div class="padding--tiny">
	<p>padding tiny</p>
</div>
<div class="padding--small">
	<p>padding small</p>
</div>
<div class="padding--default">
	<p>padding default</p>
</div>
<div class="padding--large">
	<p>padding large</p>
</div>
<div class="padding--huge">
	<p>padding huge</p>
</div>

padding tiny

padding small

padding default

padding large

padding huge

Horizontal

<div class="padding-horizontal--tiny">
	<p>padding horizontal tiny</p>
</div>
<div class="padding-horizontal--small">
	<p>padding horizontal small</p>
</div>
<div class="padding-horizontal--default">
	<p>padding horizontal default</p>
</div>
<div class="padding-horizontal--large">
	<p>padding horizontal large</p>
</div>
<div class="padding-horizontal--huge">
	<p>padding horizontal huge</p>
</div>
<div class="padding-horizontal--none">
	<p>padding horizontal none</p>
</div>

padding horizontal tiny

padding horizontal small

padding horizontal default

padding horizontal large

padding horizontal huge

padding horizontal none

Left

<div class="padding-left--tiny">
	<p>padding left tiny</p>
</div>
<div class="padding-left--small">
	<p>padding left small</p>
</div>
<div class="padding-left--default">
	<p>padding left default</p>
</div>
<div class="padding-left--large">
	<p>padding left large</p>
</div>
<div class="padding-left--huge">
	<p>padding left huge</p>
</div>
<div class="padding-left--none">
	<p>padding left none</p>
</div>

padding left tiny

padding left small

padding left default

padding left large

padding left huge

padding left none

Right

<div class="padding-right--tiny">
	<p>padding right tiny</p>
</div>
<div class="padding-right--small">
	<p>padding right small</p>
</div>
<div class="padding-right--default">
	<p>padding right default</p>
</div>
<div class="padding-right--large">
	<p>padding right large</p>
</div>
<div class="padding-right--huge">
	<p>padding right huge</p>
</div>
<div class="padding-right--none">
	<p>padding right none</p>
</div>

padding right tiny

padding right small

padding right default

padding right large

padding right huge

padding right none

Top

<div class="padding-top--tiny">
	<p>padding top tiny</p>
</div>
<div class="padding-top--small">
	<p>padding top small</p>
</div>
<div class="padding-top--default">
	<p>padding top default</p>
</div>
<div class="padding-top--large">
	<p>padding top large</p>
</div>
<div class="padding-top--huge">
	<p>padding top huge</p>
</div>
<div class="padding-top--none">
	<p>padding top none</p>
</div>

padding top tiny

padding top small

padding top default

padding top large

padding top huge

padding top none

Text

Alignment

<p class="text-align--left">Left aligned text.</p>
<p class="text-align--center">Center aligned text.</p>
<p class="text-align--right">Right aligned text.</p>

Left aligned text.

Center aligned text.

Right aligned text.

Case

<p class="text--uppercase">Uppercase text.</p>

Uppercase text.

Colour

<p class="text--black">This text is black.</p>
<p class="text--blue">This text is blue.</p>
<p class="text--grey">This text is grey.</p>
<p class="text--white background-color--black">This text is white.</p>

This text is black.

This text is blue.

This text is grey.

This text is white.

Heading

Used to replicate heading styles without invalidating page semantics.

<p class="text--h1">Heading One</p>
<p class="text--h2">Heading Two</p>
<p class="text--h3">Heading Three</p>
<p class="text--title">Section title</p>

Heading One

Heading Two

Heading Three

Section title

Size

<p class="text--small">This is small sized text.</p>
<p class="text--default">This is default sized text.</p>
<p class="text--large">This is large sized text.</p>
<p class="text--hero">This is hero sized text.</p>

This is small sized text.

This is default sized text.

This is large sized text.

This is hero sized text.