
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/avatar/index.mdx'

## Default Class Table
  
<CssTable name="avatar" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.avatar {
  @apply relative inline-flex;
}
.avatar > div {
  @apply block aspect-square overflow-hidden;
}
.avatar img {
  @apply h-full w-full object-cover;
}
.avatar.placeholder > div {
  @apply flex items-center justify-center;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.avatar-group {
  @apply flex overflow-hidden;
}
.avatar-group :where(.avatar) {
  @apply border-base-100 overflow-hidden rounded-full border-4;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css

```

</div>
</div>



