.avatar.avatar--small.avatar--with-border
  .avatar__ratio
    %img.avatar__content{alt: "avatar", "aria-label" => "avatar", src: "//placehold.it/60/f1f2f4/36373E"}/
.avatar.avatar--small
  .avatar__ratio
    %img.avatar__content{alt: "avatar", "aria-label" => "avatar", src: "//placehold.it/60/f1f2f4/36373E"}/

<div class='avatar avatar--small avatar--with-border'>
  <div class='avatar__ratio'><img alt="avatar" class="avatar__content" aria-label="avatar" src="//placehold.it/60/f1f2f4/36373E" /></div>
</div>
<div class='avatar avatar--small'>
  <div class='avatar__ratio'><img alt="avatar" class="avatar__content" aria-label="avatar" src="//placehold.it/60/f1f2f4/36373E" /></div>
</div>

= ui_component 'avatar', size: :small, border: true, src: '//placehold.it/60/f1f2f4/36373E', alt: 'something special'
= ui_component 'avatar', size: :small, border: false, src: '//placehold.it/60/f1f2f4/36373E', alt: 'something special'

.avatar.avatar--extra-small
  .avatar__ratio
    %img.avatar__content{alt: "avatar", "aria-label" => "avatar", src: "//placehold.it/30/f1f2f4/36373E"}/
.avatar.avatar--small
  .avatar__ratio
    %img.avatar__content{alt: "avatar", "aria-label" => "avatar", src: "//placehold.it/60/f1f2f4/36373E"}/
.avatar.avatar--medium
  .avatar__ratio
    %img.avatar__content{alt: "avatar", "aria-label" => "avatar", src: "//placehold.it/120/f1f2f4/36373E"}/
.avatar.avatar--large
  .avatar__ratio
    %img.avatar__content{alt: "avatar", "aria-label" => "avatar", src: "//placehold.it/270/f1f2f4/36373E"}/

<div class='avatar avatar--extra-small'>
  <div class='avatar__ratio'><img alt="avatar" class="avatar__content" aria-label="avatar" src="//placehold.it/30/f1f2f4/36373E" /></div>
</div>
<div class='avatar avatar--small'>
  <div class='avatar__ratio'><img alt="avatar" class="avatar__content" aria-label="avatar" src="//placehold.it/60/f1f2f4/36373E" /></div>
</div>
<div class='avatar avatar--medium'>
  <div class='avatar__ratio'><img alt="avatar" class="avatar__content" aria-label="avatar" src="//placehold.it/120/f1f2f4/36373E" /></div>
</div>
<div class='avatar avatar--large'>
  <div class='avatar__ratio'><img alt="avatar" class="avatar__content" aria-label="avatar" src="//placehold.it/270/f1f2f4/36373E" /></div>
</div>

= ui_component 'avatar', size: :extra_small, src: '//placehold.it/30/f1f2f4/36373E', alt: 'something special'
= ui_component 'avatar', size: :small, src: '//placehold.it/60/f1f2f4/36373E', alt: 'something special'
= ui_component 'avatar', size: :medium, src: '//placehold.it/120/f1f2f4/36373E', alt: 'something special'
= ui_component 'avatar', size: :large, src: '//placehold.it/270/f1f2f4/36373E', alt: 'something special'

.avatar.avatar--medium
  .avatar__ratio
    %img.avatar__content{src: "//placehold.it/120/f1f2f4/36373E"}/

<div class='avatar avatar--medium'>
  <div class='avatar__ratio'><img class="avatar__content" src="//placehold.it/120/f1f2f4/36373E" /></div>
</div>

= ui_component 'avatar', size: :medium do
  = image_tag '//placehold.it/120/f1f2f4/36373E', class: 'avatar__content'