diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 7fafcfe..ba24097 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1213,6 +1213,14 @@ h6:has(a):hover {
   gap: 1.5rem;
   margin-top: 1rem;
 
+  .card-container.long {
+    grid-column: 1 / -1;
+  }
+
+  .card-container.short {
+    grid-column: auto;
+  }
+
   .card-container {
     border: 1px solid oklch(var(--color-codeblock-border));
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md
index 96b971a..41a7052 100644
--- a/exampleSite/content/test-product/_index.md
+++ b/exampleSite/content/test-product/_index.md
@@ -23,5 +23,11 @@ hasCustomContent: true
     {{< card title="NGINX Plus" titleUrl="/nginx/" >}}
       Installing NGINX
     {{</ card >}}
+    {{< card title="NGINX Plus" titleUrl="/nginx/" >}}
+      Installing NGINX
+    {{</ card >}}
+    {{< card title="Test Product" titleUrl="/test-product/" sizeOption="long" >}}
+      Test Product
+    {{</ card >}}
   {{</ card-section >}}
 {{</ card-layout >}}
\ No newline at end of file
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index f48bd6d..975a89f 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -1,12 +1,13 @@
 {{- $title := .Get "title" -}}
 {{- $titleUrl := .Get "titleUrl" | default "/" -}} 
 {{- $icon := .Get "icon" | default "NGINX-product-icon" -}}
+{{- $sizeOption := .Get "sizeOption" | default "short" -}}
 {{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
 {{- $newCard := dict "title" ($title) "content" (.Inner) -}}
 {{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
 {{- /* Validate that the parent is card-section */ -}}
 {{- if eq .Parent.Name "card-section" -}}
-  <div class="card-container" style="display: none;" data-mf="true">
+  <div class="card-container {{ $sizeOption }}" style="display: none;" data-mf="true">
     {{- if $title -}}
       {{- if $titleUrl -}}
         <h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>