@ds-kit/avatar

---

title: "Avatar" slug: "/packages/avatar" category: "general" componentNames:

• "Avatar"

---

Avatar

The Avatar component can be used to show an author portrait in blog post footers, or footers in story listings and featured stories. It can also be used to show team members.

import Avatar from "@ds-kit/avatar"

Basic Example

A basic example of an Avatar component can look like this:

<Avatar
  size="6rem"
  alt="Daniel's avatar"
  src="https://www.datocms-assets.com/5436/1541434376-daniel.png?w=300&h=300&fit=facearea&facepad=2&auto=format&fm=jpg"
/>

Different sizes example

An example of an Avatar component with different sizes props can look like this:

<>
  <Avatar
    size="2rem"
    alt="Daniel's avatar"
    display="inline-block"
    src="https://www.datocms-assets.com/5436/1541434376-daniel.png?w=300&h=300&fit=facearea&facepad=2&auto=format&fm=jpg"
  />
  <Avatar
    size="4rem"
    alt="Daniel's avatar"
    display="inline-block"
    src="https://www.datocms-assets.com/5436/1541434376-daniel.png?w=300&h=300&fit=facearea&facepad=2&auto=format&fm=jpg"
  />
  <Avatar
    size="6rem"
    alt="Daniel's avatar"
    display="inline-block"
    src="https://www.datocms-assets.com/5436/1541434376-daniel.png?w=300&h=300&fit=facearea&facepad=2&auto=format&fm=jpg"
  />
</>