flowbite-mcp 1.0.0

package/data/components/avatar.md

@@ -0,0 +1,178 @@
+---
+layout: docs
+title: Tailwind CSS Avatar - Flowbite
+description: 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
+group: components
+toc: true
+
+previous: Alerts
+previousLink: components/alerts/
+next: Badge
+nextLink: components/badge/
+---
+
+The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS.
+
+## Default avatar
+
+Use this example to create a circle and rounded avatar on an image element.
+
+{{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true >}}
+<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
+<img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Default avatar">
+{{< /example >}}
+
+## Bordered
+
+Apply a border around the avatar component you can use the `ring-{color}` class from Tailwind CSS.
+
+{{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
+<img class="w-10 h-10 p-1 rounded-full ring-2 ring-default" src="/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar">
+{{< /example >}}
+
+## Placeholder icon
+
+Use this example as a placeholder icon for the user profile when there is no custom image available.
+
+{{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
+<div class="relative w-10 h-10 overflow-hidden bg-neutral-secondary-medium rounded-full">
+    <svg class="absolute w-12 h-12 text-body-subtle -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
+</div>
+{{< /example >}}
+
+## Placeholder initials
+
+This example can be used to show the initials of the user's first and last name as a placeholder when no profile picture is available.
+
+{{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
+<div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-neutral-tertiary rounded-full">
+    <span class="font-medium text-body">JL</span>
+</div>
+{{< /example >}}
+
+## Avatar tooltip
+
+Use this example to show a tooltip when hovering over the avatar.
+
+{{< example class="flex items-center justify-center pt-8 gap-4" github="components/avatar.md" show_dark=true >}}
+<div>
+  <div id="tooltip-jese" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
+      Jese Leos
+      <div class="tooltip-arrow" data-popper-arrow></div>
+  </div>
+  <img data-tooltip-target="tooltip-jese" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Medium avatar">
+</div>
+<div>
+  <div id="tooltip-roberta" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
+      Roberta Casas
+      <div class="tooltip-arrow" data-popper-arrow></div>
+  </div>
+  <img data-tooltip-target="tooltip-roberta" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-4.jpg" alt="Medium avatar">
+</div>
+<div>
+  <div id="tooltip-bonnie" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
+      Bonnie Green
+      <div class="tooltip-arrow" data-popper-arrow></div>
+  </div>
+  <img data-tooltip-target="tooltip-bonnie" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-3.jpg" alt="Medium avatar">
+</div>
+{{< /example >}}
+
+## Dot indicator
+
+Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
+
+{{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true >}}
+<div class="relative">
+    <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
+    <span class="top-0 left-7 absolute  w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
+</div>
+<div class="relative">
+    <img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="">
+    <span class="absolute top-0 left-8 transform -translate-y-1/2 w-3.5 h-3.5 bg-danger border-2 border-buffer rounded-full"></span>
+</div>
+<div class="relative">
+    <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
+    <span class="bottom-0 left-7 absolute  w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
+</div>
+<div class="relative">
+    <img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="">
+    <span class="absolute bottom-0 left-8 transform translate-y-1/4 w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
+</div>
+{{< /example >}}
+
+## Stacked
+
+Use this example if you want to stack a group of users by overlapping the avatar components.
+
+{{< example class="flex justify-center gap-4 rtl:gap-8" github="components/avatar.md" show_dark=true >}}
+<div class="flex -space-x-4 rtl:space-x-reverse">
+    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
+    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="">
+    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="">
+    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="">
+</div>
+<div class="flex -space-x-4 rtl:space-x-reverse">
+    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
+    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="">
+    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="">
+    <a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-dark-strong border-2 border-buffer rounded-full" href="#">+99</a>
+</div>
+{{< /example >}}
+
+## Avatar text
+
+This example can be used if you want to show additional information in the form of text elements such as the user's name and join date.
+
+{{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
+<div class="flex items-center gap-2.5">
+    <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
+    <div class="font-medium text-heading">
+        <div>Jese Leos</div>
+        <div class="text-sm font-normal text-body">Joined in August 2014</div>
+    </div>
+</div>
+{{< /example >}}
+
+## User dropdown
+
+Use this example if you want to show a dropdown menu when clicking on the avatar component.
+
+{{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true iframeHeight="360" >}}
+<img id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="w-10 h-10 rounded-full cursor-pointer" src="/docs/images/people/profile-picture-5.jpg" alt="User dropdown">
+
+<!-- Dropdown menu -->
+<div id="userDropdown" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-44">
+    <div class="px-4 py-3 border-b border-default-medium text-sm text-heading">
+      <div class="font-medium">Bonnie Green</div>
+      <div class="truncate">name@flowbite.com</div>
+    </div>
+    <ul class="p-2 text-sm text-body font-medium" aria-labelledby="avatarButton">
+      <li>
+        <a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Dashboard</a>
+      </li>
+      <li>
+        <a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Settings</a>
+      </li>
+      <li>
+        <a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Earnings</a>
+      </li>
+      <li>
+        <a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium text-fg-danger rounded-md">Sign out</a>
+      </li>
+    </ul>
+</div>
+{{< /example >}}
+
+## Sizes
+
+Choose from multiple sizing options for the avatar component from this example.
+
+{{< example class="flex flex-wrap items-center justify-center gap-6" github="components/avatar.md" show_dark=true >}}
+<img class="w-4.5 h-4.5 rounded-sm" src="/docs/images/people/profile-picture-5.jpg" alt="Extra small avatar">
+<img class="w-6 h-6 rounded-sm" src="/docs/images/people/profile-picture-5.jpg" alt="Small avatar">
+<img class="w-8 h-8 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Base avatar">
+<img class="w-11 h-11 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Large avatar">
+<img class="w-14 h-14 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="xl avatar">
+<img class="w-16 h-16 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="2xl avatar">
+{{< /example >}}