Avatars

<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small">
<img src="/npm-pattern-library/assets/images/placeholder.png" width="20" height="20" class="avatar avatar--tiny">

<!-- The wrapper `div` is just to restrict the width to demonstrate multiple rows. -->
<div style="width: 30%;">

<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small avatar--group-item">
<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small avatar--group-item">
<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small avatar--group-item">
<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small avatar--group-item">
<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small avatar--group-item">
<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small avatar--group-item">
<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small avatar--group-item">
<img src="/npm-pattern-library/assets/images/placeholder.png" width="45" height="45" class="avatar avatar--small avatar--group-item">
<a href="#" class="avatar avatar--small avatar--group-item avatar--group-button">+</a>

</div>