Streamline the Laravel SaaS Starter Kit - Launch Your Next SaaS Today

Avatar

Avatars show a thumbnail of your users

x-t-avatar

Preview and Examples

default avatar image brand avatar image primary avatar image secondary avatar image success avatar image warning avatar image danger avatar image
DE
BR
PP
SE
SU
WA
DA
<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