Skip to main content

Avatar

各种排列方向#

水平排列(Horizontal)#

Dan Abramov Profile
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&amp;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>

各种尺寸#

小(Small)#

Christoph Pojer

<div class="avatar">  <img    class="avatar__photo avatar__photo--sm"    src="https://avatars3.githubusercontent.com/u/13352?s=400&amp;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&amp;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&amp;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>