Feature

Overview

The Feature component is a visually impactful way in which to present high level and concise selling points. The component works best when displaying several grouped features, either horizontally or vertically. It supports horizontally or vertically oriented variations, as well as text links.

Examples

Default variation

Example
External Link
accounts
Lorem ipsum dolor sit amet 
<div class="feature">
  <div class="feature__icon icon icon--md icon--fg-storm-100">
    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <title>accounts</title>
      <path d="M6.5 3h4.245l.803 1.712c.083.176.259.288.453.288H17.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-5.182l-.803-1.712c-.083-.176-.259-.288-.453-.288H6.5c-.276 0-.5.224-.5.5s.224.5.5.5zm1-2h4.245l.803 1.712c.083.176.259.288.453.288H16.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-3.182L12.515.288C12.432.112 12.256 0 12.062 0H7.5c-.276 0-.5.224-.5.5s.224.5.5.5zm16.494 15.469c-.002-.033-.011-.064-.02-.096-.009-.034-.017-.066-.033-.096-.004-.01-.004-.02-.009-.029l-3.5-6c-.09-.154-.254-.248-.432-.248h-1V6.5c0-.276-.224-.5-.5-.5h-7.182l-.803-1.712c-.083-.176-.259-.288-.453-.288H5.5c-.276 0-.5.224-.5.5V10H4c-.178 0-.342.094-.432.248l-3.5 6c-.006.01-.005.02-.01.03-.015.029-.023.061-.032.094-.009.032-.018.064-.02.097 0 .011-.006.02-.006.031v7c0 .276.224.5.5.5h23c.276 0 .5-.224.5-.5v-7c0-.011-.006-.02-.006-.031zM23 23H1v-6h6v.5c0 1.379 1.622 2.5 3 2.5h4.5c1.379 0 2.5-1.121 2.5-2.5V17h6v6zM4.287 11H5v3.5c0 .276.224.5.5.5s.5-.224.5-.5V5h3.745l.803 1.712c.083.176.259.288.453.288H18v7.5c0 .276.224.5.5.5s.5-.224.5-.5V11h.713l2.917 5H16.5c-.276 0-.5.224-.5.5v1c0 .827-.673 1.5-1.5 1.5H10c-.827 0-2-.673-2-1.5v-1c0-.276.276-.5 0-.5H1.371l2.916-5zM9.5 15h6.027c.276 0 .5-.224.5-.5 0-1.421-.556-2.414-1.692-3.017.243-.36.38-.79.38-1.235 0-1.213-.988-2.2-2.2-2.2-1.214 0-2.2.988-2.2 2.2 0 .448.133.876.377 1.235C9.555 12.085 9 13.078 9 14.5c0 .276.223.5.5.5zm2.22-2.87c.18-.061.31-.218.335-.406.026-.19-.057-.375-.215-.482-.329-.223-.526-.594-.526-.993 0-.661.538-1.2 1.2-1.2.662 0 1.2.538 1.2 1.199 0 .398-.198.77-.528.995-.157.107-.239.293-.214.48.026.189.157.346.336.407 1.05.353 1.566.91 1.69 1.87H10.03c.123-.96.638-1.518 1.69-1.87z" fill="#000" fill-rule="evenodd"/>
    </svg>
  </div>
  <div class="feature__copy">
    Lorem ipsum dolor sit amet
  </div>
</div>

Vertical variation

Example
External Link
business-increase

Lorem ipsum dolor sit amet


<div class="feature feature--vertical">
  <div class="feature__icon icon icon--md icon--fg-storm-100 mb-1">
    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <title>business-increase</title>
      <path d="M7 1c1.654 0 3 1.346 3 3S8.654 7 7 7 4 5.654 4 4s1.346-3 3-3m9.96 3C15.875 3.978 15 3.09 15 2c0-1.103.897-2 2-2s2 .897 2 2c0 1.09-.875 1.978-1.96 2h2.46c.276 0 .5.224.5.5 0 2.475-1.16 3.474-1.852 3.849-.075.04-.157.06-.238.06-.177 0-.35-.094-.44-.261-.133-.243-.043-.546.2-.678.755-.41 1.212-1.277 1.31-2.47h-3.96c.098 1.193.555 2.06 1.31 2.47.243.13.333.435.2.678-.133.244-.436.33-.678.2C15.162 7.975 14 6.977 14 4.5c0-.276.224-.5.5-.5h2.46zM7 8c2.206 0 4-1.794 4-4S9.206 0 7 0 3 1.794 3 4s1.794 4 4 4zm2 10.542c-.276 0-.5.224-.5.5V23h-3v-.917c0-.276-.224-.5-.5-.5s-.5.224-.5.5V23.5c0 .276.224.5.5.5h4c.276 0 .5-.224.5-.5v-4.458c0-.276-.224-.5-.5-.5zm-4.238-1.103c.076.041.157.061.238.061.178 0 .349-.095.44-.262.132-.242.04-.546-.201-.677-1.986-1.075-3.123-3.395-3.23-6.56h9.983c-.035 1.03-.178 1.976-.428 2.816-.08.264.072.543.337.621.267.076.544-.072.622-.337.317-1.068.477-2.279.477-3.6 0-.277-.223-.5-.5-.5h-11c-.276 0-.5.223-.5.5 0 5.135 2.357 7.178 3.762 7.938zM17 3c-.552 0-1-.449-1-1 0-.551.448-1 1-1s1 .449 1 1c0 .551-.448 1-1 1zm6.498 7.492c0-.04-.013-.075-.023-.113-.006-.026-.007-.054-.018-.078-.007-.018-.022-.032-.032-.048-.023-.04-.046-.08-.079-.112l-.005-.006c-.017-.016-.038-.022-.057-.035-.032-.023-.063-.048-.1-.063-.038-.014-.075-.017-.113-.023-.025-.003-.046-.014-.07-.014h-6.5c-.278 0-.5.224-.5.5s.222.5.5.5h5.344l-6.394 6.82-4.639-3.711c-.199-.158-.485-.142-.666.038l-9 9c-.195.195-.195.51 0 .707.098.097.226.146.354.146.128 0 .256-.05.353-.146l8.684-8.684 4.65 3.72c.203.164.498.143.678-.048l6.635-7.077V17c0 .276.223.5.5.5.276 0 .5-.224.5-.5v-6.5l-.002-.008z" fill="#000" fill-rule="evenodd" />
    </svg>
  </div>
  <div class="feature__copy"><p>Lorem ipsum dolor sit amet</p></div>
</div>

Usage guidelines

Dos Donts
do iconDo use to present product features.
do-not iconDon't use to present product benefits.
do iconBest suited for use on a product page.

Implementation guidelines

Name Class Description
Group items as a list .flex .flex--wrap To create a scalable horizontal list, wrap Features inside an element with these classes applied.
Icon colour .icon--fg-dusk .icon--fg-storm-100 .icon--fg-storm-50 .icon--fg-white Change icon colour. Apply to the .icon element.