|
1 |
| -id: avatar |
2 | 1 | name: Avatar
|
3 | 2 | status: Verified
|
| 3 | +description: An image representing a user. |
| 4 | +SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/ |
| 5 | +sections: |
| 6 | + - name: Migration Guide |
| 7 | + description: | |
| 8 | + ### Sizes added to `avatar`. |
| 9 | + A second class has to be added to `spectrum-Avatar` to declare which size to use. The available size classes are: `spectrum-Avatar--size50`, `spectrum-Avatar--size75`, `spectrum-Avatar--size100`, `spectrum-Avatar--size200`, `spectrum-Avatar--size300`, `spectrum-Avatar--size400`, `spectrum-Avatar--size500`, `spectrum-Avatar--size600`, and `spectrum-Avatar--size700`. |
4 | 10 | examples:
|
5 | 11 | - id: avatar
|
6 | 12 | name: Standard
|
7 | 13 | markup: |
|
8 |
| - <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar"> |
9 |
| - <img class="spectrum-Avatar is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 14 | + <div class="spectrum-Examples spectrum-Examples--vertical"> |
| 15 | + <div class="spectrum-Examples-item"> |
| 16 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">50</h4> |
| 17 | + <img class="spectrum-Avatar spectrum-Avatar--size50" src="img/example-ava.jpg" alt="Avatar"> |
| 18 | + <img class="spectrum-Avatar spectrum-Avatar--size50 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 19 | + </div> |
| 20 | + <div class="spectrum-Examples-item"> |
| 21 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4> |
| 22 | + <img class="spectrum-Avatar spectrum-Avatar--size75" src="img/example-ava.jpg" alt="Avatar"> |
| 23 | + <img class="spectrum-Avatar spectrum-Avatar--size75 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 24 | + </div> |
| 25 | + <div class="spectrum-Examples-item"> |
| 26 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4> |
| 27 | + <img class="spectrum-Avatar spectrum-Avatar--size100" src="img/example-ava.jpg" alt="Avatar"> |
| 28 | + <img class="spectrum-Avatar spectrum-Avatar--size100 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 29 | + </div> |
| 30 | + <div class="spectrum-Examples-item"> |
| 31 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4> |
| 32 | + <img class="spectrum-Avatar spectrum-Avatar--size200" src="img/example-ava.jpg" alt="Avatar"> |
| 33 | + <img class="spectrum-Avatar spectrum-Avatar--size200 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 34 | + </div> |
| 35 | + <div class="spectrum-Examples-item"> |
| 36 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4> |
| 37 | + <img class="spectrum-Avatar spectrum-Avatar--size300" src="img/example-ava.jpg" alt="Avatar"> |
| 38 | + <img class="spectrum-Avatar spectrum-Avatar--size300 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 39 | + </div> |
| 40 | + <div class="spectrum-Examples-item"> |
| 41 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4> |
| 42 | + <img class="spectrum-Avatar spectrum-Avatar--size400" src="img/example-ava.jpg" alt="Avatar"> |
| 43 | + <img class="spectrum-Avatar spectrum-Avatar--size400 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 44 | + </div> |
| 45 | + <div class="spectrum-Examples-item"> |
| 46 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4> |
| 47 | + <img class="spectrum-Avatar spectrum-Avatar--size500" src="img/example-ava.jpg" alt="Avatar"> |
| 48 | + <img class="spectrum-Avatar spectrum-Avatar--size500 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 49 | + </div> |
| 50 | + <div class="spectrum-Examples-item"> |
| 51 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4> |
| 52 | + <img class="spectrum-Avatar spectrum-Avatar--size600" src="img/example-ava.jpg" alt="Avatar"> |
| 53 | + <img class="spectrum-Avatar spectrum-Avatar--size600 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 54 | + </div> |
| 55 | + <div class="spectrum-Examples-item"> |
| 56 | + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4> |
| 57 | + <img class="spectrum-Avatar spectrum-Avatar--size700" src="img/example-ava.jpg" alt="Avatar"> |
| 58 | + <img class="spectrum-Avatar spectrum-Avatar--size700 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar"> |
| 59 | + </div> |
| 60 | + </div> |
0 commit comments