primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

Document avatar sizes

Browse Source
This commit is contained in:
simurai 2020-03-03 10:43:57 +09:00
parent 0c2242c78e
commit f53ce51c7c
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/content/components/avatars.md
View File

@ -15,15 +15,30 @@ Add `.avatar` to any `<img>` element to make it an avatar. This resets some key
Be sure to set `width` and `height` attributes for maximum browser performance.
```html live
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72" />
<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48" />
```
### Small avatars
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
```html live
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32" />
<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" />
```
### Avatar sizes
Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size.
```html live
<img class="avatar avatar-1 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=32" />
<img class="avatar avatar-2 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" />
<img class="avatar avatar-3 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=48" />
<img class="avatar avatar-4 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=56" />
<img class="avatar avatar-5 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" />
<img class="avatar avatar-6 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=80" />
<img class="avatar avatar-7 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
<img class="avatar avatar-8 mr-2" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=128" />
```
### Parent-child avatars