Dark Logo

Urbix
CTRL D
Notification 4 Unread
Item Back in Stock

Today, 02:45 PM

Good news! The item you wanted is back in stock. Grab it before it’s gone again!

Avatar Iamge
Donald

Friday, 11:29 PM

Birthday Reminder

Tuesday, 02:45 PM

Don’t forget! It’s Emily birthday tomorrow. Send them a message!

Avatar Image
Richard

Monday, 07:14 AM

Avatar Image
Avatar Image
Avatar Image
Jaydon Levin

jaydon@gmail.com

Avatars

Basic Avatars
avatar image
avatar image
avatar image
avatar image
avatar image
avatar image 
<div class="avatar-group">
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
</div>
Avatars Group Image
avatar image
avatar image
avatar image
avatar image
avatar image
avatar image 
<div class="avatar-group">
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
</div>
Avatars Letter
PR
LK
KE
AU
PR
PI 
<div class="avatar-item avatar-md avatar-title text-white bg-primary">
    PR
</div>
<div class="avatar-item avatar-md avatar-title text-white bg-secondary">
    LK
</div>
<div class="avatar-item avatar-md avatar-title text-white bg-success">
    KE
</div>
<div class="avatar-item avatar-md avatar-title text-white bg-info">
    AU
</div>
<div class="avatar-item avatar-md avatar-title text-white bg-warning">
    PR
</div>
<div class="avatar-item avatar-md avatar-title text-white bg-danger">
    PI
</div>
Avatars Group Letter
PR
LI
SH
SU
PR
SR 
<div class="avatar-group">
    <div class="avatar-item avatar-md avatar-title text-white bg-primary">
        PR
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-secondary">
        LI
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-success">
        SH
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-info">
        SU
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-warning">
        PR
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-danger">
        SR
    </div>
</div>
Light Avatars Letter
PR
LK
KE
AU
PR
PI 
<div class="avatar-item avatar-md avatar-title text-white bg-primary">
    PR
</div>
<div class="avatar-item avatar-md avatar-title text-secondary bg-secondary-subtle">
    LK
</div>
<div class="avatar-item avatar-md avatar-title text-success bg-success-subtle">
    KE
</div>
<div class="avatar-item avatar-md avatar-title text-info bg-info-subtle">
    AU
</div>
<div class="avatar-item avatar-md avatar-title text-warning bg-warning-subtle">
    PR
</div>
<div class="avatar-item avatar-md avatar-title text-danger bg-danger-subtle">
    PI
</div>
Light Avatars Group Letter
PR
LI
SH
SU
PR
SR 
<div class="avatar-group">
    <div class="avatar-item avatar-md avatar-title text-primary bg-primary-subtle">
        PR
    </div>
    <div class="avatar-item avatar-md avatar-title text-secondary bg-secondary-subtle">
        LI
    </div>
    <div class="avatar-item avatar-md avatar-title text-success bg-success-subtle">
        SH
    </div>
    <div class="avatar-item avatar-md avatar-title text-info bg-info-subtle">
        SU
    </div>
    <div class="avatar-item avatar-md avatar-title text-warning bg-warning-subtle">
        PR
    </div>
    <div class="avatar-item avatar-md avatar-title text-danger bg-danger-subtle">
        SR
    </div>
</div>
Indicator Position And Icon
avatar image
avatar image 
<div class="d-flex align-items-center flex-wrap gap-3">
    <div class="position-relative">
        <div class="avatar-item avatar-md avatar-title text-primary bg-primary-subtle">
            <i class="ri-user-fill"></i>
        </div>
        <span class="position-absolute border-2 border border-light-subtle h-12px w-12px rounded-circle bg-primary end-0 bottom-0"></span>
    </div>
    <div class="position-relative">
        <div class="avatar-item avatar-md avatar-title text-danger bg-danger-subtle">
            <i class="ri-user-fill"></i>
        </div>
        <span class="position-absolute border-2 border border-light-subtle h-12px w-12px rounded-circle bg-danger end-0 top-0"></span>
    </div>
    <div class="position-relative">
        <div class="avatar-item avatar-md">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <span class="position-absolute border-2 border border-light-subtle h-12px w-12px rounded-circle bg-success end-0 bottom-0"></span>
    </div>
    <div class="position-relative">
        <div class="avatar-item avatar-md">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <span class="position-absolute border-2 border border-light-subtle h-12px w-12px rounded-circle bg-success end-0 top-0"></span>
    </div>
</div>
Radius
avatar image
avatar image
avatar image 
<div class="d-flex align-items-center flex-wrap gap-3">
    <div class="avatar-item avatar-lg rounded-0 avatar-title text-primary bg-primary-subtle">
        <i class="ri-user-fill"></i>
    </div>
    <div class="avatar-item avatar-lg rounded-2 avatar-title text-primary bg-primary-subtle">
        <i class="ri-user-fill"></i>
    </div>
    <div class="avatar-item avatar-lg avatar-title text-primary bg-primary-subtle">
        <i class="ri-user-fill"></i>
    </div>
    <div class="avatar-item avatar-lg">
        <img class="img-fluid avatar-lg rounded-0" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-lg">
        <img class="img-fluid avatar-lg rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-lg">
        <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
</div>
Basic Avatars Size
avatar image
avatar image
avatar image
avatar image
avatar image 
<div class="d-flex align-items-center flex-wrap gap-3">
    <div class="avatar-item avatar-xl">
        <img class="img-fluid avatar-xl" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-lg">
        <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-md">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-sm">
        <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-xs">
        <img class="img-fluid avatar-xs" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
</div>
Avatars Group Size
avatar image
avatar image
avatar image
avatar image
avatar image
5+
avatar image
avatar image
avatar image
avatar image
avatar image
5+
avatar image
avatar image
avatar image
avatar image
avatar image
5+ 
<div class="avatar-group">
    <div class="avatar-item">
        <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-lg fw-semibold avatar-title bg-primary">
        5+
    </div>
</div>
<div class="avatar-group">
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-md fw-semibold avatar-title bg-primary">
        5+
    </div>
</div>
<div class="avatar-group">
    <div class="avatar-item">
        <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item">
        <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
    </div>
    <div class="avatar-item avatar-sm fw-semibold avatar-title bg-primary">
        5+
    </div>
</div>

Theme Customization

Layout:
Vertical
Horizontal
Semi Box
Content Width:
Default
Box
Layout Direction:
LTR
RTL
Layout Mode:
Light
Dark
System
Sidebar Size:
Default
Medium
Icon
Icon hover
Sidebar Color:
Light
Dark