AvatarComponent | Your awesome title

import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’

Avatar can be used to represent users.

Use the default circle avatar for users, and the square shape for or any other non-human avatars.
By default, Avatar will render a static <img>. To have Avatar function as a link, set the href which will wrap the <img> in a <a>.
Set size to update the height and width of the Avatar in pixels.
To stack multiple avatars together, use AvatarStackComponent.

Accessibility

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)

Arguments

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` and `:square`.
`href`	`String`	`nil`	The URL to link to. If used, component will be wrapped by an `<a>` tag.
`classes`	`String`	`""`	Classes and attributes
`attributes`	`Hash`	`{}`	Classes and attributes

Examples

Default

<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>

Square

<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", shape: :square)) %>

Link

<%= render(Ariadne::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>

With size

<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 40)) %>
<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 48)) %>
<%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 80)) %>