Overview
Proof points are used to highlight sections of content. Proof points consist of an icon, a heading, an optional sub heading, some simple copy and a generic call-to-action. They can be horizontally or vertically orientated as well as left or centre aligned. Additionally, you can select from many icon colours and sizes.
Examples
Horizontal variation
Heading
Sub heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, seiusmoded do tempor incididunt ut labore et dolore magna aliqua.
Call to action<div class="proof-point">
<div class="proof-point__icon icon icon--fg-grey-500">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>inventory</title>
<path
d="M15.5 6H5.942C6.593 5.364 7 4.48 7 3.5S6.593 1.636 5.942 1H15.5C16.879 1 18 2.122 18 3.5S16.879 6 15.5 6zM4 23h11V7H4v16zM4 5.95V5h1.499c-.361.479-.89.826-1.499.95zM19 3.5C19 1.57 17.43 0 15.5 0h-12C1.57 0 0 1.57 0 3.5v13c0 .276.224.5.5.5H3v6.5c0 .276.224.5.5.5h12c.276 0 .5-.224.5-.5V6.949c1.692-.245 3-1.691 3-3.449zM1 16V3.5C1 2.122 2.122 1 3.5 1S6 2.122 6 3.5c0 .171-.017.338-.05.5H3.5c-.276 0-.5.224-.5.5V16H1zm8.5-5h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm-3.854-8.146c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 9.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zm0 4c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 13.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zM22 5.5c-.737 0-1.375.405-1.722 1H20c-1.103 0-2 .897-2 2V16c0 .276.224.5.5.5s.5-.224.5-.5V8.5c0-.551.448-1 1-1V22c0 1.103.897 2 2 2s2-.897 2-2V7.5c0-1.103-.897-2-2-2zM22 23c-.552 0-1-.448-1-1h2c0 .552-.448 1-1 1zm0-16.5c.552 0 1 .449 1 1V14h-2V7.5c0-.551.448-1 1-1zM21 21h2v-6h-2v6z"
fill="#000"
fill-rule="evenodd"
/>
</svg>
</div>
<div class="proof-point__content">
<h3>Heading</h3>
<h5 class="fg-grey-700"><em>Sub heading</em></h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, seiusmoded do
tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>Vertical variation
Heading
Sub heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to action<div class="proof-point proof-point--vertical">
<div class="proof-point__icon icon icon--fg-grey-500">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>inventory</title>
<path
d="M15.5 6H5.942C6.593 5.364 7 4.48 7 3.5S6.593 1.636 5.942 1H15.5C16.879 1 18 2.122 18 3.5S16.879 6 15.5 6zM4 23h11V7H4v16zM4 5.95V5h1.499c-.361.479-.89.826-1.499.95zM19 3.5C19 1.57 17.43 0 15.5 0h-12C1.57 0 0 1.57 0 3.5v13c0 .276.224.5.5.5H3v6.5c0 .276.224.5.5.5h12c.276 0 .5-.224.5-.5V6.949c1.692-.245 3-1.691 3-3.449zM1 16V3.5C1 2.122 2.122 1 3.5 1S6 2.122 6 3.5c0 .171-.017.338-.05.5H3.5c-.276 0-.5.224-.5.5V16H1zm8.5-5h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm-3.854-8.146c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 9.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zm0 4c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 13.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zM22 5.5c-.737 0-1.375.405-1.722 1H20c-1.103 0-2 .897-2 2V16c0 .276.224.5.5.5s.5-.224.5-.5V8.5c0-.551.448-1 1-1V22c0 1.103.897 2 2 2s2-.897 2-2V7.5c0-1.103-.897-2-2-2zM22 23c-.552 0-1-.448-1-1h2c0 .552-.448 1-1 1zm0-16.5c.552 0 1 .449 1 1V14h-2V7.5c0-.551.448-1 1-1zM21 21h2v-6h-2v6z"
fill="#000"
fill-rule="evenodd"
/>
</svg>
</div>
<div class="proof-point__content">
<h3>Heading</h3>
<h5 class="fg-grey-700"><em>Sub heading</em></h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>Centre variation
Heading
Sub heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to action<div class="proof-point proof-point--vertical proof-point--center">
<div class="proof-point__icon icon icon--fg-gradient">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>inventory</title>
<path
d="M15.5 6H5.942C6.593 5.364 7 4.48 7 3.5S6.593 1.636 5.942 1H15.5C16.879 1 18 2.122 18 3.5S16.879 6 15.5 6zM4 23h11V7H4v16zM4 5.95V5h1.499c-.361.479-.89.826-1.499.95zM19 3.5C19 1.57 17.43 0 15.5 0h-12C1.57 0 0 1.57 0 3.5v13c0 .276.224.5.5.5H3v6.5c0 .276.224.5.5.5h12c.276 0 .5-.224.5-.5V6.949c1.692-.245 3-1.691 3-3.449zM1 16V3.5C1 2.122 2.122 1 3.5 1S6 2.122 6 3.5c0 .171-.017.338-.05.5H3.5c-.276 0-.5.224-.5.5V16H1zm8.5-5h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm0 4h4c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5zm-3.854-8.146c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 9.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zm0 4c.099.098.226.146.354.146.128 0 .255-.049.354-.146l2-2c.195-.195.195-.512 0-.707-.195-.196-.512-.196-.707 0L6 13.793l-.146-.146c-.196-.196-.513-.196-.708 0-.194.194-.194.511 0 .707l.5.5zM22 5.5c-.737 0-1.375.405-1.722 1H20c-1.103 0-2 .897-2 2V16c0 .276.224.5.5.5s.5-.224.5-.5V8.5c0-.551.448-1 1-1V22c0 1.103.897 2 2 2s2-.897 2-2V7.5c0-1.103-.897-2-2-2zM22 23c-.552 0-1-.448-1-1h2c0 .552-.448 1-1 1zm0-16.5c.552 0 1 .449 1 1V14h-2V7.5c0-.551.448-1 1-1zM21 21h2v-6h-2v6z"
fill="#000"
fill-rule="evenodd"
/>
</svg>
</div>
<div class="proof-point__content">
<h3>Heading</h3>
<h5 class="fg-grey-700"><em>Sub heading</em></h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="link-advanced">Call to action</a>
</div>
</div>Usage guidelines
| Dos | Don'ts |
|---|---|
 Do ensure body copy is clear and concise.
|
 Don’t use overly long body copy so that flows over 2 lines.
|
|
Within a group of Proof Points, do keep the orientation, alignment and icons consistent.
|
Implementation guidelines
| Name | Class | Description |
|---|---|---|
| Alignment |
.proof-point--center
|
Change Proof Point alignment within their container. Default is left. Centre only applies to vertical orientation. |
| Orientation |
.proof-point--vertical
|
Changes the placement of child elements within the Proof Point. Default is horizontal. |
| Icon size |
.icon--lg
.icon--xl
.icon--xxl
|
Sizes for Proof Point icons. Apply to the .icon element.
|
| Icon colours |
.icon--fg-dusk
.icon--fg-grey-800
.icon--fg-grey-500
.icon--fg-white
|
Change icon colour. Apply to the .icon element.
|