feat: new extended cards

assets/css/components/experimental.css

@@ -0,0 +1,121 @@
+.hextra-card:hover .hextra-card-title .hextra-card-title-icon {
+  color: currentColor;
+}
+
+.hextra-card .hextra-card-title .hextra-card-title-icon {
+  width: 1.5rem;
+  color: #00000033;
+  transition: color 0.3s ease;
+}
+
+.dark .hextra-card .hextra-card-title .hextra-card-title-icon {
+  color: #ffffff66;
+}
+
+.dark .hextra-card:hover .hextra-card-title .hextra-card-title-icon {
+  color: currentColor;
+}
+
+@layer components {
+  .hextra-card {
+    @apply
+      hx:flex
+      hx:flex-col
+      hx:justify-start
+      hx:overflow-hidden
+      hx:text-current
+      hx:no-underline
+      hx:bg-transparent
+      hx:rounded-lg
+      hx:border
+      hx:border-gray-200
+      hx:shadow-xs
+      hx:shadow-gray-100
+      hx:transition-all
+      hx:duration-200
+    ;
+
+    &:has(.hextra-card-image) {
+      @apply
+        hx:bg-gray-100
+        hx:shadow-sm
+      ;
+
+      .hextra-card-button {
+        @apply
+          hx:text-gray-700
+          hx:hover:text-gray-900
+          hx:dark:text-neutral-200
+          hx:dark:hover:text-neutral-100
+          hx:hover:bg-slate-50
+          hx:dark:hover:bg-neutral-900
+          hx:border-gray-200
+          hx:dark:border-neutral-700
+        ;
+      }
+    }
+
+    .hextra-card-button {
+      @apply
+        hx:text-gray-700
+        hx:hover:text-gray-900
+        hx:dark:text-neutral-200
+        hx:dark:hover:text-neutral-100
+        hx:hover:bg-slate-50
+        hx:dark:hover:bg-neutral-800
+        hx:border-gray-200
+        hx:dark:border-neutral-800
+      ;
+    }
+
+    @variant dark {
+      @apply
+        hx:shadow-none
+        hx:border-neutral-800
+      ;
+
+      &:has(.hextra-card-image) {
+        @apply
+          hx:shadow-none
+          hx:border-neutral-700
+          hx:bg-neutral-800
+          hx:text-gray-50
+        ;
+      }
+    }
+
+    &.hextra-card-link {
+      @variant hover {
+        @apply
+          hx:bg-slate-50
+          hx:border-gray-300
+          hx:shadow-md
+          hx:shadow-gray-100
+
+          hx:dark:shadow-none
+          hx:dark:border-neutral-700
+          hx:dark:bg-neutral-900
+        ;
+
+        &:has(.hextra-card-image) {
+          @apply
+            hx:border-gray-300
+            hx:shadow-lg
+
+            hx:dark:shadow-none
+            hx:dark:border-neutral-500
+            hx:dark:bg-neutral-700
+          ;
+        }
+      }
+
+      @variant active {
+        @apply
+          hx:shadow-sm
+          hx:shadow-gray-200
+        ;
+      }
+    }
+
+  }
+}

assets/css/styles.css

