Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Navigation

 
1
<p class="mobile-top-nav !margin--lv0 full-width font-weight--bold">
2
  <a href="#">Navigation</a>
3
<ul class="local-nav selfclear"> 
4
  <li class="current"> 
5
    <a href="#/account/">Overview</a> 
6
  </li> 
7
  <li> 
8
    <ul class="hover-list"> 
9
      <li>
10
        <a href="#">Settings</a> 
11
        <ul> 
12
          <li>
13
            <a href="#/account/users">Users & account details</a>
14
          </li> 
15
          <li>
16
            <a href="#/account/contact">Contact information</a>
17
          </li> 
18
          <li>
19
            <a href="#/account/data">Manage my data</a>
20
          </li> 
21
          <li>
22
            <a href="#/account/close">Close my account</a>
23
          </li> 
24
        </ul> 
25
      </li> 
26
    </ul> 
27
  </li> 
28
  <li> 

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.

x
23
 
1
<div class="lastUnit size1of1 header overflow-visible selfclear"> 
2
  <h1 class="selfclear"> 
3
    <span class="title" title="listName">listName</span> 
4
    <a class="sub-count" href="#" title="View all subscribers in this list">1,977</a> 
5
  </h1> 
6
  <ul class="hover-list"> 
7
    <li> 
8
      <a href="javascript:;">Switch list</a> 
9
      <ul class="switcher"> 
10
        <li>
11
          <a href="#">List 1</a>
12
        </li> 
13
        <li>
14
          <a href="#">List 2</a>
15
        </li> 
16
        <li>
17
          <a href="#">List 3</a>
18
        </li> 
19
      </ul> 
20
    </li> 
21
  </ul> 
22
</div>
23

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

x
49
 
1
<div class="line main-section dijit-tabs"> 
2
  <div class="lastUnit size1of1"> 
3
    <div data-dojo-type="dijit/layout/TabContainer" dolayout="false"> 
4
      <div class="unit size1of1" data-dojo-type="dijit/layout/ContentPane" title="Tab One" data-dojo-props="selected:true"> 
5
        <div class="lastGroup size1of1"> 
6
          <div class="sub-section"> 
7
            <div class="unit size1of2 maintain-width"> 
8
              <h4>Tab1: Column 1
9
              </h4> 
10
            </div> 
11
            <div class="lastUnit size1of2"> 
12
              <h4>Column 2
13
              </h4> 
14
            </div> 
15
          </div> 
16
        </div> 
17
      </div> 
18
      <div data-dojo-type="dijit/layout/ContentPane" title="Tab Two"> 
19
        <div class="lastGroup size1of1"> 
20
          <div class="sub-section"> 
21
            <div class="unit size1of2 maintain-width"> 
22
              <h4>Tab2: Column 1
23
              </h4> 
24
            </div> 
25
            <div class="lastUnit size1of2"> 
26
              <h4>Column 2
27
              </h4> 
28
            </div> 

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.