Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Navigation

Local navigation is used to jump between pages that categorically fall under the same (main) section. The local nav shown in the example above is from the Account section and it is present on all pages under /account.

If there are secondary pages in a section, then links to those pages are shown inside hover-list menus. A blue-colored link indicates the page/sub-section currently in view.

The local nav spans the full width of the page up to 640px, at which point it collapses into a stacked menu.

A switcher is used in lists, campaigns and reports dashboard page headers to quickly navigate to a different list, campaign, or report, respectively.

Tabs

Tab1: Column 1

Column 2

Tab2: Column 1

Column 2

Tab3: Column 1

Column 2

We have re-styled Dijit's tab container and content panes. Use dijit-tabs container as a wrapper for the TabContainer and use lastGroup for wrapping the tab contents inside the ContentPane.

This will ensure that the unit and lastUnit classes will not add extra padding inside the tab contents.