Avatar Component

Table of Contents

Usage

Velit mollit veniam occaecat nisi deserunt. Adipisicing officia consectetur pariatur eu do minim sint do minim. Esse officia sit sit excepteur esse. Aliqua quis excepteur exercitation amet esse proident eiusmod minim occaecat ipsum proident non. Ut mollit laborum mollit adipisicing aute Lorem. Labore mollit enim cupidatat nisi est.

Default Avatar

John Doe
John Doe Developer
<script>
  import { Avatar } from "$lib/components";
</script>

<Avatar
  name="John Doe"
  description="Developer"
  image="https://picsum.photos/seed/picsum/200/200"
/>

Avatar with permanent Description

John Doe
John Doe Developer
<script>
  import { Avatar } from "$lib/components";
</script>

<Avatar
  permanent
  name="John Doe"
  description="Developer"
  image="https://picsum.photos/seed/picsum/200/200"
/>
John Doe
John Doe Developer
<script>
  import { Avatar } from "$lib/components";
</script>

<Avatar
  href="https://mirkoschubert.de"
  name="John Doe"
  description="Developer"
  image="https://picsum.photos/seed/picsum/200/200"
/>

Avatar Sizes

John Doe
John Doe Developer
John Doe
John Doe Developer
John Doe
John Doe Developer
<script>
  import { Avatar } from "$lib/components";
</script>

<Avatar
  size="sm"
  name="John Doe"
  description="Developer"
  image="https://picsum.photos/seed/picsum/200/200"
/>
<Avatar
  size="md"
  name="John Doe"
  description="Developer"
  image="https://picsum.photos/seed/picsum/200/200"
/>
<Avatar
  size="lg"
  name="John Doe"
  description="Developer"
  image="https://picsum.photos/seed/picsum/200/200"
/>