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

Avatar

Avatars show a thumbnail of your users

Tag: x-turbine-ui-avatar
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 Adds an alt text
border boolean Adds a border
img string Adds an image
label string Adds a text label
ring boolean Adds a ring
rounded boolean Adds a rounded corner
shadow boolean Adds a shadow
size string Size is used to control styles such as margin, padding and font size. Extensible via the theme.
variant string A variant is like a colour palette
Theme