frontend/src/components/Badges.svelte
2020-12-30 11:55:48 +01:00

54 lines
2.2 KiB
Svelte
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<h3 class="text-lg">badges</h3>
<span
class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle">Paid</span>
<span
class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle">Overdue</span>
<span
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">Primary</span>
<span
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">Secondary</span>
<span
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">Success</span>
<span
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">Danger</span>
<span
class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">Warning</span>
<span
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">Info</span>
<span
class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">Light</span>
<span
class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">Dark</span>
<h3 class="text-lg">closable badges</h3>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
Primary
<span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">
Secondary
<span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">
Success
<span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">
Danger
<span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">
Warning
<span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">
Info
<span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">
Light<span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">
Dark
<span class="ml-2 text-base cursor-pointer">×</span>
</span>