Avatars

Use our custom avatar styles on your profile images or initials.

Letters

Use any size between .w-1 / .h-1 and .!w-[22.5rem] / .h-25 to change the avatar size.

TC AH CH 
<span class="avatar !bg-[rgba(63,120,224)] opacity-100 text-white !w-[5rem] !h-[5rem]">
  <span>TC</span>
</span>

<span class="avatar !bg-[#e0e9fa] text-[#3f78e0]  w-12 h-12">
  <span>AH</span>
</span>

<span class="avatar !bg-[#edf2fc] text-[#3f78e0]  !w-[2.5rem] !h-[2.5rem]">
  <span>CH</span>
</span>

Image

Use any size between .w-1 and .!w-[22.5rem] to change the image size. Image height will change automatically. Make sure to use images with 1:1 ratio to avoid stretching.

image image image 
<img class="avatar !w-[5rem]" src="..." alt="" />
  
<img class="avatar w-12" src="..." alt="" />

<img class="avatar !w-[2.5rem]" src="..." alt="" />

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image