{"id":365,"date":"2018-06-11T13:31:14","date_gmt":"2018-06-11T13:31:14","guid":{"rendered":"http:\/\/bfuller.local\/wordpress\/styleguide\/?page_id=365"},"modified":"2025-11-10T15:49:08","modified_gmt":"2025-11-10T15:49:08","slug":"metrics","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/metrics\/","title":{"rendered":"Metrics"},"content":{"rendered":"\n

Use metrics to illustrate a fact that is concise and easy to consume. Avoid metrics that require footnotes, detailed explanations, or are very specific. Keep the text associated with a metric to just a few words to ensure that metrics are easy to skim.<\/p>\n\n\n\n

\n\n\n\n

Overview<\/h2>\n\n\n\n

Here’s an example metric:<\/p>\n\n\n

3.14<\/span>Value of pi<\/span><\/div>\n\n\n

On their own, metrics take up the full width of the page on desktop browsers. A more typical use case is to place metrics in columns:<\/p>\n\n\n\n

\n
98%<\/span>Success rate<\/span><\/div><\/div>\n\n\n\n
B+<\/span>Average letter grade<\/span><\/div><\/div>\n\n\n\n
16:9<\/span>Typical aspect ratio<\/span><\/div><\/div>\n<\/div>\n\n\n\n

Metrics can also be floated left or right. Floated metrics are narrower, taking up about a third of the page width on desktop browsers.<\/p>\n\n\n\n

Metrics have a light grey background by default. They also have a dark style, a clear style (dark text on transparent background), and an overlay style (light text on transparent background). The overlay style can be useful for situations where a metric may appear over an image or other background:<\/p>\n\n\n\n

\n
$1M<\/span>Annual budget<\/span><\/div><\/div>\n\n\n\n
#4<\/span>U.S. News rating<\/span><\/div><\/div>\n\n\n\n
16K<\/span>Individual donors<\/span><\/div><\/div>\n<\/div>\n\n\n\n

The size of metric text will scale as necessary for larger numbers, or if the metric becomes constrained in columns or on a mobile device. Generally, though, more concise metrics work best. Consider the following:<\/p>\n\n\n\n

\n
7,800,000,000<\/span>Global population <\/span><\/div><\/div>\n\n\n\n
7.8B<\/span>Global population<\/span><\/div><\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n

Adding a Metric<\/h2>\n\n\n\n

On sites using the Block Editor, metrics (\"Metric) can be added from the block library, under the Component Library section. Metric content can be edited directly, and options can be set in the sidebar.<\/p>\n\n\n\n

On sites using the older Classic Editor, metrics can be added by choosing the Metric pictograph (\"Metric) from the editor’s toolbar. Use the editor dialogue to add content and adjust options. To edit the metric later, double-click the metric preview to show the editor dialogue again.<\/p>\n","protected":false},"excerpt":{"rendered":"

Use metrics to illustrate a fact that is concise and easy to consume. Avoid metrics that require footnotes, detailed explanations, or are very specific. Keep the text associated with a metric to just a few words to ensure that metrics are easy to skim. Overview Here’s an example metric: On their own, metrics take up […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-365","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=365"}],"version-history":[{"count":13,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/365\/revisions"}],"predecessor-version":[{"id":2807,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/365\/revisions\/2807"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}