Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Tables

Subscriber table

Roger Sterling Partner
1/10/14 2:35PM 12/3/13 12:55PM
Bert Cooper Partner
1/10/14 2:35PM 12/18/13 12:21AM
Don Draper Partner
1/10/14 2:35PM 12/18/13 12:21AM
Lane Pryce Partner
1/10/14 2:35PM 12/18/13 12:21AM

This table helps identify and segment the list subscribers based on the merge fields defined by the list owner. Upto 60 merge fields are allowed per list.

The Email Address column is absolutely-positioned, while the rest of the table scrolls horizontally when the table is larger than the viewport. At widths less than 640px, the Email Address column is no longer fixed, and the entire table scrolls horizontally.

Responsive tables

Breakpoints
Grids 960px or more Between 960px and 640px 640px or less
size1of8 12.5% 50% 50%
size1of4, size2of8 25% 100% 100%
size1of3 33.33% 100% 100%
size3of8 37.5% 100% 100%
size1of2, size2of4, size4of8 50% 50% 100%
size5of8 62.5% 100% 100%
size2of3 66.67% 100% 100%
size3of4, size6of8 75% 100% 100%
size7of8 87.5% 100% 100%
size1of1, size2of2, size3of3, size4of4, size8of8 100% 100% 100%
Use nochange with size1of2 and size1of3 for halves and thirds at all breakpoints.

Tables are declared with the mc-table class.

For screens larger than 1024px, the tables are 100% wide and span the entire available space. For screens 1024px and below, the tables scroll horizontally in case of an overflow.

For tables that shouldn't span the entire page width, declare them with the block helper class in addition to the mc-table class.

Elements inside tables

Type Notes Example
Buttons Buttons are mostly present in the last cell of a row, therefore also have a float-right. view
Badges Badges need to be inline-block-is when used inside tables. A badge
That's me!
URLs There are no rules for URLs inside tables. Clicked: http://www.theuxnewsletter.com/

Add-on classes

Credit card number Credit card type Expiration
Card ending in 0000 Amex 11/2011
For tables with less columns which don't require horizontal scrolling until 500px or less, use the scroll-small class along with the mc-table class.
Billed to Roger Sterling
Company Sterling, Cooper, Draper, Pryce.
Phone 1112223456
Email address sterling@scdp.com
Billing address New York, NY
Paid with Visa card ending in 0000

Use nowrap-small for text inside tables to not wrap when viewed on mobile devices (1024px or less screen widths).

Field label Field type Required? Visible? Put this tag in your content: Delete
email *|EMAIL|* or *|MERGE0|*
text
*||* or *|MERGE1|*
text
*||* or *|MERGE2|*

Child rows

  Send date Sends Open rate Click rate Unsubs Bounces Abuse
Parent A Jan 12 - Jul 11, 2014 10,000 44.4% 22.2% 36 28 0
Child A Jan 12 - Jul 11, 2014 1,000 10% 5% 5 10 0
Child B Jan 12 - Jul 11, 2014 1,000 10% 5% 5 10 0
Parent B Jan 12 - Jul 11, 2014 10,000 44.4% 22.2% 36 28 0
Parent C Jan 12 - Jul 11, 2014 10,000 44.4% 22.2% 36 28 0

Stats table cell

  Send date Sends Open rate
Baseline Jan 12 - Jul 11, 2014
  • 10,000
  • 44.4%
Row A   600 24.4%
Row B   450 60.0%
Row C   600 35.4%
Row D   545 12.1%