Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Lists

Leaders list

Leaders lists are usually to display statistics. The label is on the left side while the value is on the right. A consecutive line of dots separate the label and value.

  • List average 61.7%
  • Industry average 61.7%
 
1
<ul class="leaders"> 
2
  <li>
3
    <span>List average</span> 
4
    <span class="font-weight--bold">61.7%</span>
5
  </li> 
6
  <li>
7
    <span>Industry average</span> 
8
    <span class="font-weight--bold">61.7%</span>
9
  </li> 
10
</ul>
11

Add the class leaders to the <ul> element and use <span> tags to wrap labels and values.

Linear dots

To make a linear list use the linear-list class in a ul element.

  • item uno
  • item dos
  • item tres
x
 
1
<ul class="linear-list dots"> 
2
  <li>item uno
3
  </li> 
4
  <li>item dos
5
  </li> 
6
  <li>item tres
7
  </li> 
8
</ul>
9

To separate the items with dots use the dots class.

Linear spaces

Items on a linear list are separated by spaces.

  • item uno
  • item dos
  • item tres
x
 
1
<ul class="linear-list spaces"> 
2
  <li>item uno
3
  </li> 
4
  <li>item dos
5
  </li> 
6
  <li>item tres
7
  </li> 
8
</ul>
9

To separate the items with spaces use the spaces class.

Unordered list with link

Regular style for unordered list with link elements in the list items

x
12
 
1
<ul class="regular"> 
2
  <li class="selected">
3
    <a href="javascript:;">item one</a>
4
  </li> 
5
  <li>
6
    <a href="javascript:;">item two</a>
7
  </li> 
8
  <li>
9
    <a href="javascript:;">item three</a>
10
  </li> 
11
</ul>
12

Add class regular to the <ul> element.

Notice the state for<li> elements with the selected class.

Activity timeline

To convert a list to an activity timeline we need to wrap the list in a div that has the class c-activityTimeline. The div is needed in order to style the date associated with the list. A relative class is also required on the list. We need relative because we are absolute positioning some elements inside the list items.

The timeline pattern requires some extra markup inside the list items in order to display time and icons.

Yesterday
x
25
 
1
<div class="c-activityTimeline"> 
2
  <div class="activity-date inline-block font-weight--bold !margin-bottom--lv6 alignc">Yesterday
3
  </div> 
4
  <ul id="chatter-list" class="relative"> 
5
    <li id="chatter-msg-1854329" class="flex padding--lv3 !padding-left--lv0 !margin-bottom--lv6"> 
6
      <div class="activity-meta relative alignc"> 
7
        <div class="activity-time">1:23pm
8
        </div> 
9
        <div class="activity-icon inline-block-i success"> 
10
          <div class="activity-sprite subscribe">
11
          </div> 
12
        </div> 
13
      </div> 
14
      <div class="activity-content"> 
15
        <h4 class="p full-width"> 
16
          <a href="#" target="_blank" rel="noopener noreferrer">1 new subscribers to "Mailchimp UX Newsletter"</a> 
17
        </h4> 
18
        <div class="!margin-bottom--lv3"> Nice! Guess people like what you're saying. Here are a few: 
19
          <a href="#">freddie@mailchimp.com</a>. 
20
        </div> 
21
      </div> 
22
    </li> ... 
23
  </ul> 
24
</div>
25

Activity is grouped by date. The date is located outside of the unordered list.

The date and icon are located inside of activity-meta div.

For time add activity-time for icons add activiy-icon and activity-sprite.

Content goes inside activity-content section.