VsudAvatar

Create avatar with different styles simply by usingVsudAvatar component.

Demo

<template>
  <vsud-avatar img="https://bit.ly/31BDLda" size="xl" alt="Avatar" />

</template>

<script>
import VsudAvatar from "@/components/VsudAvatar.vue";

export default {
  components: {
    VsudAvatar,
  },
  };
</script>

1<template>
2  <vsud-avatar img="https://bit.ly/31BDLda" size="xl" alt="Avatar" />
3
4</template>
5
6<script>
7import VsudAvatar from "@/components/VsudAvatar.vue";
8
9export default {
10  components: {
11    VsudAvatar,
12  },
13  };
14</script>

Props Information

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

Sizes

<template>
  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xs" circular />
  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="sm" circular />
  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="md" circular />
  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="lg" circular />
  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xl" circular />
  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
  
</template>

<script>
import VsudAvatar from "@/components/VsudAvatar.vue";

export default {
  components: {
    VsudAvatar,
  },
  };
</script>

1<template>
2  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xs" circular />
3  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="sm" circular />
4  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="md" circular />
5  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="lg" circular />
6  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xl" circular />
7  <vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
8  
9</template>
10
11<script>
12import VsudAvatar from "@/components/VsudAvatar.vue";
13
14export default {
15  components: {
16    VsudAvatar,
17  },
18  };
19</script>

Variants

<template>
<vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
<vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" borderRadius="md" />
<vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" borderRadius="lg" />

</template>

<script>
import VsudAvatar from "@/components/VsudAvatar.vue";

export default {
components: {
  VsudAvatar,
},
};
</script>

1<template>
2<vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
3<vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" borderRadius="md" />
4<vsud-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" borderRadius="lg" />
5
6</template>
7
8<script>
9import VsudAvatar from "@/components/VsudAvatar.vue";
10
11export default {
12components: {
13  VsudAvatar,
14},
15};
16</script>