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:

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

Statistic

• Add copy elaborating on the ranking displayed.

Source

• You can add a source to cite the ranking.

Ranking with statistic and source:

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. 

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 width of this block (with no background color) is expanded in 5 Custom Post Types – Posts, Blogs, Update, RTI, and Spotlights. Find the code for this in _layout.scss