# Avatars

> Components for displaying user avatars with different styles and sizes.

Web: https://vuemail.dev/components/avatars

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Avatars group stacked

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/avatars-group-stacked

### Tailwind

```vue
<script setup lang="ts">
import { Column, Img, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row :width="undefined" class="border-collapse border-spacing-0">
    <Column
      width="44"
      height="44"
      class="h-[44px] w-[44px] p-0 text-center align-middle leading-[0px]"
    >
      <div
        class="box-border h-full w-full overflow-hidden rounded-[100%] border-4 border-solid border-white bg-gray-950"
      >
        <Img
          src="https://github.com/bukinoshita.png?size=100"
          alt="Bu Kinoshita"
          width="40"
          height="40"
          class="inline-block h-full w-full object-cover object-center"
        />
      </div>
    </Column>
    <Column
      width="44"
      height="44"
      class="relative left-[-12px] h-[44px] w-[44px] p-0 text-center align-middle leading-[0px]"
    >
      <div
        class="box-border h-full w-full overflow-hidden rounded-[100%] border-4 border-solid border-white bg-gray-950"
      >
        <Img
          src="https://github.com/bukinoshita.png?size=100"
          alt="Bu Kinoshita"
          width="40"
          height="40"
          class="inline-block h-full w-full object-cover object-center"
        />
      </div>
    </Column>
    <Column
      width="44"
      height="44"
      class="relative left-[-24px] h-[44px] w-[44px] p-0 text-center align-middle leading-[0px]"
    >
      <div
        class="box-border h-full w-full overflow-hidden rounded-[100%] border-4 border-solid border-white bg-gray-950"
      >
        <Img
          src="https://github.com/bukinoshita.png?size=100"
          alt="Bu Kinoshita"
          width="40"
          height="40"
          class="inline-block h-full w-full object-cover object-center"
        />
      </div>
    </Column>
  </Row>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Column, Img, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row
    :width="undefined"
    :style="{
      tableLayout: 'fixed',
      borderCollapse: 'collapse',
      borderSpacing: '0',
    }"
  >
    <Column
      width="44"
      height="44"
      :style="{
        height: '44px',
        width: '44px',
        padding: '0',
        textAlign: 'center',
        verticalAlign: 'middle',
        lineHeight: '0px',
      }"
    >
      <div
        :style="{
          boxSizing: 'border-box',
          height: '100%',
          width: '100%',
          overflow: 'hidden',
          borderRadius: '9999px',
          border: '4px solid white',
          backgroundColor: '#030712',
        }"
      >
        <Img
          src="https://github.com/bukinoshita.png?size=100"
          alt="Bu Kinoshita"
          width="40"
          height="40"
          :style="{
            display: 'inline-block',
            height: '100%',
            width: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
          }"
        />
      </div>
    </Column>
    <Column
      width="44"
      height="44"
      :style="{
        position: 'relative',
        left: '-12px',
        height: '44px',
        width: '44px',
        padding: '0',
        textAlign: 'center',
        verticalAlign: 'middle',
        lineHeight: '0px',
      }"
    >
      <div
        :style="{
          boxSizing: 'border-box',
          height: '100%',
          width: '100%',
          overflow: 'hidden',
          borderRadius: '9999px',
          border: '4px solid white',
          backgroundColor: '#030712',
        }"
      >
        <Img
          src="https://github.com/bukinoshita.png?size=100"
          alt="Bu Kinoshita"
          width="40"
          height="40"
          :style="{
            display: 'inline-block',
            height: '100%',
            width: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
          }"
        />
      </div>
    </Column>
    <Column
      width="44"
      height="44"
      :style="{
        position: 'relative',
        left: '-24px',
        height: '44px',
        width: '44px',
        padding: '0',
        textAlign: 'center',
        verticalAlign: 'middle',
        lineHeight: '0px',
      }"
    >
      <div
        :style="{
          boxSizing: 'border-box',
          height: '100%',
          width: '100%',
          overflow: 'hidden',
          borderRadius: '9999px',
          border: '4px solid white',
          backgroundColor: '#030712',
        }"
      >
        <Img
          src="https://github.com/bukinoshita.png?size=100"
          alt="Bu Kinoshita"
          width="40"
          height="40"
          :style="{
            display: 'inline-block',
            height: '100%',
            width: '100%',
            objectFit: 'cover',
            objectPosition: 'center',
          }"
        />
      </div>
    </Column>
  </Row>
</template>
```

## Avatars with text

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/avatars-with-text

### Tailwind

