Avatar
Various Orientations
Horizontal
<div class="avatar">
<a
class="avatar__photo-link avatar__photo avatar__photo--lg"
href="https://twitter.com/dan_abramov">
<img
alt="Dan Abramov Profile"
src="https://avatars1.githubusercontent.com/u/810438?s=460" />
</a>
<div class="avatar__intro">
<div class="avatar__name">Dan Abramov</div>
<small class="avatar__subtitle">
Working on @reactjs. Co-author of Redux and Create React App.
</small>
</div>
</div>
Vertical
Jordan Walke
Maker of things: ReactJS. Working on:
@reasonml. At: Facebook
Engineering.
<div class="avatar avatar--vertical">
<img
class="avatar__photo avatar__photo--xl"
src="https://avatars1.githubusercontent.com/u/977348?s=460&v=4" />
<div class="avatar__intro">
<div class="avatar__name">Jordan Walke</div>
<small class="avatar__subtitle">
Maker of things: ReactJS. Working on:
<a href="https://twitter.com/reasonml">@reasonml</a>. At: Facebook
Engineering.
</small>
</div>
</div>
Various Sizes
Small
Christoph Pojer
<div class="avatar">
<img
class="avatar__photo avatar__photo--sm"
src="https://avatars3.githubusercontent.com/u/13352?s=400&v=4" />
<div class="avatar__intro">
<div class="avatar__name">Christoph Pojer</div>
</div>
</div>
Default
Hector Ramos
React Native @facebook
<div class="avatar">
<img
class="avatar__photo"
src="https://avatars1.githubusercontent.com/u/165856?s=460&v=4" />
<div class="avatar__intro">
<div class="avatar__name">Hector Ramos</div>
<small class="avatar__subtitle">React Native @facebook</small>
</div>
</div>
Large
Christopher Chedeau
Frenchy Front End Engineer
<div class="avatar">
<img
class="avatar__photo avatar__photo--lg"
src="https://avatars2.githubusercontent.com/u/197597?s=460" />
<div class="avatar__intro">
<div class="avatar__name">Christopher Chedeau</div>
<small class="avatar__subtitle">Frenchy Front End Engineer</small>
</div>
</div>
Extra Large
Joel Marcey
Developer Advocate at Facebook, co-creator of Docusaurus
<div class="avatar">
<img
class="avatar__photo avatar__photo--xl"
src="https://avatars0.githubusercontent.com/u/3757713?s=460&v=4" />
<div class="avatar__intro">
<div class="avatar__name">Joel Marcey</div>
<small class="avatar__subtitle">
Developer Advocate at Facebook, co-creator of Docusaurus
</small>
</div>
</div>