<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Images')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Base UI', 'title' => 'Images')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Base UI', 'title' => 'Images')) ?>

                    <div class="container">
<div class="grid grid-cols-1 gap-base mb-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Shapes</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<p class="text-default-400 mb-4">Avatars with different sizes and shapes.</p>
<div class="grid grid-cols-1 md:grid-cols-6 gap-base">
<div>
<img alt="image" src="/images/stock/small-1.jpg"/>
</div>
<div>
<img alt="image" class="rounded" src="/images/stock/small-2.jpg"/>
</div>
<div>
<img alt="image" class="mx-auto rounded" src="/images/users/user-2.jpg"/>
</div>
<div>
<img alt="image" class="mx-auto rounded-full" src="/images/users/user-5.jpg"/>
</div>
<div>
<img alt="image" class="bg-default-100 border-default-300 rounded border p-1" src="/images/stock/small-5.jpg"/>
</div>
<div>
<img alt="image" class="bg-default-100 border-default-300 mx-auto rounded-full border p-1" src="/images/users/user-8.jpg"/>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-base mb-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Avatar Sizes</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-base">
<div>
<img alt="image" class="mx-auto size-6 rounded" src="/images/users/user-2.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-6</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-6 items-center justify-center rounded font-medium text-white">xs</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-6</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-6 items-center justify-center rounded font-medium">xs</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-6</code>
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-base">
<div>
<img alt="image" class="mx-auto size-8 rounded" src="/images/users/user-3.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-8</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-8 items-center justify-center rounded font-medium text-white">sm</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-8</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-8 items-center justify-center rounded font-medium">sm</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-8</code>
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-base">
<div>
<img alt="image" class="mx-auto size-9 rounded" src="/images/users/user-4.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-9</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-9 items-center justify-center rounded font-medium text-white">md</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-9</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-9 items-center justify-center rounded font-medium">md</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-9</code>
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-base">
<div>
<img alt="image" class="mx-auto size-11 rounded" src="/images/users/user-5.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-11</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-11 items-center justify-center rounded font-medium text-white">LG</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-11</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-11 items-center justify-center rounded font-medium">LG</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-11</code>
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-base">
<div>
<img alt="image" class="mx-auto size-12 rounded" src="/images/users/user-6.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-12</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-12 items-center justify-center rounded font-medium text-white">XL</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-12</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-12 items-center justify-center rounded font-medium">XL</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-12</code>
</p>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
<div class="card">
<div class="card-header">
<h4 class="card-title">Avatar Sizes with Rounded</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-base">
<div>
<img alt="image" class="mx-auto size-6 rounded-full" src="/images/users/user-7.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-6</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-6 items-center justify-center rounded-full font-medium text-white">xs</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-6</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-6 items-center justify-center rounded-full font-medium">xs</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-6</code>
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-base">
<div>
<img alt="image" class="mx-auto size-8 rounded-full" src="/images/users/user-8.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-8</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-8 items-center justify-center rounded-full font-medium text-white">sm</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-8</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-8 items-center justify-center rounded-full font-medium">sm</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-8</code>
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-base">
<div>
<img alt="image" class="mx-auto size-9 rounded-full" src="/images/users/user-9.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-9</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-9 items-center justify-center rounded-full font-medium text-white">md</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-9</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-9 items-center justify-center rounded-full font-medium">md</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-9</code>
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-base">
<div>
<img alt="image" class="mx-auto size-11 rounded-full" src="/images/users/user-10.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-11</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-11 items-center justify-center rounded-full font-medium text-white">LG</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-11</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-11 items-center justify-center rounded-full font-medium">LG</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-11</code>
</p>
</div>
</div>
<div class="mt-4 grid grid-cols-3 gap-base">
<div>
<img alt="image" class="mx-auto size-12 rounded-full" src="/images/users/user-1.jpg"/>
<p class="mt-2.5 mb-4 text-center">
<code>.size-12</code>
</p>
</div>
<div>
<div class="bg-primary mx-auto flex size-12 items-center justify-center rounded-full font-medium text-white">XL</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-12</code>
</p>
</div>
<div>
<div class="bg-primary/15 text-primary mx-auto flex size-12 items-center justify-center rounded-full font-medium">XL</div>
<p class="mt-2.5 mb-4 text-center">
<code>.size-12</code>
</p>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
<div class="grid grid-cols-1">
<div class="card">
<div class="card-header">
<h4 class="card-title">Avatar Groups</h4>
<button class="btn size-6 rounded-full bg-light text-dark hover:text-primary" data-action="card-toggle">
<i class="iconify tabler--chevron-up text-base"></i>
</button>
</div>
<div class="card-body">
<div class="grid grid-cols-1 xl:grid-cols-4 lg:gap-base">
<div class="flex -space-x-3">
<img alt="" class="size-8 transform rounded-full duration-300 hover:-translate-y-0.5" src="/images/users/user-4.jpg"/>
<img alt="" class="size-8 transform rounded-full duration-300 hover:-translate-y-0.5" src="/images/users/user-5.jpg"/>
<img alt="" class="size-8 transform rounded-full duration-300 hover:-translate-y-0.5" src="/images/users/user-3.jpg"/>
<img alt="" class="size-8 transform rounded-full duration-300 hover:-translate-y-0.5" src="/images/users/user-8.jpg"/>
<img alt="" class="size-8 transform rounded-full duration-300 hover:-translate-y-0.5" src="/images/users/user-2.jpg"/>
</div>
<div class="flex -space-x-3">
<div class="bg-danger flex size-9 transform items-center justify-center rounded-full font-medium text-white duration-300 hover:-translate-y-0.5">D</div>
<div class="bg-primary flex size-9 transform items-center justify-center rounded-full font-medium text-white duration-300 hover:-translate-y-0.5">K</div>
<div class="bg-secondary flex size-9 transform items-center justify-center rounded-full font-medium text-white duration-300 hover:-translate-y-0.5">H</div>
<div class="bg-warning flex size-9 transform items-center justify-center rounded-full font-medium text-white duration-300 hover:-translate-y-0.5">L</div>
<div class="bg-info flex size-9 transform items-center justify-center rounded-full font-medium text-white duration-300 hover:-translate-y-0.5">G</div>
</div>
<div class="flex -space-x-3">
<div class="bg-danger/15 text-danger relative flex size-11 transform items-center justify-center rounded-full font-semibold backdrop-blur-sm duration-300 hover:z-10 hover:-translate-y-0.5">D</div>
<div class="bg-primary/15 text-primary relative flex size-11 transform items-center justify-center rounded-full font-semibold backdrop-blur-sm duration-300 hover:z-10 hover:-translate-y-0.5">K</div>
<div class="bg-secondary/15 text-secondary relative flex size-11 transform items-center justify-center rounded-full font-semibold backdrop-blur-sm duration-300 hover:z-10 hover:-translate-y-0.5">H</div>
<div class="bg-warning/15 text-warning relative flex size-11 transform items-center justify-center rounded-full font-semibold backdrop-blur-sm duration-300 hover:z-10 hover:-translate-y-0.5">L</div>
<div class="bg-info/15 text-info relative flex size-11 transform items-center justify-center rounded-full font-semibold backdrop-blur-sm duration-300 hover:z-10 hover:-translate-y-0.5">G</div>
</div>
<div class="flex -space-x-3">
<img alt="" class="size-12 transform rounded-full duration-300 hover:-translate-y-0.5" src="/images/users/user-10.jpg"/>
<div class="bg-info flex size-12 transform items-center justify-center rounded-full font-medium text-white duration-300 hover:-translate-y-0.5">D</div>
<img alt="" class="size-12 transform rounded-full duration-300 hover:-translate-y-0.5" src="/images/users/user-7.jpg"/>
<img alt="" class="size-12 transform rounded-full duration-300 hover:-translate-y-0.5" src="/images/users/user-1.jpg"/>
<div class="bg-danger flex size-12 transform items-center justify-center rounded-full text-lg font-medium text-white duration-300 hover:-translate-y-0.5">9+</div>
</div>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>