blatui

Components

Avatar Group

Overlapping stacked avatars with an overflow "+N" count.

php artisan blatui:add avatar-group
AL AT GH LT 
@php
    $team = [
        ['name' => 'Ada Lovelace'],
        ['name' => 'Alan Turing'],
        ['name' => 'Grace Hopper'],
        ['name' => 'Linus Torvalds'],
        ['name' => 'Margaret Hamilton'],
    ];
@endphp

<x-ui.avatar-group :avatars="$team" :max="4" />

Images

Ada Lovelace AL Alan Turing AT Grace Hopper GH Linus Torvalds LT 
@php
    $people = [
        ['src' => 'https://picsum.photos/seed/blatui-a/96', 'name' => 'Ada Lovelace'],
        ['src' => 'https://picsum.photos/seed/blatui-b/96', 'name' => 'Alan Turing'],
        ['src' => 'https://picsum.photos/seed/blatui-c/96', 'name' => 'Grace Hopper'],
        ['src' => 'https://picsum.photos/seed/blatui-d/96', 'name' => 'Linus Torvalds'],
        ['src' => 'https://picsum.photos/seed/blatui-e/96', 'name' => 'Katherine Johnson'],
        ['src' => 'https://picsum.photos/seed/blatui-f/96', 'name' => 'Margaret Hamilton'],
    ];
@endphp

<x-ui.avatar-group :avatars="$people" :max="4" />

Sizes

Ada Lovelace AL Alan Turing AT Grace Hopper GH LT
Ada Lovelace AL Alan Turing AT Grace Hopper GH LT
Ada Lovelace AL Alan Turing AT Grace Hopper GH LT 
@php
    $people = [
        ['src' => 'https://picsum.photos/seed/blatui-a/96', 'name' => 'Ada Lovelace'],
        ['src' => 'https://picsum.photos/seed/blatui-b/96', 'name' => 'Alan Turing'],
        ['src' => 'https://picsum.photos/seed/blatui-c/96', 'name' => 'Grace Hopper'],
        ['name' => 'Linus Torvalds'],
        ['name' => 'Margaret Hamilton'],
    ];
@endphp

<div class="flex flex-col items-start gap-6">
    <x-ui.avatar-group :avatars="$people" :max="4" size="sm" />
    <x-ui.avatar-group :avatars="$people" :max="4" />
    <x-ui.avatar-group :avatars="$people" :max="4" size="lg" />
</div>