Avatar

It's a face in a circle

Includes a Ruby component and corresponding Rails helper

Ruby

Example

<%= nk_avatar "dhh-racer.jpg" %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:component avatar

Sizes

:sm

:md

:lg

<div class="flex gap-4 items-center text-xs text-center">
  <div class="flex flex-col gap-4">
    <%= nk_avatar "dhh-racer.jpg", size: :sm %>
    <code>:sm</code>
  </div>
  <div class="flex flex-col gap-4">
    <%= nk_avatar "dhh-racer.jpg", size: :md %>
    <code>:md</code>
  </div>
  <div class="flex flex-col gap-4">
    <%= nk_avatar "dhh-racer.jpg", size: :lg %>
    <code>:lg</code>
  </div>
</div>

Avatar Stack

<%= nk_avatar_stack do |stack| %>
  <%= stack.avatar "avatars/joel.webp" %>
  <%= stack.avatar "avatars/matz.webp" %>
  <%= stack.avatar "avatars/adam.webp" %>
  <%= stack.avatar "avatars/dhh-racer.webp" %>
<% end %>

<%= nk_avatar_stack do |stack| %>
  <%= stack.avatar "dhh-racer.jpg" %>
  <%= stack.avatar "matz.jpg" %>
  <%= stack.avatar "adam.jpg" %>
  <%= stack.avatar "joel.jpg" %>
<% end %>

Usage

`nk_avatar(src = nil, size: :md, **attrs)`
Property	Default	Description
`src`	`nil`	Uses `image_tag` internally.
`size`	`:md`	One of `":sm"` / `":md"` / `":lg"`
`**attrs`		HTML attributes for `<div>` element

`nk_avatar_stack(size: :md, **attrs) { \|stack\| ... }`
Property	Default	Description
`size`	`:md`	One of `":sm"` / `":md"` / `":lg"`
`**attrs`		HTML attributes for `<div>` element

`stack.avatar(src = nil, size: :md, **attrs) { \|stack\| ... }`
Property	Default	Description
`src`	`nil`	Uses `image_tag` internally.
`size`	`:md`	One of `":sm"` / `":md"` / `":lg"`
`**attrs`		HTML attributes for `<div>` element