G-Loot DS — avatar size

by Augustin Hiebel

HTML

<!-- Extra large -->
<div className="avatar avatar-xl">
  <div>
    <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_3.jpg" alt="avatar" />
  </div>
</div>

<!-- Large (default) -->
<div className="avatar">
  <div>
    <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_3.jpg" alt="avatar" />
  </div>
</div>

 <!-- Medium -->
<div className="avatar avatar-md">
  <div>
    <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_3.jpg" alt="avatar" />
  </div>
</div>

 <!-- Small -->
<div className="avatar avatar-sm">
  <div>
    <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_3.jpg" alt="avatar" />
  </div>
</div>

 <!-- Extra small -->
<div className="avatar avatar-xs">
  <div>
    <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_3.jpg" alt="avatar" />
  </div>
</div>

 <!-- Tiny -->
<div className="avatar avatar-tiny">
  <div>
    <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_3.jpg" alt="avatar" />
  </div>
</div>