arrow-downarrow-leftarrow-rightarrow-upavatarcameracartchevron-upchevron-leftchevron-rightchevron-upclosecommentemailfullscreen-closefullscreen-opengridheadphonesheart-filledheart-openlockmap-geolocatormap-pushpinmenuminusng-borderpauseplayplusprintsearchsharefacebookgithubg+instagramlinkedinlinkedin_inpinterestpinterest_psnapchatsnapchat_2tumblrtwittervimeovinewhatsappspeakerstar-filledstar-openzoom-inzoom-out

UI Patterns

Whenever possible, adhere to the following library of common user interface patterns.

 

Buttons

For a prominent call to action button, use the default button class. If there are multiple calls to action, use only one default button paired with secondary or naked buttons. Success and error buttons are useful for transactional or form completion tasks.

Toggle background color:

<button class="mt2_btn mt2_btn--default mt2_fullwidth">Default</button>
<button class="mt2_btn mt2_btn--secondary mt2_fullwidth">Secondary</button>
<button class="mt2_btn mt2_btn--naked mt2_fullwidth"> <span> Naked </span> </button>
<button class="mt2_btn mt2_btn--success mt2_fullwidth">Success</button>
<button class="mt2_btn mt2_btn--error mt2_fullwidth">Error</button>
<button class="mt2_btn mt2_btn--default--inactive mt2_fullwidth" disabled>Default Inactive</button>
<button class="mt2_btn mt2_btn--secondary--inactive mt2_fullwidth" disabled>Secondary Inactive</button>
<button class="mt2_btn mt2_btn--naked mt2_btn--naked--inactive mt2_fullwidth" disabled>Naked Inactive</button>
<button class="mt2_btn mt2_btn--default mt2_fullwidth">Default</button>
<button class="mt2_btn mt2_btn--secondary mt2_btn--secondary--inverse mt2_fullwidth">Secondary</button>
<button class="mt2_btn mt2_btn--naked mt2_btn--naked--inverse mt2_fullwidth"> <span> Naked </span> </button>
<button class="mt2_btn mt2_btn--success mt2_fullwidth">Success</button>
<button class="mt2_btn mt2_btn--error mt2_fullwidth">Error</button>
<button class="mt2_btn mt2_btn--default--inactive mt2_fullwidth" disabled>Default Inactive</button>
<button class="mt2_btn mt2_btn--secondary--inactive mt2_fullwidth" disabled>Secondary Inactive</button>
<button class="mt2_btn mt2_btn--naked mt2_btn--naked--inactive mt2_fullwidth" disabled>Naked Inactive</button>
 

Form Inputs

Text inputs, password inputs, text areas, selection menus, check box selections, and radio button selections are common form elements.

You did something wrong.

Multi-Select List
Single-Select List
<form class="mt2_col-lg-6 mt2_col-gut-sm mt2_col-md-gut-md mt2_col-lg-gut-lg">
  <p>
    <input type="text" class="mt2_input mt2_fullwidth mt2_subh4" placeholder="Text Input Field">
  </p>
  <p>
    <input type="password" class="mt2_input mt2_fullwidth mt2_subh4" placeholder="Enter Password">
  </p>
  <p>
    <input type="text" class="mt2_input mt2_fullwidth mt2_input--error mt2_subh4" placeholder="Error Message">
  </p>
  <p class="mt2_h5 mt2_color--danger">You did something wrong.</p>
  <p>
    <input type="text" class="mt2_input mt2_fullwidth mt2_subh4" placeholder="Inactive Field" disabled>
  </p>
</form>


  <textarea class="mt2_input mt2_textarea mt2_fullwidth mt2_subh4" placeholder="I am a text area"></textarea>
  


<h5 class="mt2_h5">Multi-Select List</h5>

<fieldset class="fieldset">
  <div class="mt2_row-gut-1 mt2_subh4">
    <input type="checkbox" class="mt2_checkbox" id="c1" checked/>
    <label for="c1">Option 1</label>
  </div>
  <div class="mt2_row-gut-1 mt2_subh4">
    <input type="checkbox" class="mt2_checkbox" id="c2"/>
    <label for="c2">Option 2</label>
  </div>
  <div class="mt2_subh4">
    <input type="checkbox" class="mt2_checkbox mt2_checkbox--disabled" id="c3"/>
    <label for="c3">Disabled Option</label>
  </div>
