#### It's me!

```jsx
<ContactListItem
  i18n={util.i18n}
  isMe
  name="Someone 🔥 Somewhere"
  phoneNumber="(202) 555-0011"
  verified
  profileName="🔥Flames🔥"
  avatarPath={util.gifObjectUrl}
  onClick={() => console.log('onClick')}
/>
```

#### With name and profile

Note the proper spacing between these two.

```jsx
<div>
  <ContactListItem
    i18n={util.i18n}
    name="Someone 🔥 Somewhere"
    phoneNumber="(202) 555-0011"
    profileName="🔥Flames🔥"
    avatarPath={util.gifObjectUrl}
    onClick={() => console.log('onClick')}
  />
  <ContactListItem
    i18n={util.i18n}
    name="Another ❄️ Yes"
    phoneNumber="(202) 555-0011"
    profileName="❄️Ice❄️"
    avatarPath={util.gifObjectUrl}
    onClick={() => console.log('onClick')}
  />
</div>
```

#### With name and profile, verified

```jsx
<ContactListItem
  i18n={util.i18n}
  name="Someone 🔥 Somewhere"
  phoneNumber="(202) 555-0011"
  profileName="🔥Flames🔥"
  verified
  avatarPath={util.gifObjectUrl}
  onClick={() => console.log('onClick')}
/>
```

#### With name and profile, no avatar

```jsx
<ContactListItem
  i18n={util.i18n}
  name="Someone 🔥 Somewhere"
  color="teal"
  phoneNumber="(202) 555-0011"
  profileName="🔥Flames🔥"
  onClick={() => console.log('onClick')}
/>
```

#### Profile, no name, no avatar

```jsx
<ContactListItem
  i18n={util.i18n}
  phoneNumber="(202) 555-0011"
  profileName="🔥Flames🔥"
  onClick={() => console.log('onClick')}
/>
```

#### Verified, profile, no name, no avatar

```jsx
<ContactListItem
  i18n={util.i18n}
  phoneNumber="(202) 555-0011"
  profileName="🔥Flames🔥"
  verified
  onClick={() => console.log('onClick')}
/>
```

#### No name, no profile, no avatar

```jsx
<ContactListItem
  i18n={util.i18n}
  phoneNumber="(202) 555-0011"
  onClick={() => console.log('onClick')}
/>
```

#### Verified, no name, no profile, no avatar

```jsx
<ContactListItem
  i18n={util.i18n}
  phoneNumber="(202) 555-0011"
  verified
  onClick={() => console.log('onClick')}
/>
```