feat(card): add tagIcon and tagBorder options (#791)

assets/css/components/cards.css

@@ -10,11 +10,11 @@
   user-select: none;
 }
 
-.hextra-card:hover svg {
+.hextra-card:hover .hextra-card-icon svg {
   color: currentColor;
 }
 
-.hextra-card svg {
+.hextra-card .hextra-card-icon svg {
   width: 1.5rem;
   color: #00000033;
   transition: color 0.3s ease;
@@ -25,11 +25,11 @@
   position: relative;
 }
 
-.dark .hextra-card svg {
+.dark .hextra-card .hextra-card-icon svg {
   color: #ffffff66;
 }
 
-.dark .hextra-card:hover svg {
+.dark .hextra-card:hover .hextra-card-icon svg {
   color: currentColor;
 }
 

exampleSite/content/docs/guide/shortcodes/cards.md

@@ -38,13 +38,11 @@ linkTitle: Cards
 ## Card Parameters
 
 | Parameter   | Description                                                                            |
-|------------|---------------------------------------------------------------------------------------|
+|-------------|----------------------------------------------------------------------------------------|
 | `link`      | URL (internal or external).                                                            |
 | `title`     | Title heading for the card.                                                            |
 | `subtitle`  | Subtitle heading (supports Markdown).                                                  |
 | `icon`      | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information.             |
-| `tag`      | Text in tag.                                                                          |
-| `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
 
 ## Image Card
 
@@ -72,12 +70,20 @@ For more on Hugo's built in image processing commands, methods, and options see
 
 Card supports adding tags which could be useful to show extra status information.
 
+| Parameter   | Description                                                                            |
+|-------------|----------------------------------------------------------------------------------------|
+| `tag`       | Text in tag.                                                                           |
+| `tagColor`  | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information.  |
+| `tagIcon`   | Icon of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information.   |
+| `tagBorder` | Border of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
+
 {{< cards >}}
   {{< card link="../callout" title="Card with default tag" tag="tag text" >}}
   {{< card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" >}}
   {{< card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" >}}
-  {{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" >}}
+  {{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" tagIcon="sparkles" tagBorder=false >}}
-  {{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" >}}
+  {{< card link="/" title="Image Card" image="/images/card-image-unprocessed.jpg" subtitle="Image" tag="tag text" tagColor="green" >}}
+  {{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Image" tag="tag text" tagColor="purple" tagIcon="sparkles" tagBorder=false >}}
 {{< /cards >}}
 
 ```
@@ -85,8 +91,9 @@ Card supports adding tags which could be useful to show extra status information
   {{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
   {{</* card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" */>}}
   {{</* card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" */>}}
-  {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" */>}}
+  {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" tagIcon="sparkles" tagBorder=false */>}}
-  {{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" */>}}
+  {{</* card link="/" title="Image Card" image="/images/card-image-unprocessed.jpg" subtitle="Image" tag="tag text" tagColor="green" */>}}
+  {{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Image" tag="tag text" tagColor="purple" tagIcon="sparkles" tagBorder=false */>}}
 {{</* /cards */>}}
 ```
 

layouts/_partials/shortcodes/card.html

@@ -8,6 +8,8 @@
 {{- $imageStyle := .imageStyle -}}
 {{- $tag := .tag -}}
 {{- $tagColor := .tagColor | default .tagType | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
+{{- $tagBorder := not (eq .tagBorder false) | default true }}
+{{- $tagIcon := .tagIcon -}}
 
 {{ $linkClass := "hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900" }}
 {{- with $image -}}
@@ -57,7 +59,8 @@
       "content" $tag
       "color" $tagColor
       "class" "hextra-card-tag"
-      "border" true
+      "border" $tagBorder
+      "icon" $tagIcon
       )
     -}}
   {{- end -}}

layouts/_shortcodes/card.html

@@ -25,6 +25,8 @@ A shortcode to create a card.
 {{- $imageStyle := .Get "imageStyle" -}}
 {{- $tag := .Get "tag" -}}
 {{- $tagColor := .Get "tagColor" | default (.Get "tagType") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
+{{- $tagBorder := not (eq (.Get "tagBorder") false) | default true }}
+{{- $tagIcon := .Get "tagIcon" | default "" -}}
 
 {{/* Image processing options */}}
 {{- $method := .Get "method" | default "Resize" | humanize -}}
@@ -61,5 +63,7 @@ A shortcode to create a card.
   "imageStyle"  $imageStyle
   "tag"         $tag
   "tagType"     $tagColor
+  "tagBorder"   $tagBorder
+  "tagIcon"     $tagIcon
   )
 -}}