Skip to content

Use AvatarStack to stack multiple avatars together.

Arguments

NameTypeDefaultDescription
tagSymbol:divOne of :div and :span.
alignSymbol:leftOne of :left and :right.
tooltippedBooleanfalseWhether to add a tooltip to the stack or not.
body_argumentsHash{}Parameters to add to the Body. If tooltipped is set, has the same arguments as Tooltip. The default tag is :div but can be changed using tag: to one of :div and :span.
system_argumentsHashN/ASystem arguments

Slots

Avatars

Required list of stacked avatars.

NameTypeDefaultDescription
kwargsHashN/AThe same arguments as Avatar.

Examples

Default

@kittenuser @kittenuser
@kittenuser
<%= render(Primer::Beta::AvatarStack.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

@kittenuser @kittenuser
@kittenuser
<%= render(Primer::Beta::AvatarStack.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 %>

With tooltip

@kittenuser @kittenuser
@kittenuser
<%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) 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 %>