Lookbook Demo
x
1
<img class="inline-block rounded-lg avatar-md" src="https://loremflickr.com/300/300" alt="">
1
render Elements::AvatarComponent.new(src: "https://loremflickr.com/300/300", size: size, square: true)

No notes provided.

Param Description Input

The size to display the avatar at.

This is a custom panel! See the documentation for details on how to add custom panels to your Lookbook instance.

avatar_component.css

1
2
3
4
5
6
7
8
9
10
11
12
13
@layer components {
  .avatar-sm {
    @apply h-10 w-10;
  }
  
  .avatar-md {
    @apply h-20 w-20;
  }
  
  .avatar-lg {
    @apply h-32 w-32;
  }
}