7.1 #permalink Metric Card

Toggle example guides Toggle HTML markup

A card for showing a metric along with an optional link. Used in PE extensively. Comes in a variety of colors.

Examples
Default styling
Metric
1234
units
Details
.ggPrimary1
Orange
Metric
1234
units
Details
.ggPrimary2
Blue
Metric
1234
units
Details
.ggPrimary3
Green
Metric
1234
units
Details
.ggPrimary5
Grey
Metric
1234
units
Details
.ggSecondary1
Blue
Metric
1234
units
Details
Markup 
<div class="col_defaultBg box_padded1">
<div class="metricCard metricCard_[modifier class] grid-12 grid-md-6 grid-lg-3 layout_center">
  <div class="metricCard-title triangle-parent box_padded1">
     Metric
     <div class="triangle triangle_bottom triangle_[modifier class]"></div>
  </div>
  <div class="metricCard-body col_white box_verticalPadded4 layout_center">
     <div class="metricCard-metric">1234</div>
     <div class="metricCard-label">units</div>
  </div>
  <a class="metricCard-subLink link_subtle box_verticalPadded1 layout_rel col_white" href="#">
     <span class="metricCard-subLinkText">
        Details
     </span>
  </a>
</div>
</div>
Source: modules/07_large_elements/metricCard.less, line 4