Turbine UI - Laravel and Tailwind CSS Avatar Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Avatar

Avatars show a thumbnail of your users

x-t-avatar

Preview and Examples

<x-turbine-ui-avatar
    class="mb-5"
    img="https://i.pravatar.cc/100?img=0"
    alt="default avatar image"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    img="https://i.pravatar.cc/100?img=1"
    alt="brand avatar image"
    variant="brand"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    img="https://i.pravatar.cc/100?img=2"
    alt="primary avatar image"
    variant="primary"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    img="https://i.pravatar.cc/100?img=3"
    alt="secondary avatar image"
    variant="secondary"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    img="https://i.pravatar.cc/100?img=4"
    alt="success avatar image"
    variant="success"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    img="https://i.pravatar.cc/100?img=5"
    alt="warning avatar image"
    variant="warning"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    img="https://i.pravatar.cc/100?img=6"
    alt="danger avatar image"
    variant="danger"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    label="DE"
    alt="default avatar image"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    alt="brand avatar image"
    variant="brand"
    label="BR"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    alt="primary avatar image"
    variant="primary"
    label="PP"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    alt="secondary avatar image"
    variant="secondary"
    label="SE"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    alt="success avatar image"
    variant="success"
    label="SU"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    alt="warning avatar image"
    variant="warning"
    label="WA"
/>
 
<x-turbine-ui-avatar
    class="mb-5"
    alt="danger avatar image"
    variant="danger"
    label="DA"
/>

Attributes

Name	Type	Options	Description
alt	string	string	Adds an alt text
border	boolean	true false	Adds a border
img	string	string	Adds an image
label	string	string	Adds a text label
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
shadow	boolean	true false	Adds a shadow
size	string	xs sm md lg xl 2xl	Controls component scale
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette