Avatars

const Avatar = require('gitbook-styleguide/lib/Avatar');
const AvatarsStack = require('gitbook-styleguide/lib/AvatarsStack');

Layout

<Avatar
src="https://picturepan2.github.io/spectre/demo/img/avatar-1.png"
size="lg"
/>
<Avatar
src="https://picturepan2.github.io/spectre/demo/img/avatar-3.png"
size="md"
/>
<Avatar
src="https://picturepan2.github.io/spectre/demo/img/avatar-4.png"
size="sm"
/>

Stack

Stack of avatars can be used to display a list of participants.
<AvatarsStack>
<AvatarsStack.Item>
<Avatar
src="https://picturepan2.github.io/spectre/demo/img/avatar-1.png"
size="sm"
/>
</AvatarsStack.Item>
<AvatarsStack.Item>
<Avatar
src="https://picturepan2.github.io/spectre/demo/img/avatar-3.png"
size="sm"
/>
</AvatarsStack.Item>
<AvatarsStack.Item>
<Avatar
src="https://picturepan2.github.io/spectre/demo/img/avatar-4.png"
size="sm"
/>
</AvatarsStack.Item>
</AvatarsStack>