diff --git a/assets/css/cards.css b/assets/css/cards.css
new file mode 100644
index 0000000..f867274
--- /dev/null
+++ b/assets/css/cards.css
@@ -0,0 +1,29 @@
+.hextra-cards {
+ grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
+}
+
+.hextra-card img {
+ user-select: none;
+}
+
+.hextra-card:hover svg {
+ color: currentColor;
+}
+
+.hextra-card svg {
+ width: 1.5rem;
+ color: #00000033;
+ transition: color 0.3s ease;
+}
+
+.hextra-card p {
+ margin-top: 0.5rem;
+}
+
+.dark .hextra-card svg {
+ color: #ffffff66;
+}
+
+.dark .hextra-card:hover svg {
+ color: currentColor;
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 90c536a..94fe56c 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -3,7 +3,7 @@
@tailwind utilities;
@import "typography.css";
-
+@import "cards.css";
html {
@apply text-base antialiased;
diff --git a/data/icons.yaml b/data/icons.yaml
index 43602cf..dbcbd13 100644
--- a/data/icons.yaml
+++ b/data/icons.yaml
@@ -31,12 +31,8 @@ theme-light: >
-theme-dark: >
-
+theme-dark:
-breadcrumb-delimiter: >
-
+breadcrumb-delimiter:
+
+warning:
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
new file mode 100644
index 0000000..9b4dfef
--- /dev/null
+++ b/layouts/shortcodes/card.html
@@ -0,0 +1,17 @@
+{{ $href := .Get "link" }}
+{{ $title := .Get "title" }}
+{{ $icon := .Get "icon" }}
+{{ $context := . }}
+
+
+
+
+ {{ with $icon }}
+ {{ partial "utils/icon.html" (dict "context" $context "name" $icon) }}
+ {{ end }}
+ {{ $title }}
+
+
diff --git a/layouts/shortcodes/cards.html b/layouts/shortcodes/cards.html
new file mode 100644
index 0000000..ad44f7d
--- /dev/null
+++ b/layouts/shortcodes/cards.html
@@ -0,0 +1,3 @@
+