Content Components

Landing Page - Featured Rankings

This style can be applied uing the Landing Page - Featured Rankings paint layout (asset #348471). Create a folder containing data record assets, use metadata fields to specify the detail of the ranking. dcterms.subject for the primary stat (big blue text), dcterms.description for the smaller grey text, and optionally dcterms.abstract for the additional information tool-tip. The paint layout will automatically adapt to fit up to four rankings.

Setup

Example

Code example

<div class="grid-content grid-2-column">
  <div class="grid-block">
    <div class="ranking-fact">Top 150</div>
    <div class="ranking-detail">in the world for rankings</div>
  </div>
  <div class="grid-block">
    <div class="ranking-fact">Top 200</div>
    <div class="ranking-detail">in the world for rankings
      <span class="fa fa-info-circle">
        <div class="ranking-note"><p>This ranking has an additional note with the source of the rankings or some other detail that might be important.</p></div>
      </span>
    </div>
  </div>
</div>

Last updated
31 August 2018 @ 11:57 — Dean Robinson