jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a27c84b7a98ee9dfe967324aa82fa36c2a0813da
flowbite-vue/docs/.vitepress/dist/assets/components_avatar.md.8db14583.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

320 lines
95 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{u as i}from"./chunks/useMergeClasses.5cec3a4e.js";import{g as y,d as C,h as x,Y as j,$ as T,o as p,c as o,k as c,n as E,l as a,r as b,t as _,e as S,_ as P,H as s,w as u,a as w,Q as r}from"./chunks/framework.3f630664.js";const f={xs:"w-6 h-6",sm:"w-8 h-8",md:"w-10 h-10",lg:"w-20 h-20",xl:"w-36 h-36"},q={default:"rounded",rounded:"rounded-full"},z="ring-2 ring-gray-300 dark:ring-gray-500 p-1",$="absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800",V={away:"bg-gray-400",busy:"bg-yellow-400",offline:"bg-red-400",online:"bg-green-400"},I={"top-right-rounded":"top-0 -right-0.5","top-right-default":"-top-1.5 -right-1.5","top-left-rounded":"top-0 left-0","top-left-default":"top-0 left-0 transform -translate-y-1/2 -translate-x-1/2","bottom-right-rounded":"bottom-0 -right-0.5","bottom-right-default":"bottom-0 -right-1.5 translate-y-1/2","bottom-left-rounded":"bottom-0 left-0","bottom-left-default":"-bottom-1.5 left-0 transform -translate-x-1/2 "},N="absolute w-auto h-auto text-gray-400",M="flex overflow-hidden relative justify-center items-center",R="bg-gray-100 dark:bg-gray-600",J="font-medium text-gray-600 dark:text-gray-300",U={xs:"bottom-0",sm:"bottom-0",md:"-bottom-1",lg:"-bottom-2",xl:"-bottom-4"};function W(n){const t=y(()=>i([f[n.size.value],q[n.rounded.value?"rounded":"default"],n.bordered.value?z:"",n.stacked.value?"border-2 border-white dark:border-gray-800":""])),e=y(()=>{const m=`${n.statusPosition.value}-${n.rounded.value?"rounded":"default"}`;return i([$,V[n.status.value],I[m]])}),g=y(()=>i([N,U[n.size.value]])),d=y(()=>i([M,f[n.size.value],q[n.rounded.value?"rounded":"default"],n.img.value&&n.bordered.value?"":R,n.bordered.value?" overflow-visible":""])),F=y(()=>i([J]));return{avatarClasses:t,avatarDotClasses:e,avatarPlaceholderClasses:g,avatarPlaceholderInitialsClasses:F,avatarPlaceholderWrapperClasses:d}}const H={class:"relative"},O=["alt","src"],G=c("path",{"clip-rule":"evenodd",d:"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z","fill-rule":"evenodd"},null,-1),Q=[G],Y=["data-pos"],l=C({__name:"FwbAvatar",props:{alt:{type:String,default:"Avatar"},bordered:{type:Boolean,default:!1},img:{type:String,default:""},rounded:{type:Boolean,default:!1},size:{type:String,default:"md"},stacked:{type:Boolean,default:!1},status:{type:String,default:null},statusPosition:{type:String,default:"top-right"},initials:{type:String,default:null}},setup(n){const t=x(!1);function e(){t.value=!0}const g=j(),d=y(()=>g.placeholder),F=n,{avatarClasses:m,avatarDotClasses:B,avatarPlaceholderClasses:v,avatarPlaceholderInitialsClasses:A,avatarPlaceholderWrapperClasses:D}=W(T(F));return(k,Is)=>(p(),o("div",H,[c("div",{class:E(a(D))},[n.img&&!t.value?(p(),o("img",{key:0,alt:n.alt,class:E(a(m)),src:n.img,onError:e},null,42,O)):!n.initials&&d.value?(p(),o("div",{key:1,class:E(a(v))},[b(k.$slots,"placeholder")],2)):!n.img&&!n.initials?(p(),o("svg",{key:2,class:E(a(v)),fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},Q,2)):(p(),o("div",{key:3,class:E(a(A))},_(n.initials),3))],2),n.status?(p(),o("span",{key:0,class:E(a(B)),"data-pos":n.statusPosition},null,10,Y)):S("",!0)]))}}),K={},L={class:"flex -space-x-4"};function X(n,t){return p(),o("div",L,[b(n.$slots,"default")])}const h=P(K,[["render",X]]),Z=["href"],ss=C({__name:"FwbAvatarStackCounter",props:{total:{type:Number,default:1},href:{type:String,default:"#"}},setup(n){return(t,e)=>(p(),o("a",{class:"relative flex justify-center items-center w-10 h-10 text-xs font-medium text-white bg-gray-700 rounded-full border-2 border-white hover:bg-gray-600 dark:border-gray-800",href:n.href},"+"+_(n.total),9,Z))}}),as={class:"vp-raw flex justify-center space-x-4"},ns={__name:"FwbAvatarExample",setup(n){return(t,e)=>(p(),o("div",as,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},ls={class:"vp-raw flex justify-center"},ps={__name:"FwbAvatarExampleAlt",setup(n){return(t,e)=>(p(),o("div",ls,[s(a(l),{alt:"Alternative text",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},os={class:"vp-raw flex justify-center space-x-4"},ts={__name:"FwbAvatarExampleBordered",setup(n){return(t,e)=>(p(),o("div",os,[s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{bordered:"",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:""})]))}},es={class:"vp-raw flex justify-center space-x-4"},cs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),rs=c("svg",{class:"w-12 h-12",fill:"none","stroke-width":"1.5",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z","stroke-linecap":"round","stroke-linejoin":"round"})],-1),Es={__name:"FwbAvatarExampleIcon",setup(n){return(t,e)=>(p(),o("div",es,[s(a(l),null,{placeholder:u(()=>[cs]),_:1}),s(a(l),{rounded:""},{placeholder:u(()=>[rs]),_:1})]))}},ys={class:"vp-raw flex justify-center space-x-4"},is={__name:"FwbAvatarExampleInitials",setup(n){return(t,e)=>(p(),o("div",ys,[s(a(l),{initials:"JD"}),s(a(l),{initials:"JD",rounded:""})]))}},us={class:"vp-raw flex justify-center space-x-4"},gs={__name:"FwbAvatarExamplePlaceholder",setup(n){return(t,e)=>(p(),o("div",us,[s(a(l)),s(a(l),{rounded:""})]))}},ds={class:"vp-raw flex justify-center items-center space-x-4"},Fs={__name:"FwbAvatarExampleSize",setup(n){return(t,e)=>(p(),o("div",ds,[s(a(l),{size:"xs",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"sm",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"md",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"lg",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"}),s(a(l),{size:"xl",img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg"})]))}},ms={class:"vp-raw grid gap-2"},vs={__name:"FwbAvatarExampleStack",setup(n){return(t,e)=>(p(),o("div",ms,[s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"",stacked:""})]),_:1}),s(a(h),null,{default:u(()=>[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-1.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-2.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-3.jpg",rounded:"",stacked:""}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-4.jpg",rounded:"",stacked:""}),s(a(ss),{href:"#",total:99})]),_:1})]))}},fs={class:"vp-raw flex justify-center space-x-4"},qs={__name:"FwbAvatarExampleStatus",setup(n){return(t,e)=>(p(),o("div",fs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"busy"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"away"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",status:"offline"})]))}},hs={class:"vp-raw flex justify-center space-x-4"},Cs={__name:"FwbAvatarExampleStatusPosition",setup(n){return(t,e)=>(p(),o("div",hs,[s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"top-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-left",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg","status-position":"bottom-right",status:"online"}),s(a(l),{img:"https://flowbite.com/docs/images/people/profile-picture-5.jpg",rounded:"","status-position":"bottom-right",status:"online"})]))}},bs=c("h1",{id:"vue-avatar-flowbite",tabindex:"-1"},[w("Vue Avatar - Flowbite "),c("a",{class:"header-anchor",href:"#vue-avatar-flowbite","aria-label":'Permalink to "Vue Avatar - Flowbite"'},"​")],-1),_s=c("p",null,"Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes",-1),ws=c("h2",{id:"default-avatar",tabindex:"-1"},[w("Default avatar "),c("a",{class:"header-anchor",href:"#default-avatar","aria-label":'Permalink to "Default avatar"'},"​")],-1),Bs=c("p",null,"Use this example to create a circle and rounded avatar on an image element.",-1),As=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="bordered" tabindex="-1">Bordered <a class="header-anchor" href="#bordered" aria-label="Permalink to &quot;Bordered&quot;">​</a></h2><p>Use this example to create a circle and rounded avatar on an image element.</p>`,3),Ds=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">bordered</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">bordered</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">bordered</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">bordered</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="dot-indicator" tabindex="-1">Dot indicator <a class="header-anchor" href="#dot-indicator" aria-label="Permalink to &quot;Dot indicator&quot;">​</a></h2><p>Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).</p>`,3),ks=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;busy&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;away&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;offline&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;busy&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;away&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;offline&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="dot-indicator-position" tabindex="-1">Dot indicator position <a class="header-anchor" href="#dot-indicator-position" aria-label="Permalink to &quot;Dot indicator position&quot;">​</a></h2>`,2),xs=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;top-left&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;top-left&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;top-right&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;top-right&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;bottom-left&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;bottom-left&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;bottom-right&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status-position</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;bottom-right&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">status</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;top-left&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;top-left&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;top-right&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;top-right&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;bottom-left&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;bottom-left&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;bottom-right&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status-position</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;bottom-right&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">status</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;online&quot;</span></span>
<span class="line"><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="sizes" tabindex="-1">Sizes <a class="header-anchor" href="#sizes" aria-label="Permalink to &quot;Sizes&quot;">​</a></h2><p>Choose from multiple sizing options for the avatar component from this example.</p>`,3),js=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex justify-center items-center space-x-4&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;xs&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;sm&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;md&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;lg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;xl&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex justify-center items-center space-x-4&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;xs&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;sm&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;md&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;lg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;xl&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="alternative-text" tabindex="-1">Alternative text <a class="header-anchor" href="#alternative-text" aria-label="Permalink to &quot;Alternative text&quot;">​</a></h2>`,2),Ts=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex justify-center&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Alternative text&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex justify-center&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Alternative text&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="stacked-avatars" tabindex="-1">Stacked avatars <a class="header-anchor" href="#stacked-avatars" aria-label="Permalink to &quot;Stacked avatars&quot;">​</a></h2><p>Use this example if you want to stack a group of users by overlapping the avatar components.</p>`,3),Ss=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;grid gap-2&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">stacked-avatars</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-2.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-3.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-4.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-5.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">stacked-avatars</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">stacked-avatars</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-2.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-3.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;/images/avatar-4.jpg&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stacked</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">stacked-avatars-counter</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">total</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;99&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">stacked-avatars</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;grid gap-2&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">stacked-avatars</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-2.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-3.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-4.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-5.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">stacked-avatars</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">stacked-avatars</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-1.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-2.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-3.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;/images/avatar-4.jpg&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stacked</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">stacked-avatars-counter</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">total</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;99&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">stacked-avatars</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="placeholder-icon" tabindex="-1">Placeholder icon <a class="header-anchor" href="#placeholder-icon" aria-label="Permalink to &quot;Placeholder icon&quot;">​</a></h2>`,2),Ps=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="placeholder-initials" tabindex="-1">Placeholder initials <a class="header-anchor" href="#placeholder-initials" aria-label="Permalink to &quot;Placeholder initials&quot;">​</a></h2>`,2),zs=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">initials</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;JD&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">initials</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;JD&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex justify-center space-x-4&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">initials</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;JD&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">initials</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;JD&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="alternative-placeholder-icon" tabindex="-1">Alternative Placeholder Icon <a class="header-anchor" href="#alternative-placeholder-icon" aria-label="Permalink to &quot;Alternative Placeholder Icon&quot;">​</a></h2><p>Use this example if you&#39;d like to specify a different placeholder icon. Specify a <code>#placeholder</code> template slot to override the default placeholder icon. This has no effect if using initials.</p>`,3),$s=r(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;vp-raw flex justify-center space-x-4&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">placeholder</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;w-12 h-12&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;none&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0 0 24 24&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linecap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linejoin</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">rounded</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">placeholder</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;w-12 h-12&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;none&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1.5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0 0 24 24&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linecap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linejoin</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;round&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-avatar</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbAvatar } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;vp-raw flex justify-center space-x-4&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">placeholder</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;w-12 h-12&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;none&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;0 0 24 24&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linecap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linejoin</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">rounded</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">placeholder</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;w-12 h-12&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;none&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1.5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;0 0 24 24&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linecap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linejoin</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;round&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-avatar</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbAvatar } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,1),Js=JSON.parse('{"title":"Vue Avatar - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md"}'),Vs={name:"components/avatar.md"},Us=Object.assign(Vs,{setup(n){return(t,e)=>(p(),o("div",null,[bs,_s,ws,Bs,s(ns),As,s(ts),Ds,s(qs),ks,s(Cs),xs,s(Fs),js,s(ps),Ts,s(vs),Ss,s(gs),Ps,s(is),zs,s(Es),$s]))}});export{Js as __pageData,Us as default};
Reference in New Issue View Git Blame Copy Permalink