section#avatars

  h2 Avatars
  p Avatars come in three sizes&mdash;large (<code>100&times;100</code>) , medium (<code>50&times;50</code>) and small (<code>25&times;25</code>). Placeholders thanks to <a href='http://plaechold.it'>Placehold.it</a>.

  h3 Rounded avatars
  p For rounded avatars use <code>avatar-rounded</code> class.

  img(src='http://placehold.it/200x200?text=100x100', class='avatar avatar-large avatar-rounded')
  img(src='http://placehold.it/100x100?text=50x50', class='avatar avatar-medium avatar-rounded')
  img(src='http://placehold.it/50x50?text=25x25', class='avatar avatar-small avatar-rounded')

  :markdown
    ```html
      <img src='http://placehold.it/200x200?text=100x100' class='avatar avatar-large avatar-rounded' />
      <img src='http://placehold.it/100x100?text=50x50' class='avatar avatar-medium avatar-rounded' />
      <img src='http://placehold.it/50x50?text=25x25' class='avatar avatar-small avatar-rounded' />
    ```

  h3 Avatars with radius
  p For avatars with <code>border radius</code> use <code>avatar-radius</code> class.

  img(src='http://placehold.it/200x200?text=100x100', class='avatar avatar-large avatar-radius')
  img(src='http://placehold.it/100x100?text=50x50', class='avatar avatar-medium avatar-radius')
  img(src='http://placehold.it/50x50?text=25x25', class='avatar avatar-small avatar-radius')

  :markdown
    ```html
      <img src='http://placehold.it/200x200?text=100x100' class='avatar avatar-large avatar-radius' />
      <img src='http://placehold.it/100x100?text=50x50' class='avatar avatar-medium avatar-radius' />
      <img src='http://placehold.it/50x50?text=25x25' class='avatar avatar-small avatar-radius' />
    ```