Amara styleguide

Zero states

  • The content padding for a zero-state element is currently set to 20px which matches our global content spacing.
  • Additional perceived spacing is determined by the content of the zero-state element.
  • Margin top and bottom is set to 27px by default.
  • The border color is #F3F4F6 for all zero-state elements but it is overwritten on the dashboard where the borders required more contrast to match comps. We are also adding a border-radius: 4px; on the dashboard.

Example

 
 <div class="zero-state">
   <p>Zero state message</p>
 </div>

Zero state message

Example

 
 <h2>This is an example of a heading or video title</h2>
 <div class="zero-state">
   <p>Zero state message</p>
 </div>

This is an example of a heading or video title

Zero state message

Example

 
 <select name="" id="" class="select" data-ajax="member-search" placeholder="Search members"></select>
 <div class="zero-state">
   <p>Zero state message</p>
 </div>

Zero state message

Example

 
 <div id="dashboard">
   <div class="zero-state">
     <p>DASHBOARD Zero state message</p>
   </div>
 </div>

DASHBOARD Zero state message

Styleguide zeroState

Example

 <ul class="bullets">
   <li>List item One</li>
   <li>List item Two</li>
   <li>List item Three</li>
 </ul>
  • List item One
  • List item Two
  • List item Three