See below our SoftAvatar component examples.
Default Avatar
Use this example to create a simple and versatile avatars.
1<template>
2 <soft-avatar img="https://bit.ly/31BDLda" size="xl" alt="Avatar" />
3</template>
4
5<script>
6import SoftAvatar from "@/components/SoftAvatar.vue";
7export default { components: { SoftAvatar, }, };
8</script>
Props Information
| Name | Type | Default | Description |
|---|
| img* | String | | Used to add image to SoftAvatar component. |
| alt | String | | Used to add description to SoftAvatar image. |
| borderRadius | 'sm''md''lg''xl' | | Used to change the SoftAvatar border-radius size. |
| Circular | bool | false | Used to make the SoftAvatar component circlular, |
| size | 'xs''sm''md''lg''xl''xxl' | md | Change the SoftAvatar size. |
| shadow | 'none''sm''lg''xl' | none | Set a box-shadow for the SoftAvatar. |
Avatar Sizes
Use this example to create circular avatars of different sizes for your Vue project.
1<template>
2 <soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xs" circular />
3 <soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="sm" circular />
4 <soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="md" circular />
5 <soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="lg" circular />
6 <soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xl" circular />
7 <soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
8</template>
9
10<script>
11import SoftAvatar from "@/components/SoftAvatar.vue";
12export default { components: { SoftAvatar, }, };
13</script>
Avatar Variants
Use this example to create circular avatars in different styles: circular and rounded.
1<template>
2<soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
3<soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" borderRadius="md" />
4<soft-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" borderRadius="lg" />
5</template>
6
7<script>
8import SoftAvatar from "@/components/SoftAvatar.vue";
9export default { components: { SoftAvatar, }, };
10</script>
