Mazatlán International Center

Letters

Use any size between .w-1 / .h-1 and .w-25 / .h-25 to change the avatar size.

TCAHCH

<span className="avatar bg-primary text-white w-15 h-15 me-4">
  <span className="fs-30">TC</span>
</span>

<span className="avatar bg-pale-primary text-primary w-12 h-12 me-4">
  <span className="fs-18">AH</span>
</span>

<span className="avatar bg-soft-primary text-primary w-10 h-10 me-4">
  <span className="fs-15">CH</span>
</span>

Image

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

View example's code

<img class="avatar w-15" src="..." alt="" />
<img class="avatar w-12" src="..." alt="" />
<img class="avatar w-10" src="..." alt="" />

Avatars

Letters

Image

Piensa de forma única y sé creativo. Marca la diferencia con Sandbox.

Dirección

Teléfono

Correo Electrónico

Redes Sociales

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Avatars

Letters

Image

Piensa de forma única y sé creativo. Marca la diferencia con Sandbox.