avatar.md

Avatar

Renders an avatar image.

<div>
    <Avatar src="/images/avatars/1.jpg" size="small" />
    <Avatar src="/images/avatars/2.jpg" size="medium" />
    <Avatar src="/images/avatars/3.jpg" size="large" />
    <Avatar src="/images/avatars/4.jpg" size="xlarge" />
</div>

Props

src={string}
URI for the avatar image.

size={string}
Controls the size of the avatar. One of "small", "medium", "large", or "xlarge".

CSS

Adds dp-avatar to the root element.

Adds dp-avatar--${size} where ${size} is the value of the size prop.

Examples

import React from 'react';
import { render } from 'react-dom';
import Avatar from 'Components/Avatar';

const App = () => (
    <div>
        <Avatar src="/images/avatars/1.jpg" />
    </div>
);

render(<App />, document.getElementById('mount'));