@ds-kit/avatar
v3.1.0
Published
Avatar component
Downloads
4
Readme
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"
/>
</>