chore: add image example for cards

* updated compiled CSS

assets/css/compiled/main.css

@@ -303,6 +303,10 @@
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 0.375rem;
+}
+  .content .not-prose img {
+  margin: 0px;
+  border-radius: 0px;
 }
   .content figure figcaption {
   margin-top: 0.5rem;
@@ -2170,6 +2174,13 @@ video {
   margin-top: 2rem;
 }
 
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
 .block {
   display: block;
 }
@@ -2314,6 +2325,10 @@ video {
   max-width: min(calc(100vw - 2rem),calc(100% + 20rem));
 }
 
+.max-w-screen-xl {
+  max-width: 1280px;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -2757,6 +2772,10 @@ video {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -2878,6 +2897,12 @@ video {
   opacity: 0.8;
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-\[0_-12px_16px_\#fff\] {
   --tw-shadow: 0 -12px 16px #fff;
   --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
@@ -3125,6 +3150,12 @@ body {
   opacity: 0.75;
 }
 
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-md:hover {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -3432,6 +3463,11 @@ body {
   border-color: rgb(243 244 246 / 0.2);
 }
 
+:is(html[class~="dark"] .dark\:border-neutral-700) {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity));
+}
+
 :is(html[class~="dark"] .dark\:border-neutral-800) {
   --tw-border-opacity: 1;
   border-color: rgb(38 38 38 / var(--tw-border-opacity));
@@ -3525,6 +3561,11 @@ body {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+:is(html[class~="dark"] .dark\:text-gray-50) {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
 :is(html[class~="dark"] .dark\:text-neutral-200) {
   --tw-text-opacity: 1;
   color: rgb(229 229 229 / var(--tw-text-opacity));
@@ -3593,6 +3634,11 @@ body {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
+:is(html[class~="dark"] .dark\:hover\:border-neutral-500:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(115 115 115 / var(--tw-border-opacity));
+}
+
 :is(html[class~="dark"] .dark\:hover\:border-neutral-700:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
@@ -3607,6 +3653,11 @@ body {
   background-color: rgb(243 244 246 / 0.05);
 }
 
+:is(html[class~="dark"] .dark\:hover\:bg-neutral-700:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
 :is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));

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

@@ -11,6 +11,11 @@ linkTitle: Cards
   {{< card link="/" title="No Icon" >}}
 {{< /cards >}}
 
+{{< cards >}}
+  {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
+{{< /cards >}}
+
+
 ## Usage
 
 ```
@@ -20,3 +25,9 @@ linkTitle: Cards
   {{</* card link="/" title="No Icon" */>}}
 {{</* /cards */>}}
 ```
+
+```
+{{</* cards */>}}
+  {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
+{{</* /cards */>}}
+```

exampleSite/hugo_stats.json

@@ -317,6 +317,7 @@
       "max-w-[50%]",
       "max-w-[90rem]",
       "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
+      "max-w-screen-xl",
       "max-xl:hidden",
       "mb-10",
       "mb-12",