Component name

Also know as: rankings card, stats card 

Design

The ranking block has two formats:

...

You can add a background color to the two formats:

Image RemovedImage Added

Use

...

When

You use this block when displaying rankings or statistics (ex: average salary).

Editorial Guidelines

Follow our general Web Copy General Guidelines in addition to the following:

Implementation

ACF Fields

Rankings

Number Prefix

• Use this field to pick a prefix if needed.

Number

• Add the number of the ranking. 

Number Suffix

• Use this field to pick a suffix if needed.

Statistic

• Add copy elaborating on the ranking displayed.

Source

• You can add a source to cite the ranking.

Ranking with statistic and source:Image Removed

Image Added

Introduction

• Add a heading and supporting copy above the cards.

Footer

• Add a footnote or button(s) below the block.

Configuration

Number Color

• You can change the color of the numbers.
  • The options are red, blue, and gray.

Rankings Style

• You can choose between the standard or circle style for rankings. 

Background

• You can choose the color of the background of the block. between white (none) or blue background of the block. 

Stack Rankings

• Checking this box will switch slider to stacking the rankings.

Two Columns

• You will see this field if Stack Rankings is checked.
• Checking this field will have the rankings in 2 columns instead of 3 columns.

Anchor ID

• Add an Id to target the block on the page with an anchor link.

Additional Notes

• You can add more than three rankings in a row, but after three, the block will add a swiper at the bottom to swipe through rankings. 
• Try to keep the copy as short as possible with multiple rankings.The .
• To expanded the width of this block (with no background color) to posts, blogs, Update, and spotlights, you will need to add the class "expanded-width" to the Additional CSS Class(es) field under the Block tab on the right side of the editor.
  • Coming soon: The width of this block (with no background color) is automatically expanded in
5
• • 4 Custom Post Types – Posts, Blogs, Update
, RTI
• • , and Spotlights.
Find the code for this in _layout.scss
• •