Theme Color Mode:
Directions:
Navigation Styles:
Navigation Menu Style:
Sidemenu Layout Syles:
Page Styles:
Layout Width Styles:
Menu Positions:
Header Positions:
Menu Colors:
Header Colors:
Theme Primary:
Theme Background:
Menu With Background Image:
<div className="box-body py-4">
<span className="avatar me-2 avatar-radius-0">
<img src="../../../assets/images/faces/1.jpg" alt="img"/>
</span>
<span className="avatar me-2">
<img src="../../../assets/images/faces/2.jpg" alt="img" />
</span>
<span className="avatar me-2 avatar-rounded">
<img src="../../../assets/images/faces/3.jpg" alt="img" />
</span>
</div>Avatars of different sizes
<div className="box-body">
{Avatarsize.map((idx)=>
(<span className={`avatar avatar-${idx.class} me-2`}
key={Math.random()}><img src={idx.src} /></span>))}
</div>Avatar contains icons to perform respective action.
<div className="box-body">
{AvatarIcon.map((idx) =>
(<span className={`avatar avatar-${idx.class}
me-2 avatar-rounded`} key={Math.random()}>
<img src={idx.src} alt="img" />
<Link aria-label="anchor" href="#"
className={`badge bg-${idx.color}
rounded-full avatar-badge`}>
<i className={`fe ${idx.icon}
text-[.5rem]`}></i>
</Link></span>))}
</div>avatars having online status indicator.
<div className="box-body">
{AvatarOnline.map((idx) =>
(<span className={`avatar avatar-${idx.class}
me-2 online avatar-rounded`} key={Math.random()}>
<img src={idx.src} alt="img" /></span>))}</div>avatars having a offline status indicator.
<div className="box-body">
{AvatarOffline.map((idx) =>
(<span className={`avatar avatar-${idx.class}
me-2 offline avatar-rounded`} key={Math.random()}>
<img src={idx.src} alt="img" /></span>))}
</div>Avatar numbers indicates the no. of unread notififactions/messages.
251739<div className="box-body">
{AvatarNumber.map((idx) => (<span className={`avatar avatar-${idx.class}
me-2 avatar-rounded`} key={Math.random()}>
<img src={idx.src} alt="img" />
<span className={`badge rounded-full bg-${idx.color}
avatar-badge`}>{idx.number}</span></span>))}
</div>Avatar contains intials when user profile doesn't exist.
<div className="box-body">
{AvatarInitial.map((idx)=>(<span className={`avatar
avatar-${idx.class} m-2 bg-${idx.color}`}
key={Math.random()}> {idx.class}<span>))}
</div>Group of avatars stacked together.
<div className="box-body">
<div className="avatar-list-stacked">{StackedAvatars.map((idx)=>
(<span className="avatar" key={Math.random()}>
<img src={idx.src} alt="img" /> </span> ))}
<Link className="avatar bg-primary text-white" href="#">
+8</Link></div>
</div>Group of avatars stacked together.
<div className="box-body">
<div className="avatar-list-stacked">
{StackedAvatars.map((idx)=>(<span className="avatar avatar-rounded"
key={Math.random()}> <img src={idx.src} alt="img" />
</span>))}
<Link className="avatar bg-primary avatar-rounded
text-white" href="#"> +8</Link>
</div>
</div>