AvatarStackComponent | Your awesome title

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

Use AvatarStack to stack multiple avatars together.

Arguments

Name	Type	Default	Description
`tag`	`Symbol`	`:div`	One of `:div` and `:span`.
`align`	`Symbol`	`:left`	One of `:left` and `:right`.
`classes`	`String`	`""`	Classes and attributes
`attributes`	`Hash`	`{}`	Classes and attributes

Slots

`Tooltip`

Tooltip that appears on mouse hover or keyboard focus over the stack.

Name	Type	Default	Description
`tag`	`Symbol, String`	N/A	The rendered tag name
`text`	`String`	N/A	The text content of the tooltip. This should be brief and no longer than a sentence.
`direction`	`Symbol`	N/A	One of `:bottom`, `:left`, `:right`, or `:top`.
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Same arguments as TooltipComponent.

`Avatars`

Required list of stacked avatars.

Name	Type	Default	Description
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Classes and attributes

Examples

Default

<%= render(Ariadne::AvatarStackComponent.new) do |c| %>
  <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
  <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
  <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<% end  %>

Align right

<%= render(Ariadne::AvatarStackComponent.new(align: :right)) do |c| %>
  <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
  <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
  <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
<% end  %>