diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 5305b94c..10c907cf 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -776,17 +776,6 @@ nav {
     margin: 0 auto;
     padding: 1rem;
 
-    a {
-      color: oklch(var(--color-foreground));
-      text-decoration-color: oklch(var(--color-background));
-
-      &:hover {
-        box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
-        text-decoration-color: oklch(var(--color-background));
-        border: 1px solid oklch(var(--color-brand) / 0.8);
-      }
-    }
-
     .headerlink {
       cursor: default;
       pointer-events: none;
@@ -1448,39 +1437,15 @@ h6:has(a):hover {
 }
 
 /* Landing page cards */
-
-.homepage {
-  .card-grid {
-    grid-template-columns: 1fr;
-
-    @media (min-width: 70rem) {
-      grid-template-columns: repeat(12, 1fr);
-    }
-  }
-
-  .card-layout .card-grid .card {
-    padding: 1rem 2rem 2rem 2rem;
-
-    .lucide,
-    .card-brand-icon {
-      height: 40px;
-      width: auto;
-    }
-  }
-}
-
 .card-layout {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 
   .card-section {
-    strong {
-      font-weight: 500;
-      font-size: var(--font-step-2);
-      display: block;
-      margin-bottom: 1rem;
-    }
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 
     &.featured-section {
       /* Hide all the cards past 3 if it is a featured card section */
@@ -1488,58 +1453,109 @@ h6:has(a):hover {
         display: none;
       }
     }
-  }
 
-  .card {
-    color: oklch(var(--color-foreground));
-    text-decoration: none;
-    order: 2;
-
-    &.featured-card {
-      order: 1;
+    .card-section-title {
+      font-weight: 500;
+      font-size: var(--font-step-2);
+      display: block;
     }
 
-    .card-container {
+    .card-section-content {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    .card-header {
-      display: flex;
-      flex-direction: row;
       gap: 1rem;
-      align-items: center;
-      color: oklch(var(--color-brand));
 
-      .card-brand-icon {
-        height: 20px;
-        width: auto;
+      &.card-grid {
+        display: grid;
+        grid-template-columns: repeat(var(--grid-columns), 1fr);
+        gap: 1.5rem;
+
+        @media (max-width: 55rem) {
+          grid-template-columns: 1fr;
+        }
+
+        .card {
+          border: 1px solid oklch(var(--color-codeblock-border));
+          box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+          padding: 1rem;
+          order: 2;
+
+          &.featured-card {
+            order: 1;
+          }
+        }
       }
 
-      h2 {
-        padding: 0;
-        margin: 0;
-        font-size: var(--font-step-1);
+      .card {
+        color: oklch(var(--color-foreground));
+        text-decoration: none;
+
+        .card-container {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+
+        .card-header {
+          display: flex;
+          flex-direction: row;
+          gap: 1rem;
+          align-items: center;
+          color: oklch(var(--color-brand));
+
+          img.card-brand-icon {
+            height: 1.5rem;
+            width: auto;
+          }
+
+          h2 {
+            padding: 0;
+            margin: 0;
+            font-size: var(--font-step-1);
+          }
+        }
       }
     }
   }
 }
 
-/* Optional grid layout */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-columns), 1fr);
-  gap: 1.5rem;
+.homepage .card-layout {
+  margin-bottom: 3rem;
+  gap: 3rem;
 
-  @media (max-width: 55rem) {
-    grid-template-columns: 1fr;
-  }
+  .card-section {
+    .card-section-content.card-grid {
+      grid-template-columns: 1fr;
 
-  .card {
-    border: 1px solid oklch(var(--color-codeblock-border));
-    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    padding: 1rem;
+      @media (min-width: 70rem) {
+        grid-template-columns: repeat(12, 1fr);
+        grid-auto-rows: 1fr;
+      }
+
+      .card {
+        padding: 1rem 2rem 2rem 2rem;
+
+        .card-container {
+          height: 7rem;
+          justify-content: space-around;
+
+          .card-header {
+            justify-content: flex-start;
+
+            .card-brand-icon {
+              height: 40px;
+              width: auto;
+            }
+          }
+        }
+
+        &:hover {
+          box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
+          text-decoration-color: oklch(var(--color-background));
+          border: 1px solid oklch(var(--color-brand) / 0.8);
+        }
+      }
+    }
   }
 }
 
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index d0722a47..de3500cf 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -7,10 +7,10 @@ description:
 Documentation for hugo theme
 {{<card-layout>}}
   {{<card-section showAsCards="true">}}
-    {{<card title="Test Product" titleUrl="test-product/" icon="test-tubes"  isLanding="true">}}
+    {{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes"  isLanding="true">}}
       See explanations and usages of shortcodes
     {{</card >}}
-    {{<card title="NGINX Plus" titleUrl="nginx/" brandIcon="NGINX-Plus-product-icon-RGB"  isLanding="true">}}
+    {{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg"  isLanding="true">}}
       See a live example of theme components
     {{</card >}}
   {{</card-section>}}
diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md
index 500c5ec2..fa48486f 100644
--- a/exampleSite/content/test-product/_index.md
+++ b/exampleSite/content/test-product/_index.md
@@ -54,7 +54,7 @@ This is a compilation of all our shortcodes to show how they look, function, res
 
 {{<card-layout >}}
   {{<card-section title="NGINX" showAsCards="true" >}}
-    {{<card title="NGINX Plus" titleUrl="nginx/" brandIcon="NGINX-Plus-product-icon-RGB" >}}
+    {{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" >}}
       Installing NGINX
     {{</card >}}
   {{</card-section >}}
diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html
index 26478172..678f8635 100644
--- a/layouts/shortcodes/card-section.html
+++ b/layouts/shortcodes/card-section.html
@@ -22,7 +22,7 @@
 
 {{- /* Validate that the parent is card-layout */ -}}
 {{ if eq .Parent.Name "card-layout"}}
-  <div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}" data-testid="{{if eq $isFeaturedSection "true"}}card-section__featured-section{{else}}card-section{{ end }}">
+  <div class="card-section{{if eq $isFeaturedSection "true"}} featured-section{{ end }}" data-testid="{{if eq $isFeaturedSection "true"}}card-section__featured-section{{else}}card-section{{ end }}">
     {{- if $title -}}
       <strong class="card-section-title">{{- $title -}}</strong>
       <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}" data-testid="{{ if eq $showAsCards "true" }}card-section-content__card-grid{{else}}card-section-content{{ end }}">{{ .Inner }}</div>    
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index 7fdb157c..5078e4fa 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -33,11 +33,12 @@
 {{ end }}
 
 {{- /* Build the url */ -}}
+{{ $url := printf "%s%s" .Page.Permalink $titleUrl }}
 {{ if eq (substr $titleUrl 0 1) "/" }}
-  {{ $suggestedUrlFix := substr $titleUrl 1 }} 
-  {{ errorf "Please do not start the param 'titleUrl' with a forward slash. Got: '%s', use '%s' instead." $titleUrl $suggestedUrlFix }}
+  {{ $url = printf "%s%s" .Site.BaseURL (substr $titleUrl 1) }}
+{{ else if (strings.Contains $titleUrl "https") }}
+  {{ $url = $titleUrl }}
 {{ end }}
-{{ $url := printf "%s%s" .Page.Permalink $titleUrl }}
 
 {{- /* Validate that the parent is card-section and under 3 cards */ -}}
 {{- if (eq .Parent.Name "card-section") -}}
@@ -46,7 +47,7 @@
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}
-          <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
+          <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}">
         {{- else if $icon -}}
           {{ partial "lucide" (dict "context" . "icon" $icon) }}
         {{- end -}}