diff --git a/demo/partials/cards.html b/demo/partials/cards.html
index b48f49e..4a15f9f 100644
--- a/demo/partials/cards.html
+++ b/demo/partials/cards.html
@@ -142,6 +142,25 @@
 		</div>
 	</div>
 
+	<div class="block mt-6">
+		<h3 class="block-title">Horizontal Card</h3>
+		<div class="card card-horizontal">
+			<div class="card-media">
+				<img src="/assets/imgs/gnexus-mark.svg" alt="">
+			</div>
+			<div class="card-body">
+				<h3 class="card-title"><a href="#">Project Alpha</a></h3>
+				<div class="card-content">
+					<p>Compact horizontal layout for content listings, search results, and entity rows.</p>
+				</div>
+				<div class="card-footer">
+					<span>Updated 2h ago</span>
+					<span class="badge badge-success">Active</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<div class="code-example">
 		<div class="code-example-header">
 			<span class="code-example-title">Cards HTML</span>
@@ -199,5 +218,45 @@
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
+	<div class="code-example">
+		<div class="code-example-header">
+			<span class="code-example-title">Horizontal Card HTML</span>
+			<button class="code-example-copy" type="button">Copy</button>
+		</div>
+		<pre><code class="language-html">&lt;div class="card card-horizontal"&gt;
+  &lt;div class="card-media"&gt;
+    &lt;img src="/assets/imgs/cover.png" alt=""&gt;
+  &lt;/div&gt;
+  &lt;div class="card-body"&gt;
+    &lt;h3 class="card-title"&gt;
+      &lt;a href="/projects/alpha"&gt;Project Alpha&lt;/a&gt;
+    &lt;/h3&gt;
+    &lt;div class="card-content"&gt;
+      &lt;p&gt;Description text.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card-footer"&gt;
+      &lt;span&gt;Updated 2h ago&lt;/span&gt;
+      &lt;span class="badge badge-success"&gt;Active&lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+	</div>
+
+	<div class="code-example">
+		<div class="code-example-header">
+			<span class="code-example-title">Vue: GnHorizontalCard</span>
+			<button class="code-example-copy" type="button">Copy</button>
+		</div>
+		<pre><code class="language-html">&lt;GnHorizontalCard
+  image="/assets/imgs/cover.png"
+  title="Project Alpha"
+  title-href="/projects/alpha"
+  icon="ph-arrow-right"&gt;
+  &lt;p&gt;Description text.&lt;/p&gt;
+  &lt;template #footer&gt;
+    &lt;span&gt;Updated 2h ago&lt;/span&gt;
+    &lt;GnBadge variant="success"&gt;Active&lt;/GnBadge&gt;
+  &lt;/template&gt;
+&lt;/GnHorizontalCard&gt;</code></pre>
 	</div>
 </section>
diff --git a/dist/index.html b/dist/index.html
index aff1945..ada84d2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -3106,6 +3106,25 @@
 		</div>
 	</div>
 
+	<div class="block mt-6">
+		<h3 class="block-title">Horizontal Card</h3>
+		<div class="card card-horizontal">
+			<div class="card-media">
+				<img src="/assets/imgs/gnexus-mark.svg" alt="">
+			</div>
+			<div class="card-body">
+				<h3 class="card-title"><a href="#">Project Alpha</a></h3>
+				<div class="card-content">
+					<p>Compact horizontal layout for content listings, search results, and entity rows.</p>
+				</div>
+				<div class="card-footer">
+					<span>Updated 2h ago</span>
+					<span class="badge badge-success">Active</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<div class="code-example">
 		<div class="code-example-header">
 			<span class="code-example-title">Cards HTML</span>
@@ -3163,6 +3182,46 @@
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
+	<div class="code-example">
+		<div class="code-example-header">
+			<span class="code-example-title">Horizontal Card HTML</span>
+			<button class="code-example-copy" type="button">Copy</button>
+		</div>
+		<pre><code class="language-html">&lt;div class="card card-horizontal"&gt;
+  &lt;div class="card-media"&gt;
+    &lt;img src="/assets/imgs/cover.png" alt=""&gt;
+  &lt;/div&gt;
+  &lt;div class="card-body"&gt;
+    &lt;h3 class="card-title"&gt;
+      &lt;a href="/projects/alpha"&gt;Project Alpha&lt;/a&gt;
+    &lt;/h3&gt;
+    &lt;div class="card-content"&gt;
+      &lt;p&gt;Description text.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card-footer"&gt;
+      &lt;span&gt;Updated 2h ago&lt;/span&gt;
+      &lt;span class="badge badge-success"&gt;Active&lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+	</div>
+
+	<div class="code-example">
+		<div class="code-example-header">
+			<span class="code-example-title">Vue: GnHorizontalCard</span>
+			<button class="code-example-copy" type="button">Copy</button>
+		</div>
+		<pre><code class="language-html">&lt;GnHorizontalCard
+  image="/assets/imgs/cover.png"
+  title="Project Alpha"
+  title-href="/projects/alpha"
+  icon="ph-arrow-right"&gt;
+  &lt;p&gt;Description text.&lt;/p&gt;
+  &lt;template #footer&gt;
+    &lt;span&gt;Updated 2h ago&lt;/span&gt;
+    &lt;GnBadge variant="success"&gt;Active&lt;/GnBadge&gt;
+  &lt;/template&gt;
+&lt;/GnHorizontalCard&gt;</code></pre>
 	</div>
 </section>