A wrapper for images, not the blue alien movie.

  <figure  f-avatar><img src="https://robohash.org/234" /></figure>
  <figure  f-avatar f-avatar-sm><img src="https://robohash.org/445" /></figure>
  <figure  f-avatar f-avatar-md><img src="https://robohash.org/555" /></figure>
  <figure  f-avatar f-avatar-lg><img src="https://robohash.org/666" /></figure>
  <figure  f-avatar f-avatar-xl><img src="https://robohash.org/777" /></figure>

  <figure  f-avatar-square><img src="https://robohash.org/234" /></figure>
  <figure  f-avatar-square f-avatar-sm><img src="https://robohash.org/445" /></figure>
  <figure  f-avatar-square f-avatar-md><img src="https://robohash.org/555" /></figure>
  <figure  f-avatar-square f-avatar-lg><img src="https://robohash.org/666" /></figure>
  <figure  f-avatar-square f-avatar-xl><img src="https://robohash.org/777" /></figure>

Optional Attributes

f-avatar-{size}

• f-avatar-sm
• f-avatar-md
• f-avatar-lg
• f-avatar-xl

  f-avatar-square

• Creates a squared avatar (with with round corners)

  f-bg-{color}

• Add a background to your avatars (if they're using transparent pngs);