docs/layouts/partials/components/card.html

32 lines
1.0 KiB
HTML

<div class="not-prose">
{{ if .link }}
<a class="h-full" href="{{ .link }}">
{{ end }}
<div
class="h-full bg-white flex flex-col gap-2 rounded-sm p-4
border border-gray-light-100 drop-shadow-sm dark:bg-gray-dark-200 dark:border-gray-dark-400
{{ if .link }}hover:drop-shadow-lg hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
<div class="flex gap-4 items-center">
{{ if .image }}
<img class="w-[32px]" src="{{ .image }}" alt="">
{{ else if .icon }}
<span
class="material-symbols-rounded text-[32px]"
>{{ .icon }}</span
>
{{ end }}
<div>
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
{{ markdownify .title }}
</div>
</div>
</div>
<div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
{{ .description | markdownify }}
</div>
</div>
{{ if .link }}
</a>
{{ end }}
</div>