lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

feature/5-base-components #18

Merged
philipp merged 25 commits from feature/5-base-components into develop 2020-12-30 17:24:16 +00:00
Conversation 1 Commits 25 Files Changed 17 +80
1 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7e69eeef29 - Show all commits

80
src/components/Avatars.svelte Normal file
View File

@ -0,0 +1,80 @@
<h3 class="text-lg">Standard Avatars</h3>
<div class="relative rounded-full w-4 h-4">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
</div>
<div class="relative rounded-full w-8 h-8">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
</div>
<div class="relative rounded-full w-12 h-12">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
</div>
<div class="relative rounded-full w-16 h-16">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
</div>
<div class="relative rounded-full w-20 h-20">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
</div>
<div class="relative rounded-full w-24 h-24">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
</div>
<h3 class="text-lg">Status Avatars</h3>
<div class="relative rounded-full w-4 h-4">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
<div class="absolute rounded-full right-0 bottom-0 w-1 h-1 bg-gray-200" />
</div>
<div class="relative rounded-full w-8 h-8">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
<div class="absolute rounded-full right-0 bottom-0 w-2 h-2 bg-green-400" />
</div>
<div class="relative rounded-full w-12 h-12">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
<div class="absolute rounded-full right-0 bottom-0 w-4 h-4 bg-red-600" />
</div>
<div class="relative rounded-full w-16 h-16">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
<div class="absolute rounded-full right-0 bottom-0 w-5 h-5 bg-gray-200" />
</div>
<div class="relative rounded-full w-20 h-20">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
<div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-green-400" />
</div>
<div class="relative rounded-full w-24 h-24">
<img
alt=""
src="https://gustui.s3.amazonaws.com/avatar.png"
class="absolute left-0 top-0 w-full h-full rounded-full object-cover" />
<div class="absolute rounded-full right-0 bottom-0 w-6 h-6 bg-red-600" />
</div>