x
1
2
3
4
5
6
7
8
9
10
<div class="lui-group_avatar"> <div class="lui-avatar lui-avatar--square lui-avatar--xl"> <img alt="Avatar" class="lui-avatar__image" src="https://loopos-ui.theloop.pt/assets/loopos_ui/avatar/partner-avatar-e88ba1a2.png" /> </div> <div class="lui-group_avatar__secondary"> <div class="lui-avatar lui-avatar--circle lui-avatar--medium"> <img alt="Avatar" class="lui-avatar__image" src="https://loopos-ui.theloop.pt/assets/loopos_ui/avatar/user-avatar-37865251.png" /> </div> </div></div>GroupAvatar
Description
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
1
<%= render LooposUi::GroupAvatar.new(main_avatar: :default, secondary_avatar: :default) %>No notes provided.
No params configured.
Description
GroupAvatar is used to display two overlapping avatars - a main avatar and a smaller secondary avatar positioned in the bottom-right corner. This component is commonly used to show user groups, team members, or related entities where you want to highlight a primary item with a secondary indicator.
Arguments
| Property | Default | Required | Description |
|---|---|---|---|
main_avatar |
:default |
X | Image URL or :default for the main avatar (displayed as large square) |
secondary_avatar |
:default |
X | Image URL or :default for the secondary avatar (displayed as small circle) |