Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.


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%

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

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

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

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.


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.