Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Slats

Generic

Slats represent a unit with associated data and actions. These can be found throughout the application to represent campaigns, audiences, automation triggers, and more.

 
1
<div class="section slats"> 
2
  <ul> 
3
    <li class="relative selfclear"> 
4
      <div class="selfclear"> 
5
        <div class="meta unit size3of4"> 
6
          <div class="lastUnit size1of1 !padding--lv0"> 
7
            <span title="Success" class="freddicon tick-circle-large float-left hide-phone"></span> 
8
            <h4>
9
              <a href="#">In pellentesque faucibus vestibulum. Nulla at.</a>
10
            </h4> 
11
            <p class="dim-el">
12
              <span role="presentation" class="swatch green show-phone" title="success"></span>Some other text
13
            </p> 
14
          </div> 
15
        </div> 
16
        <div class="meta-actions lastUnit size1of4 alignr"> 
17
          <a href="#" class="button-small p0" title="Configure">Configure</a> 
18
        </div> 
19
      </div> 
20
    </li> 
21
  </ul> 
22
</div>
23

Lists dashboard

x
90
 
1
<div class="section slats"> 
2
  <ul> 
3
    <li class="relative selfclear"> 
4
      <div class="selfclear"> 
5
        <div class="meta unit size3of4"> 
6
          <div class="unit size1of2 !padding--lv0"> 
7
            <div class="move-handle freddicon vellip float-left">
8
            </div> 
9
            <input type="checkbox" data-dojo-type="mojo/analytics/parts/SelectCheckBox" value="1" class="av-checkbox"> 
10
            <h4>
11
              <a href="#">Mandrill Welcome Email Test</a>
12
            </h4> 
13
            <p class="dim-el">Created Aug 07, 2013 04:00 pm
14
            </p> 
15
            <p> 
16
              <span class="freddicon star-fill"></span> 
17
              <span class="freddicon star-fill"></span> 
18
              <span class="freddicon star-fill"></span> 
19
              <span class="freddicon star-fill"></span> 
20
              <span class="freddicon graystar-fill"></span> 
21
            </p> 
22
          </div> 
23
          <div class="lastUnit size1of2 !padding--lv0 stats-container hide-phone"> 
24
            <div class="data inline-block-i float-left"> 
25
              <h4>6
26
              </h4> 
27
              <p class="dim-el">Subscribers
28
              </p> 
29
            </div> 
30
            <div class="data inline-block-i float-left"> 
31
              <h4>0.0%

Reports dashboard

  • Mailchimp UX Issue 9 - Patterns

    regular · Sent Jul 25, 2013 05:03 pm

    2,065

    Subscribers

    55.8%

    Open rateOpens

    1,147

    Open rateOpens

    13.7%

    Click rateClicks

    281

    Click rateClicks

    • Subscribers2,065
    • Open rate55.8%
    • Click rate13.7%
x
101
 
1
<div class="section slats"> 
2
  <ul> 
3
    <li class="relative selfclear"> 
4
      <div class="meta unit size3of4"> 
5
        <div class="unit size5of8 !padding--lv0"> 
6
          <input type="checkbox" data-dojo-type="mojo/analytics/parts/SelectCheckBox" class="av-checkbox"> 
7
          <h4>
8
            <a href="#">Mailchimp UX Issue 9 - Patterns</a>
9
          </h4> 
10
          <p>
11
            <span class="msg dim-el capitalize">regular · </span>
12
            <span class="msg dim-el">Sent Jul 25, 2013 05:03 pm</span>
13
          </p> 
14
        </div> 
15
        <div class="lastUnit size3of8 !padding--lv0 stats-container hide-phone"> 
16
          <div class="data inline-block-i float-left"> 
17
            <h4>2,065
18
            </h4> 
19
            <p class="dim-el">Subscribers
20
            </p> 
21
          </div> 
22
          <div class="data inline-block-i float-left"> 
23
            <div class="percentage-container"> 
24
              <h4>55.8%
25
              </h4> 
26
              <p class="dim-el">
27
                <span class="hide-mobile">Open rate</span>
28
                <span class="show-mobile">Opens</span>
29
              </p> 
30
            </div> 
31
            <div class="number-container"> 
32
              <h4>1,147