Avatar

Various Orientations

Horizontal

Dan Abramov

Working on @reactjs. Co-author of Redux and Create React App.

<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>