```vue
<script setup lang="ts">
import { Column, Img, Link, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Link href="https://github.com/zehfernandes">
        <Row class="w-auto table-fixed border-collapse border-spacing-0">
          <Column
            class="h-[44px] w-[44px] overflow-hidden rounded-full p-0 text-center align-middle leading-[0px]"
          >
            <Img
              src="https://github.com/zehfernandes.png?size=100"
              width="36"
              height="36"
              alt="Zeh Fernandes"
              class="h-full w-full object-cover object-center"
            />
          </Column>
          <Column
            class="pl-3 text-[14px] leading-[20px] font-medium text-gray-500"
          >
            <p class="m-0 text-gray-700">Zeh Fernandes</p>
            <p class="m-0 text-[12px] leading-[14px]">Founding Designer</p>
          </Column>
        </Row>
      </Link>
    </Column>
  </Row>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Column, Img, Link, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Link href="https://github.com/zehfernandes">
        <Row
          :style="{
            width: 'auto',
            tableLayout: 'fixed',
            borderCollapse: 'collapse',
            borderSpacing: '0',
          }"
        >
          <Column
            :style="{
              height: '44px',
              width: '44px',
              overflow: 'hidden',
              borderRadius: '9999px',
              padding: '0',
              textAlign: 'center',
              verticalAlign: 'middle',
              lineHeight: '0px',
            }"
          >
            <Img
              src="https://github.com/zehfernandes.png?size=100"
              width="36"
              height="36"
              alt="Zeh Fernandes"
              :style="{
                height: '100%',
                width: '100%',
                objectFit: 'cover',
                objectPosition: 'center',
              }"
            />
          </Column>
          <Column
            :style="{
              paddingLeft: '12px',
              fontSize: '14px',
              lineHeight: '20px',
              fontWeight: 500,
              color: '#6b7280',
            }"
          >
            <p :style="{ margin: '0', color: '#374151' }">Zeh Fernandes</p>
            <p :style="{ margin: '0', fontSize: '12px', lineHeight: '14px' }">
              Founding Designer
            </p>
          </Column>
        </Row>
      </Link>
    </Column>
  </Row>
</template>
```

## Circular avatars

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/avatars-circular

### Tailwind

```vue
<script setup lang="ts">
import { Column, Img, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Img
        src="https://github.com/luxonauta.png?size=100"
        alt="Lucas de França"
        width="30"
        height="30"
        class="inline-block w-[30px] h-[30px] rounded-full"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/luxonauta.png?size=100"
        alt="Lucas de França"
        width="42"
        height="42"
        class="inline-block w-[42px] h-[42px] rounded-full"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/luxonauta.png?size=100"
        alt="Lucas de França"
        width="54"
        height="54"
        class="inline-block w-[54px] h-[54px] rounded-full"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/luxonauta.png?size=100"
        alt="Lucas de França"
        width="66"
        height="66"
        class="inline-block w-[66px] h-[66px] rounded-full"
      />
    </Column>
  </Row>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Column, Img, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Img
        src="https://github.com/luxonauta.png?size=100"
        alt="Lucas de França"
        width="30"
        height="30"
        :style="{
          display: 'inline-block',
          width: '30px',
          height: '30px',
          borderRadius: '9999px',
        }"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/luxonauta.png?size=100"
        alt="Lucas de França"
        width="42"
        height="42"
        :style="{
          display: 'inline-block',
          width: '42px',
          height: '42px',
          borderRadius: '9999px',
        }"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/luxonauta.png?size=100"
        alt="Lucas de França"
        width="54"
        height="54"
        :style="{
          display: 'inline-block',
          width: '54px',
          height: '54px',
          borderRadius: '9999px',
        }"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/luxonauta.png?size=100"
        alt="Lucas de França"
        width="66"
        height="66"
        :style="{
          display: 'inline-block',
          width: '66px',
          height: '66px',
          borderRadius: '9999px',
        }"
      />
    </Column>
  </Row>
</template>
```

## Rounded avatars

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/avatars-rounded

### Tailwind

```vue
<script setup lang="ts">
import { Column, Img, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Img
        src="https://github.com/zenorocha.png?size=100"
        alt="Zeno Rocha"
        width="30"
        height="30"
        class="inline-block w-[30px] h-[30px] rounded-md"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/zenorocha.png?size=100"
        alt="Zeno Rocha"
        width="42"
        height="42"
        class="inline-block w-[42px] h-[42px] rounded-md"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/zenorocha.png?size=100"
        alt="Zeno Rocha"
        width="54"
        height="54"
        class="inline-block w-[54px] h-[54px] rounded-md"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/zenorocha.png?size=100"
        alt="Zeno Rocha"
        width="66"
        height="66"
        class="inline-block w-[66px] h-[66px] rounded-md"
      />
    </Column>
  </Row>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Column, Img, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Img
        src="https://github.com/zenorocha.png?size=100"
        alt="Zeno Rocha"
        width="30"
        height="30"
        :style="{
          display: 'inline-block',
          width: '30px',
          height: '30px',
          borderRadius: '6px',
        }"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/zenorocha.png?size=100"
        alt="Zeno Rocha"
        width="42"
        height="42"
        :style="{
          display: 'inline-block',
          width: '42px',
          height: '42px',
          borderRadius: '6px',
        }"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/zenorocha.png?size=100"
        alt="Zeno Rocha"
        width="54"
        height="54"
        :style="{
          display: 'inline-block',
          width: '54px',
          height: '54px',
          borderRadius: '6px',
        }"
      />
    </Column>
    <Column align="center">
      <Img
        src="https://github.com/zenorocha.png?size=100"
        alt="Zeno Rocha"
        width="66"
        height="66"
        :style="{
          display: 'inline-block',
          width: '66px',
          height: '66px',
          borderRadius: '6px',
        }"
      />
    </Column>
  </Row>
</template>
```