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"
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" />
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" /> </>
src
string
alt
string
size
string
arrayOf
"3rem"