Menu

USP - Bordered

Open fullscreen 
<div class="mp c-usp c-usp c-usp--bordered">
  <div class="u-flow ">
    <h3 class="c-h c-h--step-2 c-usp__title">Superior speed. Peerless precision.</h3>
    <div class="mp o-prose u-step--1">
      <p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>
    </div>
  </div>
</div>
{
  "title": "Superior speed. Peerless precision.",
  "content": "<p>Class-leading particle sizing performance that generates the robust, reliable data you need</p>",
  "classes": "c-usp c-usp--bordered"
}

Blank HTML templates

Grid of four, icon & text, left-aligned
<div class="o-grid o-grid--of-four">

  <!-- First USP block: duplicate this -->
  <div class="mp c-usp">
    <div class="u-flow">
      <div class="c-usp__icon">
        <img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
      </div>
      <h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
      <div class="mp o-prose u-step--1">
        <p>FORJ is designed for less thermal stress and reduced risk of contamination - which means low maintenance and high productivity.</p>
      </div>
    </div>
  </div>

  <!-- etc. -->

</div>
Grid of three, eyebrow & text, left-aligned
<div class="o-grid o-grid--of-three">

  <!-- First USP block: duplicate this -->
  <div class="mp c-usp">
    <div class="u-flow ">
      <span class="c-usp__eyebrow">Greater flexibility</span>
      <h3 class="c-h c-h--step-2 c-usp__title">Impressive particle sizing performance</h3>
      <div class="mp o-prose u-step--1">
        <p>High sample throughput and a measurement size range from 10nm to 3.5mm</p>
      </div>
    </div>
  </div>

  <!-- etc. -->

</div>
Grid of seven (or more), icons only, centered
<div class="o-grid o-grid--of-three u-justify-center">

  <!-- First USP block: duplicate this -->
  <div class="mp c-usp c-usp c-usp--center">
    <div class="u-flow u-text-center">
      <div class="c-usp__icon">
        <img src="https://p3.aprimocdn.net/malvernpanalytical/etc" />
      </div>
      <h3 class="c-h c-h--step-1 c-usp__title">Handles the toughest conditions</h3>
    </div>
  </div>

  <!-- etc. -->

</div>

A USP can include a few elements:

  • Icon (optional)
  • Eyebrow (optional)
  • Title (required)
  • Body text (optional)

When using USPs, please follow these guidelines:

  • Keep the same layout for all USPs within a group
  • Icon and eyebrow are mutually exclusive - you can have one or the other, not both
  • Grid
    • Use a three- or four-column grid depending on the number of USPs
    • 2, 3, 5, or 6 USPs: three columns
    • 4, 7, or 7+ USPs: four columns
  • Alignment
    • If body text or eyebrow is present, all elements in the USP are left-aligned
    • If there's no body text or eyebrow, the USP may be centered
  • Font size
    • Body text font size is always step -1
    • Title text is step 2 when using a three-column grid
    • or step 1 when using a four-column grid

Props

Name Type Description
title string
content html HTML passed to the prose field
link string (deprecated)
eyebrow string
icon.svg svg HTML/SVG which is output raw
icon.url string image url