Styleguide

Avatar

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Le composant d'avatar se déclare avec la classe .avatar.

Un border radius est appliqué directement sur l'image. L'image doit avoir ces caractéristiques :

  • Ratio : carré
  • Taille : 40*40 px
  • Format : jpg, png, gif
Laurent Sutterlity 
<div class="avatar">
  <div class="avatar-thumb">
    <img src="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg" width="40" height="40" alt="Laurent Sutterlity" />
  </div>
</div>

Il est possible d'avoir une image rétina en utilisant l'attribut srcset (voir support navigateur).

Laurent Sutterlity 
<div class="avatar">
  <div class="avatar-thumb">
    <img src="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg"
         srcset="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg 1x,
                 http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@2x.jpg 2x"
         width="40" height="40" alt="Laurent Sutterlity" />
  </div>
</div>