Key facts highlight important facts on the page, such as the research strategy on the research home page :).

10th for research impact in the REF 2014

Research performance

<div class="c-key-fact o-media">
  <div class="o-media__body">
    <h3 class="c-key-fact__title"><strong>10th</strong> for research impact in the REF 2014</h3>
    <div class="c-key-fact__content">
      <p>Research performance</p>
    </div>
  </div>
</div>

If you add in a link property it will become an a tag with a link:

10th for research impact in the REF 2014

Research performance

Learn more

 
<a href="http://www.york.ac.uk/research/performance/" class="c-key-fact o-media">
  <div class="o-media__body">
    <h3 class="c-key-fact__title"><strong>10th</strong> for research impact in the REF 2014</h3>
    <div class="c-key-fact__content">
      <p>Research performance</p>
      <p class="c-key-fact__learnMoreLink">Learn more</p>
    </div>
  </div>
</a>

You can have an icon:

10th for research impact in the REF 2014

Research performance

Learn more

 
<a href="http://www.york.ac.uk/research/performance/" class="c-key-fact o-media">
  <div class="o-media__picture">
    <i class="c-key-fact__icon c-icon c-icon--book c-icon--3x c-icon--fw"></i>
  </div>
  <div class="o-media__body">
    <h3 class="c-key-fact__title"><strong>10th</strong> for research impact in the REF 2014</h3>
    <div class="c-key-fact__content">
      <p>Research performance</p>
      <p class="c-key-fact__learnMoreLink">Learn more</p>
    </div>
  </div>
</a>

Multiple key facts can be used together within a row of a grid:

10th for research impact in the REF 2014

Research performance

Learn more

£500 million invested in facilities

World-class resources available to staff and partners

Learn more

A community of 2,000+ research students

supported by the York Graduate Research School

Learn more

 
<div class="o-grid__row">
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/performance/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--book c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>10th</strong> for research impact in the REF 2014</h3>
        <div class="c-key-fact__content">
          <p>Research performance</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/facilities/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--money c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>&pound;500 million</strong> invested in facilities</h3>
        <div class="c-key-fact__content">
          <p>World-class resources available to staff and partners</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/graduate-school/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--graduation-cap c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title">A community of <strong>2,000+</strong> research students</h3>
        <div class="c-key-fact__content">
          <p>supported by the York Graduate Research School</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
</div>

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

10th for research impact in the REF 2014

Research performance

Learn more

£500 million invested in facilities

World-class resources available to staff and partners

Learn more

A community of 2,000+ research students

supported by the York Graduate Research School

Learn more

10th for research impact in the REF 2014

Research performance

Learn more

£500 million invested in facilities

World-class resources available to staff and partners

Learn more

A community of 2,000+ research students

supported by the York Graduate Research School

Learn more

10th for research impact in the REF 2014

Research performance

Learn more

£500 million invested in facilities

World-class resources available to staff and partners

Learn more

A community of 2,000+ research students

supported by the York Graduate Research School

Learn more

 
<div class="o-grid__row o-grid__row--alt1 js-equal-height-row">
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/performance/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--book c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>10th</strong> for research impact in the REF 2014</h3>
        <div class="c-key-fact__content">
          <p>Research performance</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/facilities/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--money c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>&pound;500 million</strong> invested in facilities</h3>
        <div class="c-key-fact__content">
          <p>World-class resources available to staff and partners</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/graduate-school/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--graduation-cap c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title">A community of <strong>2,000+</strong> research students</h3>
        <div class="c-key-fact__content">
          <p>supported by the York Graduate Research School</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
</div>
<div class="o-grid__row o-grid__row--alt2 js-equal-height-row">
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/performance/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--book c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>10th</strong> for research impact in the REF 2014</h3>
        <div class="c-key-fact__content">
          <p>Research performance</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/facilities/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--money c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>&pound;500 million</strong> invested in facilities</h3>
        <div class="c-key-fact__content">
          <p>World-class resources available to staff and partners</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/graduate-school/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--graduation-cap c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title">A community of <strong>2,000+</strong> research students</h3>
        <div class="c-key-fact__content">
          <p>supported by the York Graduate Research School</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
</div>
<div class="o-grid__row o-grid__row--alt3 js-equal-height-row">
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/performance/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--book c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>10th</strong> for research impact in the REF 2014</h3>
        <div class="c-key-fact__content">
          <p>Research performance</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/facilities/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--money c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>&pound;500 million</strong> invested in facilities</h3>
        <div class="c-key-fact__content">
          <p>World-class resources available to staff and partners</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <a href="http://www.york.ac.uk/research/graduate-school/" class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--graduation-cap c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title">A community of <strong>2,000+</strong> research students</h3>
        <div class="c-key-fact__content">
          <p>supported by the York Graduate Research School</p>
          <p class="c-key-fact__learnMoreLink">Learn more</p>
        </div>
      </div>
    </a>

  </div>
</div>

Edge cases

Non-linked facts in alt rows need to not have a hover colour:

10th for research impact in the REF 2014

Research performance

£500 million invested in facilities

World-class resources available to staff and partners

A community of 2,000+ research students

supported by the York Graduate Research School

<div class="o-grid__row o-grid__row--alt2 js-equal-height-row">
  <div class="o-grid__box o-grid__box--third">
    <div class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--book c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>10th</strong> for research impact in the REF 2014</h3>
        <div class="c-key-fact__content">
          <p>Research performance</p>
        </div>
      </div>
    </div>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <div class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--money c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title"><strong>&pound;500 million</strong> invested in facilities</h3>
        <div class="c-key-fact__content">
          <p>World-class resources available to staff and partners</p>
        </div>
      </div>
    </div>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <div class="c-key-fact o-media">
      <div class="o-media__picture">
        <i class="c-key-fact__icon c-icon c-icon--graduation-cap c-icon--3x c-icon--fw"></i>
      </div>
      <div class="o-media__body">
        <h3 class="c-key-fact__title">A community of <strong>2,000+</strong> research students</h3>
        <div class="c-key-fact__content">
          <p>supported by the York Graduate Research School</p>
        </div>
      </div>
    </div>

  </div>
</div>

Options

Molecules

  • key-fact
    • 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
    • link: target URL for the cta button