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