Stats

Body

Stats Intent and Usage

Stats blocks can be used to display "at a glance" information about the information that MDC holds. They help surface key factoids about conservation topics in a minimalistic, easy-to-digest format. They are another way beyond imagery and text to provide information to site visitors and encourage engagement with MDC as well as an understanding of what the department does. 

Body

Stats Design Guidelines

  • These are intentionally simple, presenting up to two stats in a single block, where each stat is represented by an icon, label, and value. 
  • Additionally, each individual stats block (which may contain two statistics) includes a title and optional button link.

Stats Editorial Guidelines

  • Use brief and succinct wording to label the stat as shown in examples below. 
  • Use numbers and other characters such as , . % and $ to represent the stat value. 
  • Enter a brief title that encompasses a topic relevant to the stat or stats. 
  • If desired, specify a destination and display text to encourage exploration of the content by users.
Body

Single-column example

This example shows two stats within a single block. When placing a two-stat block, it is ideal to place it in a space that is 66%, 75% or 100% width (either a single-column or two-column section with 66/33 or 75/25 layout).

 

Title

Stats Title

Statistics Elements
Text

Percent of Missouri residents who hunt or fish

Statistic

75

fish
Text

Number of Missouri flower species that are protected

Statistic

55

Body

Two-column example

In the below example, a two-column section has been added to the page, with 50/50 layout. On the left we've added a single stat block with a single stat, and on the right we entered sample text.

Title

Stats Title

Statistics Elements
Text

Stats text.

Statistic

99

fish
Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Body

Stats Examples on the MDC Website