Avatars

Here are some simple avatar examples.

Basic Avatars

You can use the Avatar component to display a user's profile picture, icon, or initials. You can also add an online or offline indicator.

Preview

Code

- # Lady 0 is skipped / unused because she looks kinda fake
- ladies = (1..4).map { |i| image_path("avatars/lady-smiling-#{i}.jpg") }

.mt-4.flex.flex-col.lg:flex-row.items-center.gap-4
  - # Avatar without online indicator
  = daisy_avatar(src: ladies[1]) do
    Daisy

  - # Avatar with online indicator
  = daisy_avatar(css: "online", src: ladies[2]) do
    Daisy

  - # Avatar with offline indicator
  = daisy_avatar(css: "offline", src: ladies[3]) do
    Daisy

  - # Placeholder avatar without online indicator
  = daisy_avatar do
    AB

  - # Placeholder avatar with icon & online indicator
  = daisy_avatar(css: "online", icon: "user", icon_css: "w-14 h-14 text-sky-400")

  - # Placeholder avatar with offline indicator
  = daisy_avatar(css: "offline") do
    TF

Made with by Profoundry .