Avatar
can be used to represent users and organizations on GitHub.
Avatar
will render a static <img>
. To have Avatar
function as a link, set the href
which will wrap the <img>
in a <a>
.size
to update the height and width of the Avatar
in pixels.Images should have text alternatives that describe the information or function represented.
If the avatar functions as a link, provide alt text that helps convey the function. For instance,
if Avatar
is a link to a user profile, the alt attribute should be @kittenuser profile
rather than @kittenuser
.
Learn more about best image practices (WAI Images)
Name | Type | Default | Description |
---|---|---|---|
src | String | N/A | The source url of the avatar image. |
alt | String | N/A | Passed through to alt on img tag. |
size | Integer | 20 | One of 16 , 20 , 24 , 32 , 40 , 48 , or 80 . |
shape | Symbol | :circle | Shape of the avatar. One of :circle or :square . |
href | String | nil | The URL to link to. If used, component will be wrapped by an <a> tag. |
system_arguments | Hash | N/A | System arguments |
<%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")) %>
<%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", shape: :square)) %>
<%= render(Primer::Beta::Avatar.new(href: "#", src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser profile")) %>