Mailchimp Pattern Library

Our pattern library used to build the Mailchimp application.

Feedback Elements

Feedback blocks

 
1
<div class="feedback-block warning section" role="status">
2
  <div class="lastUnit size1of1">
3
    <div class="c-media">
4
      <div class="c-mediaImage v-isFreddicon">
5
        <span class="freddicon warn-circle"></span>
6
      </div>
7
      <div class="c-mediaBody--centered">
8
        <h4>Account status
9
        </h4>
10
        <p> You closed your account on Nov 29, 2013 07:00 pm 
11
        </p>
12
      </div>
13
    </div>
14
  </div>
15
</div>
16

Feedback blocks are used to provide action-based feedback messages or to convey informational and/or critical account-related messages.

Feedback messages are categorized into four types based on severity:

  • Success: indicates that an action processed successfully or that there are no account-related issues. The success helper class gives this block its green color.
  • Warning: indicates that an action failed at this time that otherwise would be processed correctly. If the message is related to an account status then campaign sending ability might be affected to some extent. Use the warning class for the yellow background color.
  • Error: indicates that an action failed completely. If the message is related to an account status then the campaigns will definitley not send. Use the error class for the red background color.
  • Info: just provides information related to a performed action. Use the info class for the blue background color.

These blocks are built around a standard media block and show an icon relative to their severity. For Freddicons add v-isFreddicon to the c-mediaImage container to get the alignment right.

Upgrade Action Block

This block is a way to denote an action requires a different pricing plan. While it behaves similar to a feedback block, it's different in a couple key ways: It's supported with an illustration instead of an icon and is positioned relative to other UI.

If the block is dismissable, the Dismiss action should follow the Upgrade Now action so that the user can distinguish between the text and actions.

It should sit in close proximity to whatever action or feature it's related to. To voice a consistent message, the default illustration is preferred.

Example

Illustration of caped woman leaping over mountain

Upgrade your account to unlock new features

The list you're importing has more contacts than your account allows. You can upgrade your account, archive, or delete contacts

x
 
1
<div data-dojo-type="mojo/widgets/UpgradeActionBlock" data-dojo-props="onCtaPressCallback:window.exampleFunctionName">
2
</div>
3

This block is designed to be instantiated programmatically but can be declared.

A button, body title, body copy, and image are all required. Smart defaults are set for all except the body. These defaults can be overridden through props.

An optional boolean isDismissible can be added through props to show the dismiss button. Default value is false.

Attach a function to the dismissConfig.onDismissPressCallback prop to use the callback mechanism.

A button event listener is configurable via callback or dojo/topic.

Attach a function to the onCtaPressCallback prop to use the callback mechanism.

If dojo/topic is needed, pass the topic name as a prop, topicName: cool/topic/name. Do not use both a callback and dojo/topic within a single instance.

Badges

Base Success Warning Error Information New! Pro 1,234
x
 
1
<span class="badge">Base</span>
2
<span class="badge success">Success</span>
3
<span class="badge warning">Warning</span>
4
<span class="badge error">Error</span>
5
<span class="badge info">Information</span>
6
<span class="badge new">New!</span>
7
<span class="badge pro">Pro</span>
8
<span class="badge notification">1,234</span>
9

Badges are used as a form of inline feedback and labeling. They are typically used to provide additional context to components already on the page.

The Pro badge is reserved for identifying Pro-level features and accounts.

Toaster messages

x
 
1
<div dojoattachpoint="clipNode" class="dijitToasterClip" id="toast" widgetid="toast"> 
2
  <div dojoattachevent="onclick:onSelect" dojoattachpoint="containerNode" class="dijitToasterContainer"> 
3
    <div dojoattachpoint="contentNode" class="dijitToasterContent">Toaster Message
4
    </div> 
5
  </div> 
6
</div>
7

Toaster messages are shown at the bottom-left of the page and stay for ~2 seconds, providing immediate feedback in response to a user action.

These are most usually generated through JS or PHP.

Inline toasts

Cheers!
x
 
1
<div data-dojo-type="mojo/widgets/InlineToast" data-dojo-props="message: 'Cheers!', variant: 'light'">
2
</div>
3

Inline toasts are a variant of toaster message, providing immediate feedback in response to a user action somewhere inline on the page.

These have two style variants, dark and light, to be used based context of their placement.

Callout Tips

x
11
 
1
<div class="c-callout"> 
2
  <div data-dojo-type="mojo/widgets/callout" data-mc-el="callout">Single column.
3
  </div> 
4
</div>
5
<div class="c-callout"> 
6
  <div data-dojo-type="mojo/widgets/callout" data-mc-el="callout" data-dojo-props="columns: 2">Two columns 1.
7
  </div> 
8
  <div data-dojo-type="mojo/widgets/callout" data-mc-el="callout" data-dojo-props="columns: 2">Two columns 2.
9
  </div> 
10
</div>
11

Defaults to yellow light-bulb freddicon and single column. To manually set columns, use data-dojo-props="columns: 12". To manually set the freddicon, use data-dojo-props="icon: 'icon-name'".

If you need a full-width single column with centered text in the middle, use data-dojo-props="columns: '1 centered'". All the options.