drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 15:03:10 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add subtitle and image support to card

Browse Source
This commit is contained in:
Xin
2023-08-20 21:31:51 +01:00
parent 80659b4933
commit b6f40d6114
3 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
layouts/shortcodes/card.html
View File

@ -1,17 +1,33 @@
{{ $href := .Get "link" }}
{{ $title := .Get "title" }}
{{ $icon := .Get "icon" }}
{{ $context := . }}
{{- $href := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
{{- $subtitle := .Get "subtitle" }}
{{- $image := .Get "image" }}
{{- $context := . -}}
{{ $linkClass := "hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900" }}
{{- with $image -}}
{{ $linkClass = "hover:border-gray-300 bg-gray-100 shadow dark:border-neutral-700 dark:bg-neutral-800 dark:text-gray-50 hover:shadow-lg dark:hover:border-neutral-500 dark:hover:bg-neutral-700" }}
{{- end -}}
<a
class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 hover:border-gray-300 bg-transparent shadow-sm dark:border-neutral-800 hover:bg-slate-50 hover:shadow-md dark:hover:border-neutral-700 dark:hover:bg-neutral-900"
class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
href="{{ $href }}"
>
<span class="flex font-semibold items-start gap-2 p-4 text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
{{ with $icon }}
{{ partial "utils/icon.html" (dict "name" $icon) }}
{{ end }}
{{ $title }}
{{- with $image -}}
<img alt="{{ $title }}" loading="lazy" decoding="async" style="color: transparent;" src="{{ $image }}" />
{{- end -}}
{{ $padding := "p-4"}}
{{- with $subtitle -}}
{{ $padding = "pt-4 px-4"}}
{{- end -}}
<span class="flex font-semibold items-start gap-2 {{ $padding }} text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
{{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{ end -}}
{{- $title -}}
</span>
{{- with $subtitle -}}
<div class="line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2">{{ $subtitle }}</div>
{{- end -}}
</a>