Amara styleguide

• Global
  • Color palette
  • Typography
  • Lists
  • Definition Lists
  • Tables
  • Dropdown menus
• Layout
  • General Layout
  • Utility classes
  • Tabs
  • Multi-step Pane
• Buttons
  • Tags
  • Options
  • Split Buttons
• Iconography
  • Icons
  • Avatars
  • Step lists
• Forms
  • Forms
  • Fields
  • Checkboxes and Radios
  • Switches
  • multiField
  • Fieldsets
  • Settings page forms
  • Field errors
  • File Uploads
  • Image Uploads
  • Compound fields
  • ButtonField
  • Searchbar
  • Selects
  • Table select
  • Preset or custom
  • Dynamic Help Text
• Modals / Dialogs
  • Modal dialogs
  • Language Switcher
• Containers
  • Content header
  • Filter Box
  • Content footer
  • List View
  • Selection group
  • Accordion
  • Dynamic Formset
  • Dynamic Formset (alternate)
• Elements
  • Alerts
  • Announcements
  • Video cards
  • Video subtitles list
  • Filters
  • Check All
  • Search results / Select List
  • Pagination
  • Constrained content
  • Assignment history table
  • Workflow diagram
  • Zero states
  • Progress bars
  • Date input/display
  • Navbar
  • Checkout table
• Utility Classes
  • Text center
  • Block center
  • Block wrap
  • Video thumbnails

Avatars

Avatars are implemented by wrapping an img .avatar selector. Sizes are .avatar-md, .avatar-lg, .avatar-xl. Use .in-progress when the avatar is for the current step of a subtitle request

 <ul class="inline">
   <li>
     <span class="avatar avatar-lg">
       <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-default-100.png">
     </span><br>
     Default
   </li>
   <li>
     <span class="avatar avatar-lg">
      <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-inverse-100.png">
     </span><br>
     Inverse
   </li>
   <li>
     <span class="avatar avatar-lg">
      <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-teal-100.png">
     </span><br>
     Teal
   </li>
   <li>
     <span class="avatar avatar-lg">
       <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-plum-100.png">
     </span><br>
     Plum
   </li>
   <li>
     <span class="avatar avatar-lg">
       <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-lime-100.png">
     </span><br>
     Lime green
   </li>
   <li>
     <span class="avatar avatar-lg in-progress">
       <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-default-100.png">
     </span><br>
     In progress
   </li>
 </ul>

 <ul class="inline">
   <li>
     <span class="avatar avatar-lg">
      <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-team-default-100.png">
     </span><br>
     Default
   </li>
   <li>
     <span class="avatar avatar-lg">
      <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-team-inverse-100.png">
     </span><br>
     Inverse
   </li>
   <li>
     <span class="avatar avatar-lg">
      <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-team-teal-100.png">
     </span><br>
     Teal
   </li>
   <li>
     <span class="avatar avatar-lg">
      <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-team-plum-100.png">
     </span><br>
     Plum
   </li>
   <li>
     <span class="avatar avatar-lg">
      <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-team-lime-100.png">
     </span><br>
     Lime green
   </li>
 </ul>

Example

 <span class="avatar">
  <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-default-30.png">
 </span>
 <p>Default Size: 30x30</p>
 <span class="avatar avatar-md">
  <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-default-50.png">
 </span>
 <p>Medium Size: 50x50</p>
 <span class="avatar avatar-lg">
  <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/avatar-default-100.png">
 </span>
 <p>Large Size: 100x100</p>

Default Size: 30x30

Medium Size: 50x50

Large Size: 100x100

Example

    <span class="avatar avatar-alert">
   <img src="https://s3.amazonaws.com/s3.www.universalsubtitles.org/gravatar/default-50.png">
 </span>
 <p>Avatar alert</p>

Avatar alert