.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'