Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Stats & Data

Meter blocks

Meter blocks are composed of two main blocks. The top part is where the labels and stats are located, and the bottom part is the meter.

Example

638 Opens 81.0%
 
1
<div class="unit size1of2 relative"> 
2
  <div class="meter-data full-width selfclear !margin--lv0 alignr"> 
3
    <span class="p font-weight--bold float-left !margin--lv0">638 Opens</span> 
4
    <span class="h4 !margin--lv0"> <a href="javascript:;" title="View">81.0%</a> </span> 
5
  </div> 
6
  <div class="meter !margin-bottom--lv3"> 
7
    <span style="width:81%"></span> 
8
  </div> 
9
</div>
10

The two main blocks should be wrapped around some kind of unit. In this example they're wrapped in a size1of2 unit.

The width of the bar is fed by the controller to make it dynamic, but it can be hard coded as well.

The meter color can be adjusted to provide additional context and feedback. Adding a meter--warning or meter--error class can indicate a warning or problem the customer may want to address. Adding a meter--neutral class can be used to communicate data with no positive or negative connotation like subscriber growth.

The meter should not be the sole indicator of information. It should accompany additional copy for accessibility.

Large meter

Negative Positive
You
Here Timbuktu
You
x
 
1
<div data-dojo-type="mojo/widgets/MeterLarge" data-dojo-props="value:40, type:'spectrum'">
2
</div>
3

A larger version of our meter with labels and a width animation.

The spectrum type represents how we visualize reputation scores. Without spectrum, the pattern will fall back to our default meter colors.

Adding meterClass:'className' to data-dojo-props allows the large meter to adopt other colors if necessary.

No-data block

You haven't created an audience yet

Audiences are where your contacts (aka subscribers!) live. You'll need one of these to send campaigns to the outside world.

x
 
1
<div data-dojo-type="mojo/widgets/NoDataBlock" data-dojo-props="type: 'lists'">
2
</div>
3

No-data blocks are used to show empty states.

We use different illustrations to associate the type of missing data with the no-data message.

Generally the block headers use sentence-case.

Stat block

Stat blocks work in grid units. Just add stat-block class to the unit element.

27

Opened

22

Clicked

0

Unsubscribed

x
29
 
1
<div class="line"> 
2
  <div class="stat-block alignc unit size1of3"> 
3
    <h3 class="fsn !margin--lv0"> 
4
      <a title="View" href="javascript:;">27</a> 
5
    </h3> 
6
    <p> 
7
      <span class="hide-phone">Opened</span> 
8
      <span class="show-phone freddicon open !margin--lv0"></span> 
9
    </p> 
10
  </div> 
11
  <div class="stat-block alignc unit size1of3"> 
12
    <h3 class="fsn !margin--lv0"> 
13
      <a title="View" href="javascript:;">22</a> 
14
    </h3> 
15
    <p> 
16
      <span class="hide-phone">Clicked</span> 
17
      <span class="show-phone freddicon click !margin--lv0"></span> 
18
    </p> 
19
  </div> 
20
  <div class="stat-block alignc lastUnit size1of3 !margin-bottom--lv8"> 
21
    <h3 class="fsn !margin--lv0">0
22
    </h3> 
23
    <p> 
24
      <span class="hide-phone">Unsubscribed</span> 
25
      <span class="show-phone freddicon unsub !margin--lv0"></span> 
26
    </p> 
27
  </div> 
28
</div>
29

You can have any type of content inside the stat blocks, but usually they follow a pattern of title and data.

Use heading tags for the titles and paragraph tags for the content of the stats.

In this example we are also using some utility classes to hide and show content at different break points.

hide-phone will hide content if in phone break point (640px). show-phone Will show content if viewport is within the phone break point (640px).

Stat animation

Add an animation between a two numbers to create delightful motion. Adjusting number of decimals to animate, animation duration, and animation delay all allow flexibility.

Total opens

50

Successful deliveries

0%

x
 
1
<div data-dojo-type="mojo/widgets/InterpolateNumber">200
2
</div>
3
<span data-dojo-type="mojo/widgets/InterpolateNumber" data-dojo-props="startVal:50, animDelay:2500">210</span>
4

By default the widget animates from 0 to the number in the widget DOM element.

Pass widget settings via data-dojo-props

Some of the settings include: startVal, numDecimals, animDuration, animDelay, easing