</fieldset>


  
<h5 class="mt2_h5">Single-Select List</h5>

<fieldset class="mt2_row-gut-2 mt2_subh4 fieldset">
  <div class="mt2_row-gut-1">
    <input class="mt2_radio" type="radio" value="r1" name="thing1" id="r1" checked>
    <label for="r1">Option 1</label>
  </div>
  <div class="mt2_row-gut-1">
    <input class="mt2_radio" type="radio" value="r2" name="thing1" id="r2">
    <label for="r2">Option 2</label>
  </div>
  <div>
    <input class="mt2_radio mt2_radio--disabled" type="radio" value="r3"  name="thing1">
    <label>Disabled Option</label>
  </div>
</fieldset>
 

Modals

Modals are useful for displaying secondary content, either as a user-initiated interaction or as an auto-opening popup.

Example Text

 

Video Promo

A video thumbnail with a play button can act as a direct launch point for an in-page video or link to another page.


<figure class="mt2_videopromo-container mt2_intratio--broadcast mt2_bgcolor--neutral--xxl">
  <button class="mt2_videopromo-button mt2_intratio--circle">
    <span class="mt2_visuallyhidden">Play</span>
  </button>
</figure>
 

Counters

Counters can be numbers or dots: Use numbers if it's important to let the user know exactly how many items a carousel has, or if there are too many to represent in dots. Use dots if the number of elements is small and the layout does not allow for the placement of a numeric counter.

Numeric Counter
/
<div>
  <button class="mt2_h5 mt2_numericcounter-button">1</button>
  <span class="mt2_h5">/</span>
  <button class="mt2_h5 mt2_numericcounter-button">12</button>
</div>
  

Numeric Counter With Arrows
/

<div class="mt2_numericcounter">
  <button class="mt2_numericcounter-button">
    <svg class="mt2_icon mt2_numericcounter-arrow">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-left"></use>
    </svg>
    <span class="mt2_h5">2</span>
  </button>
  <span class="mt2_h5">/</span>
  <button class="mt2_numericcounter-button">
    <span class="mt2_h5">12</span>
    <svg class="mt2_icon mt2_numericcounter-arrow">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-right"></use>
    </svg>
  </button>
</div>

Numeric Counter With Arrows (disabled example)
/

<div class="mt2_numericcounter">
  <button class="mt2_numericcounter-button">
    <svg class="mt2_icon mt2_numericcounter-arrow mt2_numericcounter-arrow--disabled">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-left"></use>
    </svg>
    <span class="mt2_h5">1</span>
  </button>
  <span class="mt2_h5">/</span>
  <button class="mt2_numericcounter-button">
    <span class="mt2_h5">12</span>
    <svg class="mt2_icon mt2_numericcounter-arrow">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#chevron-right"></use>
    </svg>
  </button>
</div>

Dot Counter

<div class="mt2_bgcolor--neutral--xxl">
  <ul class="mt2_dotcounter-container mt2_dotcounter-container--inverse mt2_row-gut-half">
    <li class="mt2_dotcounter-item mt2_dotcounter-item--active"></li>
    <li class="mt2_dotcounter-item"></li>
    <li class="mt2_dotcounter-item"></li>
    <li class="mt2_dotcounter-item"></li>
  </ul>
</div>

<div class="mt2_bgcolor--neutral--xxl mt2_row-gut-half"></div>
<ul class="mt2_dotcounter-container">
  <li class="mt2_dotcounter-item mt2_dotcounter-item--active"></li>
  <li class="mt2_dotcounter-item"></li>
  <li class="mt2_dotcounter-item"></li>
  <li class="mt2_dotcounter-item"></li>
</ul>

Dot Counter Inverse

<div class="mt2_bgcolor--neutral--d">
  <ul class="mt2_dotcounter-container">
    <li class="mt2_dotcounter-item mt2_dotcounter-item--inverse mt2_dotcounter-item--inverse--active"></li>
    <li class="mt2_dotcounter-item mt2_dotcounter-item--inverse"></li>
    <li class="mt2_dotcounter-item mt2_dotcounter-item--inverse"></li>
    <li class="mt2_dotcounter-item mt2_dotcounter-item--inverse"></li>
  </ul>
</div>