GNWT Base Theme Style Guide

4.16 components.metric Metric

Toggle example guides Toggle HTML markup

A Metric is effectively a block used to display some type of data point, such as a progress meter, small chart or value, in a consistent fashion across the property.

Example

Data Point Title

5 of 14 completed

Markup: components/metric/metric.twig
<div class="metric {{modifier_class}}">
  <h2>Data Point Title</h2>
  <div class="metric--lead">
    <p>5 of 14 completed</p>
  </div>
</div>
Source: sass/components/metric/_metric.scss, line 1