Avatar

Shape

Default

Preview

Code

HTML

Code

JSX/TSX

<div class="avatar">
	<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>

<div className='avatar'>
  <img alt='avatar'
    src='https://picsum.photos/id/64/200/200' />
</div>

Square

Preview

Code

HTML

Code

JSX/TSX

<div class="avatar square">
	<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>

<div className='avatar square'>
  <img alt='avatar'
    src='https://picsum.photos/id/64/200/200' />
</div>

Ring

Preview

Code

HTML

Code

JSX/TSX

<div class="avatar ring success">
	<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
</div>

<div className='avatar ring success'>
  <img alt='avatar'
    src='https://picsum.photos/id/64/200/200' />
</div>

Size

Preview

Code

HTML

Code

JSX/TSX

<div class="flex gap-4">
	<div class="avatar xs">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar sm">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar md">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar lg">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar xl">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
</div>

<div className='flex gap-4'>
  <div className='avatar xs'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar sm'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar md'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar lg'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar xl'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
</div>

Text

Preview

Code

HTML

Code

JSX/TSX

<div class="avatar success">
	<div>RV</div>
</div>

<div className='avatar success'>
  <div>
    RV
  </div>
</div>

Group

Preview

Code

HTML

Code

JSX/TSX

<div class="avatar-group">
	<div class="avatar">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar success">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar warn">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
	<div class="avatar danger">
		<img alt="avatar" src="https://picsum.photos/id/64/200/200" />
	</div>
</div>

<div className='avatar-group'>
  <div className='avatar'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar success'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar warn'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
  <div className='avatar danger'>
    <img alt='avatar'
      src='https://picsum.photos/id/64/200/200' />
  </div>
</div>

Classes

Class Name	Description
avatar	Wrapper htmlFor avatar img
square	Set square shape(default: circle)
ring	Set ring style
avatar-group	Wrapper htmlFor avatar group
xs	Set extra small size
sm	Set small size
md	Set medium size
lg	Set large size
xl	Set extra large size

Accordion Badge