primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-25 18:26:14 +03:00
Code Issues Projects Releases Wiki Activity
fe17ba05ac
css/docs/content/components/avatar-stack.md
simurai 0e74c3f3fa
Add links to PVC (#2346) 
* Add links to PVC

And break some bundles (e.g. navigation) apart

* Ignore some of the new pages

* Revert "Ignore some of the new pages"

This reverts commit 854802e7ca.
2022-12-16 09:06:08 +09:00

4.5 KiB
Raw Blame History

title path status source rails bundle
AvatarStack components/avatar-stack Stable https://github.com/primer/css/tree/main/src/avatars https://primer.style/view-components/components/beta/avatarstack avatars

Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.

<div class="AvatarStack AvatarStack--three-plus">
  <div
    class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
    aria-label="octocat, octocat, and octocat"
  >
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
  </div>
</div>

Based on the number of avatars in the stack, add these modifier classes:

  • AvatarStack--two for 2 avatars.
  • AvatarStack--three-plus for 3 or more avatars.

If you have more than three avatars, add a div with the classes avatar avatar-more as the third avatar in the stack, as such:

<div class="AvatarStack AvatarStack--three-plus">
  <div
    class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
    aria-label="octocat, octocat, octocat, octocat, and octocat"
  >
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
    <div class="avatar avatar-more"></div>
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
  </div>
</div>

You can also link individual avatars. To do this shift the avatar class over to the anchor:

<div class="AvatarStack AvatarStack--two">
  <div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="octocat and octocat">
    <a href="#" class="avatar">
      <img
        height="20"
        alt="@octocat"
        src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
        width="20"
      />
    </a>
    <a href="#" class="avatar">
      <img
        height="20"
        alt="@octocat"
        src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
        width="20"
      />
    </a>
  </div>
</div>

Use AvatarStack--right to right-align the avatar stack. Remember to switch the alignment of tooltips when making this change.

<div class="AvatarStack AvatarStack--three-plus AvatarStack--right">
  <div
    class="AvatarStack-body tooltipped tooltipped-sw tooltipped-align-right-1"
    aria-label="octocat, octocat, and octocat"
  >
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
    <img
      class="avatar"
      height="20"
      alt="@octocat"
      src="https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png"
      width="20"
    />
  </div>
</div>