Styleguide

Avatar

Borders

something special
something special
.avatar.avatar--small.avatar--with-border
  .avatar__ratio
    %img.avatar__content{alt: "something special", src: "//placehold.it/60/f1f2f4/36373E"}/
.avatar.avatar--small
  .avatar__ratio
    %img.avatar__content{alt: "something special", src: "//placehold.it/60/f1f2f4/36373E"}/
<div class='avatar avatar--small avatar--with-border'>
  <div class='avatar__ratio'><img alt="something special" class="avatar__content" src="//placehold.it/60/f1f2f4/36373E" /></div>
</div>
<div class='avatar avatar--small'>
  <div class='avatar__ratio'><img alt="something special" class="avatar__content" 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'

Sizes

something special
something special
something special
something special
.avatar.avatar--extra-small
  .avatar__ratio
    %img.avatar__content{alt: "something special", src: "//placehold.it/30/f1f2f4/36373E"}/
.avatar.avatar--small
  .avatar__ratio
    %img.avatar__content{alt: "something special", src: "//placehold.it/60/f1f2f4/36373E"}/
.avatar.avatar--medium
  .avatar__ratio
    %img.avatar__content{alt: "something special", src: "//placehold.it/120/f1f2f4/36373E"}/
.avatar.avatar--large
  .avatar__ratio
    %img.avatar__content{alt: "something special", src: "//placehold.it/270/f1f2f4/36373E"}/
<div class='avatar avatar--extra-small'>
  <div class='avatar__ratio'><img alt="something special" class="avatar__content" src="//placehold.it/30/f1f2f4/36373E" /></div>
</div>
<div class='avatar avatar--small'>
  <div class='avatar__ratio'><img alt="something special" class="avatar__content" src="//placehold.it/60/f1f2f4/36373E" /></div>
</div>
<div class='avatar avatar--medium'>
  <div class='avatar__ratio'><img alt="something special" class="avatar__content" src="//placehold.it/120/f1f2f4/36373E" /></div>
</div>
<div class='avatar avatar--large'>
  <div class='avatar__ratio'><img alt="something special" class="avatar__content" 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'

Custom Image Tags

36373e
.avatar.avatar--medium
  .avatar__ratio
    %img.avatar__content{alt: "36373e", 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" alt="36373e" />
  </div>
</div>
= ui_component 'avatar', size: :medium do
  = image_tag '//placehold.it/120/f1f2f4/36373E', class: 'avatar__content'