---
name: ProfileImage
menu: Atoms
route: /atoms/ProfileImage
---

import ProfileImage from './ProfileImage';
import { Playground, Props } from 'docz';

# ProfileImage

This component renders an HTML `<span>` and passes along all props.

## API
<Props of={ProfileImage} />

## Base
<Playground>
	<ProfileImage name="Datank" />
</Playground>

## With image
<Playground>
	<ProfileImage
		small={false}
		profile
		color={"#27ae60"}
		name="Dummy"
		card={false}
	/>
</Playground>

## Small with image
<Playground>
	<ProfileImage
		small
		src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/54/549723448131c6597ed5ff00d996c7cde7bc8d9c.jpg"
		card={false}
		size="55px"
	/>
</Playground>

## Card without image
<Playground>
	<ProfileImage
		name="Datank"
		card
		profile
	/>
</Playground>

## Card without image and custom size
<Playground>
	<ProfileImage
	 size="25px"
		name="Datank"
		card
		profile
	/>
</Playground>