ContextQMD
Back to Daisyui

Avatar

packages/docs/src/routes/(routes)/components/avatar/+page.md

5.5.199.4 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~Avatar

<div class="avatar"> <div class="w-24 rounded bg-base-300"> </div> </div>
html
<div class="$$avatar">
  <div class="w-24 rounded">
    
  </div>
</div>

~Avatar in custom sizes

<div class="avatar"> <div class="w-24 rounded bg-base-300"> </div> </div> <div class="avatar"> <div class="w-16 rounded bg-base-300"> </div> </div> <div class="avatar"> <div class="w-12 rounded bg-base-300"> </div> </div> <div class="avatar"> <div class="w-8 rounded bg-base-300"> </div> </div>
html
<div class="$$avatar">
  <div class="w-32 rounded">
    
  </div>
</div>
<div class="$$avatar">
  <div class="w-20 rounded">
    
  </div>
</div>
<div class="$$avatar">
  <div class="w-16 rounded">
    
  </div>
</div>
<div class="$$avatar">
  <div class="w-8 rounded">
    
  </div>
</div>

~Avatar rounded

<div class="avatar"> <div class="w-24 rounded-xl bg-base-300"> </div> </div> <div class="avatar"> <div class="w-24 rounded-full bg-base-300"> </div> </div>
html
<div class="$$avatar">
  <div class="w-24 rounded-xl">
    
  </div>
</div>
<div class="$$avatar">
  <div class="w-24 rounded-full">
    
  </div>
</div>

~Avatar with mask

<div class="avatar"> <div class="w-24 mask mask-heart bg-base-300"> </div> </div> <div class="avatar"> <div class="w-24 mask mask-squircle bg-base-300"> </div> </div> <div class="avatar"> <div class="w-24 mask mask-hexagon-2 bg-base-300"> </div> </div>
html
<div class="$$avatar">
  <div class="$$mask $$mask-heart w-24">
    
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-squircle w-24">
    
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-hexagon-2 w-24">
    
  </div>
</div>

~Avatar group

<div class="avatar-group -space-x-6"> <div class="avatar"> <div class="w-12 bg-base-300"> 
</div>
</div> <div class="avatar"> <div class="w-12 bg-base-300"> 
</div>
</div> <div class="avatar"> <div class="w-12 bg-base-300"> 
</div>
</div> <div class="avatar"> <div class="w-12 bg-base-300"> 
</div>
</div> </div>
html
<div class="$$avatar-group -space-x-6">
  <div class="$$avatar">
    <div class="w-12">
      
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      
    </div>
  </div>
</div>

~Avatar group with counter

<div class="avatar-group -space-x-6"> <div class="avatar"> <div class="w-12 bg-base-300"> 
</div>
</div> <div class="avatar"> <div class="w-12 bg-base-300"> 
</div>
</div> <div class="avatar"> <div class="w-12 bg-base-300"> 
</div>
</div> <div class="avatar avatar-placeholder"> <div class="w-12 bg-neutral text-neutral-content"> <span>+99</span> </div> </div> </div>
html
<div class="$$avatar-group -space-x-6">
  <div class="$$avatar">
    <div class="w-12">
      
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      
    </div>
  </div>
  <div class="$$avatar $$avatar-placeholder">
    <div class="bg-neutral text-neutral-content w-12">
      <span>+99</span>
    </div>
  </div>
</div>

~Avatar with ring

<div class="avatar"> <div class="w-24 rounded-full ring-2 ring-primary ring-offset-base-100 ring-offset-2"> </div> </div>
html
<div class="$$avatar">
  <div class="ring-primary ring-offset-base-100 w-24 rounded-full ring-2 ring-offset-2">
    
  </div>
</div>

~Avatar with presence indicator

<div class="avatar avatar-online"> <div class="w-24 rounded-full bg-base-300"> </div> </div> <div class="avatar avatar-offline"> <div class="w-24 rounded-full bg-base-300"> </div> </div>
html
<div class="$$avatar $$avatar-online">
  <div class="w-24 rounded-full">
    
  </div>
</div>
<div class="$$avatar $$avatar-offline">
  <div class="w-24 rounded-full">
    
  </div>
</div>

~Avatar placeholder

<div class="avatar avatar-placeholder"> <div class="bg-neutral text-neutral-content rounded-full w-24"> <span class="text-3xl">D</span> </div> </div> <div class="avatar avatar-online avatar-placeholder"> <div class="bg-neutral text-neutral-content rounded-full w-16"> <span class="text-xl">AI</span> </div> </div> <div class="avatar avatar-placeholder"> <div class="bg-neutral text-neutral-content rounded-full w-12"> <span>SY</span> </div> </div> <div class="avatar avatar-placeholder"> <div class="bg-neutral text-neutral-content rounded-full w-8"> <span class="text-xs">UI</span> </div> </div>
html
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-24 rounded-full">
    <span class="text-3xl">D</span>
  </div>
</div>
<div class="$$avatar $$avatar-online $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-16 rounded-full">
    <span class="text-xl">AI</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-12 rounded-full">
    <span>SY</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="bg-neutral text-neutral-content w-8 rounded-full">
    <span class="text-xs">UI</span>
  </div>
</div>