@@ -46,6 +46,7 @@ body {
 @import "./typography.css";
 @import "./highlight.css";
 @import "./components/cards.css";
+@import "./components/experimental.css";
 @import "./components/steps.css";
 @import "./components/search.css";
 @import "./components/sidebar.css";

docs/content/docs/guide/shortcodes/experimental.md

@@ -0,0 +1,200 @@
+---
+title: Experimental Cards Component
+linkTitle: Experimental
+sidebar:
+  exclude: true
+---
+
+## Example
+
+{{< experimental/cards >}}
+  {{< experimental/card link="../callout" >}}
+    {{< experimental/card/title title="Callout" icon="warning" >}}
+    {{< youtube id=dQw4w9WgXcQ loading=lazy >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="../callout" >}}
+    {{< experimental/card/title title="Card with tag" icon="tag" tag="custom tag" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/title "No Icon" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card >}}
+    {{< experimental/card/title "Without link" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card >}}
+    {{< experimental/card/title "With Buttons" >}}
+    {{< experimental/card/buttons >}}
+        {{< experimental/card/button label="Button 1" link="#tags" >}}
+        {{< experimental/card/button label="Button 2" icon="globe-alt" link="#image-card" >}}
+        {{< experimental/card/button icon="sparkles" >}}
+    {{< /experimental/card/buttons >}}
+  {{< /experimental/card >}}
+  {{< experimental/card >}}
+    {{< youtube id=dQw4w9WgXcQ loading=lazy >}}
+    {{< experimental/card/title title="With subtitle" subtitle="Subtitle" >}}
+    {{< experimental/card/buttons >}}
+        {{< experimental/card/button label="Button 1" link="#tags" >}}
+        {{< experimental/card/button label="Button 2" icon="globe-alt" link="#image-card" >}}
+        {{< experimental/card/button icon="sparkles" >}}
+    {{< /experimental/card/buttons >}}
+  {{< /experimental/card >}}
+{{< /experimental/cards >}}
+
+{{< experimental/cards >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/title title="Image Card" subtitle="Internet Image" >}}
+    {{< experimental/card/image src="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" alt="Internet Image" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/image src="/images/card-image-unprocessed.jpg" >}}
+    {{< experimental/card/title title="Local Image" subtitle="Raw image under static directory." >}}
+  {{< /experimental/card >}}
+  {{< experimental/card >}}
+  {{< experimental/card/image src="images/space.jpg" method="Resize" options="600x q80 webp" >}}
+  {{< experimental/card/title subtitle="Without title" >}}
+    {{< experimental/card/buttons >}}
+      {{< experimental/card/button icon="github" >}}
+      {{< experimental/card/button icon="globe-alt" >}}
+      {{< experimental/card/button icon="sparkles" >}}
+      {{< experimental/card/button icon="at-symbol" >}}
+      {{< experimental/card/button icon="bell" >}}
+      {{< experimental/card/button icon="beaker" >}}
+    {{< /experimental/card/buttons >}}
+  {{< /experimental/card >}}
+  {{< experimental/card >}}
+    {{< experimental/card/image src="images/space.jpg" method="Resize" options="600x q80 webp" >}}
+    {{< experimental/card/title title="Without subtitle" >}}
+    {{< experimental/card/buttons >}}
+      {{< experimental/card/button icon="github" >}}
+      {{< experimental/card/button icon="globe-alt" >}}
+      {{< experimental/card/button icon="sparkles" >}}
+      {{< experimental/card/button icon="at-symbol" >}}
+      {{< experimental/card/button icon="bell" >}}
+      {{< experimental/card/button icon="beaker" >}}
+    {{< /experimental/card/buttons >}}
+  {{< /experimental/card >}}
+  {{< experimental/card >}}
+    {{< experimental/card/image alt="Local Image" src="images/space.jpg"  method="Resize" options="600x q80 webp" >}}
+    {{< experimental/card/title title="Local Image" subtitle="Without link" >}}
+    {{< experimental/card/buttons >}}
+        {{< experimental/card/button icon="github" >}}
+        {{< experimental/card/button icon="globe-alt" >}}
+        {{< experimental/card/button icon="sparkles" >}}
+        {{< experimental/card/button icon="at-symbol" >}}
+        {{< experimental/card/button icon="bell" >}}
+        {{< experimental/card/button icon="beaker" >}}
+    {{< /experimental/card/buttons >}}
+  {{< /experimental/card >}}
+{{< /experimental/cards >}}
+
+## Usage
+
+```
+TODO
+```
+
+```
+TODO
+```
+
+## 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.             |
+
+## Image Card
+
+Additionally, the card supports adding image and processing through these parameters:
+
+| Parameter    | Description                                        |
+|--------------|----------------------------------------------------|
+| `image`      | Specifies the image URL for the card.              |
+| `method`     | Sets Hugo's image processing method.               |
+| `options`    | Configures Hugo's image processing options.        |
+| `imageStyle` | Used to fill the style attribute of the image tag. |
+
+Card supports three kinds of images:
+
+1. Remote image: the full URL in the `image` parameter.
+2. Static image: use the relative path in Hugo's `static/` directory.
+3. Processed image: use the relative path in Hugo's `assets/` directory.
+
+Hextra auto-detects if image processing is needed during build and applies the `options` parameter or default settings (Resize, 800x, Quality 80, WebP Format).
+It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.
+
+For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
+
+## Tags
+
+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. |
+
+{{< experimental/cards >}}
+  {{< experimental/card link="../callout" >}}
+    {{< experimental/card/title "Card with default tag" >}}
+    {{< experimental/card/badge content="tag text" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="../callout">}}
+    {{< experimental/card/title "Card with red tag" >}}
+    {{< experimental/card/badge content="tag text" color="red" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="../callout" >}}
+    {{< experimental/card/title "Card with blue tag" >}}
+    {{< experimental/card/badge content="tag text" color="blue" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="../callout" >}}
+    {{< experimental/card/title "Card with yellow tag" >}}
+    {{< experimental/card/badge content="tag text" color="yellow" icon="sparkles" border=false >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/image src="/images/card-image-unprocessed.jpg" >}}
+    {{< experimental/card/title title="Image Card" subtitle="Image" >}}
+    {{< experimental/card/badge content="tag text" color="green" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/image src="images/space.jpg" >}}
+    {{< experimental/card/title title="Image Card" subtitle="Image" >}}
+    {{< experimental/card/badge content="tag text" color="purple" icon="sparkles" border=false  >}}
+  {{< /experimental/card >}}
+{{< /experimental/cards >}}
+
+```
+TODO
+```
+
+## Columns
+
+You can specify the maximum number of columns for cards to span by passing the `cols` parameter to the `cards` shortcode. Note that columns will still be collapsed on smaller screens.
+
+{{< experimental/cards cols="1" >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/title "Top Card" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/title title="Bottom Card" >}}
+  {{< /experimental/card >}}
+{{< /experimental/cards >}}
+
+{{< experimental/cards cols="2" >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/title title="Left Card" >}}
+  {{< /experimental/card >}}
+  {{< experimental/card link="/" >}}
+    {{< experimental/card/title title="Right Card" >}}
+  {{< /experimental/card >}}
+{{< /experimental/cards >}}
+
+```
+TODO
+```
+

docs/hugo_stats.json

@@ -101,10 +101,15 @@
       "hextra-banner",
       "hextra-banner-close-button",
       "hextra-card",
+      "hextra-card-button",
       "hextra-card-icon",
       "hextra-card-image",
+      "hextra-card-link",
+      "hextra-card-neutral",
       "hextra-card-subtitle",
       "hextra-card-tag",
+      "hextra-card-title",
+      "hextra-card-title-icon",
       "hextra-cards",
       "hextra-code-block",
       "hextra-code-copy-btn",
@@ -212,6 +217,7 @@
       "hx:border-indigo-200",
       "hx:border-orange-100",
       "hx:border-purple-200",
+      "hx:border-r",
       "hx:border-red-200",
       "hx:border-t",
       "hx:border-transparent",
@@ -344,10 +350,12 @@
       "hx:first:mt-0",
       "hx:flex",
       "hx:flex-col",
+      "hx:flex-grow",
       "hx:flex-wrap",
       "hx:focus:bg-white",
       "hx:focus:hextra-focus",
       "hx:focus:outline-hidden",
+      "hx:focus:outline-none",
       "hx:focus:ring-4",
       "hx:focus:ring-primary-300",
       "hx:font-bold",
@@ -416,12 +424,14 @@
       "hx:inset-y-0",
       "hx:items-center",
       "hx:items-start",
+      "hx:justify-around",
       "hx:justify-between",
       "hx:justify-center",
       "hx:justify-end",
       "hx:justify-items-start",
       "hx:justify-start",
       "hx:last-of-type:mb-0",
+      "hx:last:border-r-0",
       "hx:leading-5",
       "hx:leading-6",
       "hx:leading-7",
@@ -516,6 +526,7 @@
       "hx:mt-5",
       "hx:mt-6",
       "hx:mt-8",
+      "hx:mt-auto",
       "hx:mx-1",
       "hx:mx-4",
       "hx:mx-auto",

layouts/_partials/shortcodes/badge.html

@@ -1,7 +1,7 @@
 {{- $content := .content -}}
 {{- $color := .color | default .type | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
 {{- $class := .class | default "" -}}
-{{- $border := .border | default false -}}
+{{- $border := not (eq .border false) | default true }}
 {{- $icon := .icon | default "" -}}
 
 {{- /* Compatibility with previous names. */ -}}