Text replaces the icon, this allows for rankings and percentage to be included on pages.

Facts in alt rows match the background colour that they are on:

<div class="o-grid__row o-grid__row--alt1 js-equal-height-row">
  <div class="o-grid__box o-grid__box--half">
    <div class="c-key-fact o-media">
      <div class="o-media__picture o-media__picture--text">
        <span class="c-key-fact__text">2<sup>nd</sup></span>
      </div>
      <div class="o-media__body o-media__body--text">
        <h3 class="c-key-fact__title">in the UK for chemistry</h3>
        <div class="c-key-fact__content">
          <p>Times and Sunday Times Good University Guide 2020</p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid__box o-grid__box--half">
    <div class="c-key-fact o-media">
      <div class="o-media__picture o-media__picture--text">
        <span class="c-key-fact__text">3<sup>rd</sup></span>
      </div>
      <div class="o-media__body o-media__body--text">
        <h3 class="c-key-fact__title">in the UK for chemistry</h3>
        <div class="c-key-fact__content">
          <p>Guardian University Guide 2020</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="o-grid__row o-grid__row--alt2 js-equal-height-row">
  <div class="o-grid__box o-grid__box--half">
    <div class="c-key-fact o-media">
      <div class="o-media__picture o-media__picture--text">
        <span class="c-key-fact__text">2<sup>nd</sup></span>
      </div>
      <div class="o-media__body o-media__body--text">
        <h3 class="c-key-fact__title">in the UK for chemistry</h3>
        <div class="c-key-fact__content">
          <p>Times and Sunday Times Good University Guide 2020</p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid__box o-grid__box--half">
    <div class="c-key-fact o-media">
      <div class="o-media__picture o-media__picture--text">
        <span class="c-key-fact__text">3<sup>rd</sup></span>
      </div>
      <div class="o-media__body o-media__body--text">
        <h3 class="c-key-fact__title">in the UK for chemistry</h3>
        <div class="c-key-fact__content">
          <p>Guardian University Guide 2020</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="o-grid__row o-grid__row--alt3 js-equal-height-row">
  <div class="o-grid__box o-grid__box--half">
    <div class="c-key-fact o-media">
      <div class="o-media__picture o-media__picture--text">
        <span class="c-key-fact__text">2<sup>nd</sup></span>
      </div>
      <div class="o-media__body o-media__body--text">
        <h3 class="c-key-fact__title">in the UK for chemistry</h3>
        <div class="c-key-fact__content">
          <p>Times and Sunday Times Good University Guide 2020</p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid__box o-grid__box--half">
    <div class="c-key-fact o-media">
      <div class="o-media__picture o-media__picture--text">
        <span class="c-key-fact__text">3<sup>rd</sup></span>
      </div>
      <div class="o-media__body o-media__body--text">
        <h3 class="c-key-fact__title">in the UK for chemistry</h3>
        <div class="c-key-fact__content">
          <p>Guardian University Guide 2020</p>
        </div>
      </div>
    </div>
  </div>
</div>

Options

Molecules

• key-fact-no-icon
  • content: text to go in the main body (required)
  • title: text to go in the header (required)
  • icon: name of icon to go above the title
  • text: A number
  • sup: A thingy