Avatar

Example

vue

<template>
 <Avatar
  circle
  size="h1"
  img-src="https://reqres.in/img/faces/1-image.jpg"
  img-alt="Image Description"
 />
 <Avatar
  circle
  size="h2"
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
 />
 <Avatar
  circle
  size="lg"
  img-src="https://reqres.in/img/faces/3-image.jpg"
  img-alt="Image Description"
 />
 <Avatar
  circle
  img-src="https://reqres.in/img/faces/4-image.jpg"
  img-alt="Image Description"
 />
 <Avatar
  circle
  size="sm"
  img-src="https://reqres.in/img/faces/5-image.jpg"
  img-alt="Image Description"
 />
</template>

Initials

vue

<template>
 <Avatar
  circle
  size="h1"
  color="primary"
  initials="A"
 />
 <Avatar
  circle
  size="h2"
  color="primary"
  initials="A"
 />
 <Avatar
  circle
  size="lg"
  color="primary"
  initials="A"
 />
 <Avatar
  circle
  color="primary"
  initials="A"
 />
 <Avatar
  circle
  size="sm"
  color="primary"
  initials="A"
 />
</template>

Shapes

vue

<template>
 <Avatar
  margin="e-2"
  img-src="https://reqres.in/img/faces/1-image.jpg"
  img-alt="Image Description"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
 />
</template>

vue

<template>
 <Avatar
  margin="e-2"
  color="primary"
  initials="A"
 />
 <Avatar
  margin="e-2"
  circle
  color="primary"
  initials="A"
 />
</template>

Ratio

vue

<template>
 <Avatar
  size="h1"
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
 <Avatar
  size="h2"
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
 <Avatar
  size="lg"
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
 <Avatar
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
 <Avatar
  size="sm"
  ratio="4x3"
  img-src="https://placehold.jp/400x300.png"
  img-alt="Image Description"
 />
</template>

Centered

vue

<template>
 <Avatar
  circle
  size="h1"
  flex
  margin="x-auto"
  img-src="https://reqres.in/img/faces/1-image.jpg"
  img-alt="Image Description"
 />
</template>

Status

vue

<template>
 <Avatar
  margin="e-2"
  img-src="https://reqres.in/img/faces/1-image.jpg"
  img-alt="Image Description"
  status
  status-sm
  status-color="primary"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status
  status-sm
  status-color="primary"
 />
 <Avatar
  margin="e-2"
  size="lg"
  img-src="https://reqres.in/img/faces/3-image.jpg"
  img-alt="Image Description"
  status
  status-sm
  status-color="primary"
 />
 <Avatar
  margin="e-2"
  circle
  size="lg"
  img-src="https://reqres.in/img/faces/4-image.jpg"
  img-alt="Image Description"
  status
  status-color="primary"
 />
 <Avatar
  margin="e-2"
  size="xl"
  img-src="https://reqres.in/img/faces/5-image.jpg"
  img-alt="Image Description"
  status
  status-color="primary"
 />
 <Avatar
  margin="e-2"
  circle
  size="xl"
  img-src="https://reqres.in/img/faces/6-image.jpg"
  img-alt="Image Description"
  status
  status-color="primary"
 />
</template>

vue

<template>
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status="sm"
  status-color="primary"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status="sm"
  status-color="secondary"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status="sm"
  status-color="success"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status="sm"
  status-color="danger"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status="sm"
  status-color="warning"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status="sm"
  status-color="info"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status="sm"
  status-color="light"
 />
 <Avatar
  margin="e-2"
  circle
  img-src="https://reqres.in/img/faces/2-image.jpg"
  img-alt="Image Description"
  status="sm"
  status-color="dark"
 />
</template>

Icons

vue

<template>
 <Avatar
  circle
  icon="bi:dropbox"
  size="h1"
  color="primary"
 />
 <Avatar
  circle
  icon="bi:dropbox"
  size="h2"
  color="primary"
 />
 <Avatar
  circle
  icon="bi:dropbox"
  size="lg"
  color="primary"
 />
 <Avatar
  circle
  icon="bi:dropbox"
  color="primary"
 />
 <Avatar
  circle
  icon="bi:dropbox"
  size="sm"
  color="primary"
 />
</template>

Theme colors

primary

secondary

success

danger

warning

info

primary-subtle

secondary-subtle

success-subtle

danger-subtle

warning-subtle

info-subtle

light-subtle

dark-subtle

All colors

blue

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

blue-900

indigo

indigo-100

indigo-200

indigo-300

indigo-400

indigo-500

indigo-600

indigo-700

indigo-800

indigo-900

purple

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

purple-700

purple-800

purple-900

pink

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

pink-700

pink-800

pink-900

red

red-100

red-200

red-300

red-400

red-500

red-600

red-700

red-800

red-900

orange

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

yellow

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

green

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

teal

teal-100

teal-200

teal-300

teal-400

teal-500

teal-600

teal-700

teal-800

teal-900

cyan

cyan-100

cyan-200

cyan-300

cyan-400

cyan-500

cyan-600

cyan-700

cyan-800

cyan-900

With Stack Group

vue

<template>
 <StackGroup>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/1-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/2-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/3-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/4-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/5-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
 </StackGroup>
</template>

Bootstrap

Avatar

Example

Initials

Shapes

Ratio

Centered

Status

Icons

Theme colors

All colors

With Stack Group

See Also

Status indicator

Icon box

Stack group

Rating

Icons

Images