User Avatars - Blocks

Basic Circular Avatar

import { Container, Img, Tailwind } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Img
      src="https://example.com/avatar.jpg"
      alt="John Doe"
      width={48}
      height={48}
      style={{
        borderRadius: '50%',
        display: 'inline-block',
        verticalAlign: 'middle'
      }}
    />
  </Container>
</Tailwind>

Rounded Avatar

import { Container, Img, Tailwind } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Img
      src="https://example.com/avatar.jpg"
      alt="Sarah Smith"
      width={48}
      height={48}
      style={{
        borderRadius: 8,
        display: 'inline-block',
        verticalAlign: 'middle'
      }}
    />
  </Container>
</Tailwind>

Avatar with Name

import { Column, Container, Img, Row, Tailwind, Text } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Row>
      <Column style={{ width: 48, verticalAlign: 'middle' }}>
        <Img
          src="https://example.com/avatar.jpg"
          alt="Jane Doe"
          width={48}
          height={48}
          style={{ borderRadius: '50%' }}
        />
      </Column>
      <Column style={{ paddingLeft: 12, verticalAlign: 'middle' }}>
        <Text style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>
          Jane Doe
        </Text>
      </Column>
    </Row>
  </Container>
</Tailwind>

Avatar with Name and Description

import { Column, Container, Img, Row, Tailwind, Text } from 'jsx-email';

<Tailwind>
  <Container className="mx-auto max-w-[600px]">
    <Row>
      <Column style={{ width: 48, verticalAlign: 'middle' }}>
        <Img
          src="https://example.com/avatar.jpg"
          alt="Mike Johnson"
          width={48}
          height={48}
          style={{ borderRadius: '50%' }}
        />
      </Column>
      <Column style={{ paddingLeft: 12, verticalAlign: 'middle' }}>
        <Text style={{ margin: 0, fontSize: 14, fontWeight: 600, color: '#111827' }}>
          Mike Johnson
        </Text>
        <Text style={{ margin: 0, fontSize: 12, color: '#6b7280' }}>
          Software Engineer
        </Text>
      </Column>
    </Row>
  </Container>
</Tailwind>