Nuxt Avatar - Argon

Create avatar with different styles simply by usingArgonAvatar component.

Demo

<template>
 <ArgonAvatar image="https://bit.ly/3eoUWW9" size="xl" alt="Avatar" />
</template>

1<template>
2 <ArgonAvatar image="https://bit.ly/3eoUWW9" size="xl" alt="Avatar" />
3</template>

Props Information

Name	Type	Default	Description
image*	String		Used to add image to `ArgonAvatar` component. It is a required prop.
alt	String		Used to add description to `ArgonAvatar` image.
borderRadius	'sm''md''lg''xl'		Used to change the `ArgonAvatar` border-radius size.
Circular	bool	false	Used to make the `ArgonAvatar` component circlular,
size	'xs''sm''md''lg''xl''xxl'	md	Change the `ArgonAvatar` size.
shadow	'none''sm''lg''xl'	none	Set a `box-shadow` for the `ArgonAvatar`.

Sizes

<template>
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xs" circular />
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="sm" circular />
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="md" circular />
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="lg" circular />
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xl" circular />
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xxl" circular />
</template>

1<template>
2 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xs" circular />
3 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="sm" circular />
4 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="md" circular />
5 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="lg" circular />
6 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xl" circular />
7 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xxl" circular />
8</template>

Variants

<template>
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xxl" circular />
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xxl" border-radius="md" />
 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xxl" border-radius="lg" />
</template>

1<template>
2 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xxl" circular />
3 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xxl" border-radius="md" />
4 <ArgonAvatar image="https://bit.ly/3eoUWW9" alt="Avatar" size="xxl" border-radius="lg" />
5</template>