Avatar

Images and accessible initial fallbacks at predictable sizes.

Source
app/components/nitro_kit/avatar.rb
API
NitroKit::Avatar.new(src:, alt:, fallback:, size:)

Sizes

All closed sizes keep fallback text, geometry, and accessibility semantics aligned.

Size scale

Small
Medium
Large
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/avatar_page.rb
Gallery::Data.avatar_sizes.each do |avatar|
  sample(avatar.label, slug: avatar.slug) do
    render_avatar(avatar)
  end
end

Images and fallbacks

Image, generated initials, custom long fallback, and anonymous states are explicit.

Content modes

Image
Nitro Kit mark
Generated initials
Long custom fallback
Anonymous
?
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/avatar_page.rb
sample("Image", slug: "image") do
  render NitroKit::Avatar.new(
    src: "/icon.svg",
    alt: "Nitro Kit mark",
    fallback: "NK",
    size: :lg,
    id: "gallery-avatar-image"
  )
end
sample("Generated initials", slug: "generated-initials") do
  render NitroKit::Avatar.new(
    alt: "Alexandria Ocasio-Cortez",
    size: :lg,
    id: "gallery-avatar-generated"
  )
end
sample("Long custom fallback", slug: "long-fallback") do
  render NitroKit::Avatar.new(
    alt: "Platform engineering team",
    fallback: "TEAM",
    size: :lg,
    id: "gallery-avatar-long-fallback"
  )
end
sample("Anonymous", slug: "anonymous") do
  render NitroKit::Avatar.new(size: :lg, id: "gallery-avatar-anonymous")
end

Accessible names

Fallback-only identities label the root; image identities retain native alt text.

Named identities

Nitro Kit workspace
Viewport640 px · sm
Rubytest/dummy/app/components/gallery/components/avatar_page.rb
render NitroKit::Avatar.new(
  alt: "Katherine Johnson",
  fallback: "KJ",
  id: "gallery-avatar-labelled-fallback"
)
render NitroKit::Avatar.new(
  src: "/icon.svg",
  alt: "Nitro Kit workspace",
  fallback: "NK",
  id: "gallery-avatar-labelled-image"
)