diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index f0817aaf..5305b94c 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -156,7 +156,6 @@ textarea:not([rows]) {
   --color-inline_codeblock-border: 0.85 0 0;
   --color-inline_codeblock-background: 0.98 0 0;
   --color-codeblock-border: 0.63 0 0;
-  --color-codeblock-shadow: 0.92 0 0;
   --color-codeblock-background: 1 0 0;
   --color-codeblock-highlight: 0.99 0.0479 105.97;
   --color-footer: 0.23 0 0;
@@ -199,6 +198,7 @@ textarea:not([rows]) {
   --codeblock-comment-space-between: 10px;
   --codeblock-horizontal-line-length: 2rem;
   --codeblock-horizontal-line-overflow: 0.25rem;
+  --codeblock-horizontal-padding: 1rem;
   --codeblock-border-thickness: 1px;
   --codeblock-code-section-padding-left: 1rem;
   --codeblock-line-box-side-length: 4px;
@@ -206,17 +206,26 @@ textarea:not([rows]) {
 
   --flow-gap: 1rem;
 
-  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  /* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,16,1.25,5,3,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   /* ALWAYS use for fonts */
-  --font-step--3: clamp(0.576rem, 0.5796rem + -0.0047vw, 0.5787rem);
-  --font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
-  --font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
-  --font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
-  --font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
-  --font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
-  --font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
-  --font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
-  --font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
+  /* Step -3: 8.1019px → 8.192px */
+  --font-step--3: clamp(0.5064rem, 0.5044rem + 0.0098vw, 0.512rem);
+  /* Step -2: 9.7222px → 10.24px */
+  --font-step--2: clamp(0.6076rem, 0.5964rem + 0.0563vw, 0.64rem);
+  /* Step -1: 11.6667px → 12.8px */
+  --font-step--1: clamp(0.7292rem, 0.7045rem + 0.1232vw, 0.8rem);
+  /* Step 0: 14px → 16px */
+  --font-step-0: clamp(0.875rem, 0.8315rem + 0.2174vw, 1rem);
+  /* Step 1: 16.8px → 20px */
+  --font-step-1: clamp(1.05rem, 0.9804rem + 0.3478vw, 1.25rem);
+  /* Step 2: 20.16px → 25px */
+  --font-step-2: clamp(1.26rem, 1.1548rem + 0.5261vw, 1.5625rem);
+  /* Step 3: 24.192px → 31.25px */
+  --font-step-3: clamp(1.512rem, 1.3586rem + 0.7672vw, 1.9531rem);
+  /* Step 4: 29.0304px → 39.0625px */
+  --font-step-4: clamp(1.8144rem, 1.5963rem + 1.0904vw, 2.4414rem);
+  /* Step 5: 34.8365px → 48.8281px */
+  --font-step-5: clamp(2.1773rem, 1.8731rem + 1.5208vw, 3.0518rem);
 
   /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   /* ALWAYS use for horizontal spacing */
@@ -351,9 +360,9 @@ ol li:last-child {
   @media (max-width: 68rem) {
     grid-template-columns: 1fr;
     grid-template-areas:
-      "sidebar header"
-      "sidebar content"
-      "sidebar footer";
+      "header"
+      "content"
+      "footer";
 
     .text-content {
       margin-top: 1rem;
@@ -515,19 +524,6 @@ ol li:last-child {
   }
 }
 
-.content {
-  grid-area: content;
-  justify-self: center;
-  padding: 0 var(--space-l) 2rem var(--space-l);
-  max-width: var(--content-max-width);
-
-  /* Allow redocly to fill the entire container */
-  &.content__redocly {
-    justify-self: unset;
-    max-width: unset;
-  }
-}
-
 .footer {
   grid-area: footer;
   padding: var(--space-l);
@@ -762,12 +758,12 @@ nav {
 
 .homepage {
   --content-max-width: 120rem;
+  margin: 0 2rem;
+  line-height: 1.5rem;
 
-  .homepage-heading {
-    grid-column: 1 / -1;
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin: 2rem 0rem;
+  * {
+    margin-left: 0;
+    padding-left: 0;
   }
 
   .homepage-section {
@@ -776,83 +772,143 @@ nav {
     gap: 1.5rem;
 
     justify-content: center;
-    max-width: 98rem;
+    max-width: 100rem;
     margin: 0 auto;
-    padding-bottom: 2rem;
+    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);
       }
     }
 
-    .homepage-heading {
+    .headerlink {
+      cursor: default;
+      pointer-events: none;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    > * {
       grid-column: 1 / -1;
-      margin: 1rem 0rem;
+    }
+
+    > p {
+      grid-column: 1;
     }
   }
+}
 
-  /* Styling for items */
-  .homepage-item {
-    background: oklch(var(--color-background));
-    border: 1px solid oklch(var(--color-codeblock-border));
-    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    min-height: 11rem;
-    padding: 1rem 2rem 2rem 2rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    cursor: pointer;
+/* MARK: Main content
+*/
 
-    &: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);
-    }
+[data-grid="wide"] {
+  grid-column: 1;
+}
+[data-grid="first-third"] {
+  grid-column: 1;
+}
+[data-grid="last-third"] {
+  grid-column: 1;
+}
+[data-grid="quarter"] {
+  grid-column: 1;
+}
+[data-grid="third"] {
+  grid-column: 1;
+}
+[data-grid="half"] {
+  grid-column: 1;
+}
+
+@media (min-width: 55rem) {
+  [data-grid="wide"] {
+    grid-column: 1 / -1;
   }
 
-  .homepage-item-heading {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
+  [data-grid="first-third"] {
+    grid-column: 1 / 4;
   }
 
-  .homepage-item-logo {
-    margin-right: 0.5rem;
+  [data-grid="first-two-thirds"] {
+    grid-column: 1 / 8;
   }
 
-  .homepage-item-logo img {
-    height: 40px;
-    width: auto;
-    display: block;
+  [data-grid="last-third"] {
+    grid-column: 8 / -1;
   }
 
-  .homepage-item-text {
-    font-size: 1.1rem;
-    font-weight: 600;
-    line-height: 1.2;
-    margin: 0;
-    padding: 0;
-    /* Hack to make text line-up with logos */
-    transform: translateY(-6px);
+  [data-grid="quarter"] {
+    grid-column: span 3;
+  }
+
+  [data-grid="third"] {
+    grid-column: span 4;
   }
 
-  .homepage-item-content {
-    line-height: 1.5rem;
+  [data-grid="half"] {
+    grid-column: span 6;
   }
 }
 
-/* MARK: Main content
-*/
+.content {
+  grid-area: content;
+  justify-self: center;
+  padding: 0 var(--space-l) 2rem var(--space-l);
+  max-width: var(--content-max-width);
 
-.content-layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr;
-  z-index: 1;
+  & > *,
+  & > ul,
+  & > ol {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    /* These gaps determine the spacing between all content. Be careful!! */
+    gap: var(--space-m) var(--space-m);
+
+    /* Handles some strangeness where single-line codeblocks caused
+   horizon */
+    ol:has(.highlight-v2),
+    ul:has(.highlight-v2) {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    > *:not([data-grid]),
+    > li:not([data-grid]) {
+      grid-column: 1;
+    }
+
+    @media (min-width: 55rem) {
+      max-width: var(--content-max-width);
+      grid-template-columns: repeat(var(--grid-columns), 1fr);
+
+      > *:not([data-grid]),
+      > li:not([data-grid]) {
+        grid-column: 1 / 8;
+      }
+    }
+  }
+
+  /* Allow redocly to fill the entire container */
+  &.content__redocly {
+    justify-self: unset;
+    max-width: 100%;
+
+    #api-component {
+      z-index: 0;
+      position: relative;
+      display: block;
+      max-width: 100%;
+      margin-top: 1rem;
+    }
+  }
 }
 
 #searchbox {
@@ -862,30 +918,7 @@ nav {
 }
 
 .breadcrumb-layout {
-  grid-column: 1 / -1;
-}
-
-.text-content {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: var(--grid-content-mobile);
-  column-gap: var(--grid-column-gutter);
-  margin-top: 2rem;
-  grid-auto-rows: max-content;
-  row-gap: var(--flow-gap);
-  justify-content: center;
-}
-
-.text-content > :not(.wide) {
-  grid-column: 1 / -1;
-}
-
-.text-content .wide {
-  grid-column: 1 / -1;
-}
-
-.text-content table {
-  width: 100%;
+  padding-top: 1rem;
 }
 
 main {
@@ -897,29 +930,6 @@ main {
     display: unset;
   }
 
-  .text-content {
-    grid-template-columns: var(--grid-content) var(--grid-side-callout);
-    grid-template-rows: 3rem max-content;
-    column-gap: var(--grid-column-gutter);
-  }
-
-  .text-content > :not(.wide) {
-    grid-column: 1;
-  }
-
-  .content-layout {
-    display: grid;
-    grid-template-columns: 1fr minmax(
-        auto,
-        calc(
-          var(--grid-content) +
-          var(--grid-side-callout) +
-          var(--grid-column-gutter)
-        )
-      ) 1fr;
-    column-gap: var(--grid-column-gutter);
-  }
-
   .navbar atomic-search-interface {
     margin: 0;
     display: block;
@@ -1353,14 +1363,19 @@ a:hover {
   text-decoration-color: oklch(var(--color-brand) / 0.8);
 }
 
+/* MARK: Typography
+*/
+
 h1 {
-  font-size: 2rem;
-  margin: 0 0 1rem 0;
+  font-size: var(--font-step-3);
 }
 
 h2 {
-  font-size: 1.5rem;
-  margin: 1rem 0 0.75rem 0;
+  font-size: var(--font-step-2);
+}
+
+p {
+  font-size: var(--font-step-0);
 }
 
 h2:target,
@@ -1433,77 +1448,98 @@ h6:has(a):hover {
 }
 
 /* Landing page cards */
-.text-content .card-layout {
-  grid-column: 1;
 
-  .card-section {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+.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;
     }
 
-    /* Hide all the cards past 3 if it is a featured card section */
     &.featured-section {
-      .card-section-content.card-grid
-        > *:nth-child(n + 4 of div.card-container) {
+      /* Hide all the cards past 3 if it is a featured card section */
+      .card-section-content > *:nth-child(n + 4 of a.card) {
         display: none;
       }
     }
   }
-}
-
-/* Optional grid layout */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
-  gap: 1.5rem;
 
-  .card-container {
-    border: 1px solid oklch(var(--color-codeblock-border));
-    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    padding: 1rem;
+  .card {
+    color: oklch(var(--color-foreground));
+    text-decoration: none;
+    order: 2;
 
     &.featured-card {
-      /* If there is a need for a featured card, only the featured card should be full length */
-      grid-column: 1 / -1;
+      order: 1;
+    }
 
-      /* If there is a featured card AND two cards, the last one should be full length */
-      ~ .card-container:nth-child(2n):last-child {
-        grid-column: 1 / -1;
-      }
+    .card-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
     }
-  }
 
-  /* If there is no featured card, last card that is the 3rd one should be full width */
-  &:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
-    grid-column: 1 / -1;
+    .card-header {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      align-items: center;
+      color: oklch(var(--color-brand));
+
+      .card-brand-icon {
+        height: 20px;
+        width: auto;
+      }
+
+      h2 {
+        padding: 0;
+        margin: 0;
+        font-size: var(--font-step-1);
+      }
+    }
   }
 }
 
-.card-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-
-  .card-header {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
+/* Optional grid layout */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: 1.5rem;
 
-    .card-brand-icon {
-      height: 20px;
-      width: auto;
-    }
+  @media (max-width: 55rem) {
+    grid-template-columns: 1fr;
+  }
 
-    h2 {
-      padding: 0;
-      margin: 0;
-      font-size: 1rem;
-    }
+  .card {
+    border: 1px solid oklch(var(--color-codeblock-border));
+    box-shadow: 3px 3px 0px oklch(var(--color-shadow));
+    padding: 1rem;
   }
 }
 
@@ -1637,7 +1673,6 @@ blockquote p:last-child {
 /* Maintain the split column for as long as possible */
 @media (min-width: 67rem) {
   blockquote.side-callout {
-    grid-column: 2 !important;
     align-self: start;
   }
 }
@@ -1827,12 +1862,37 @@ a:has(code:not(pre code)) {
 
 /* Regular Codeblock */
 .highlight {
-  padding: 0 1rem 0 1rem;
+  padding: 0 var(--codeblock-horizontal-padding) 0
+    var(--codeblock-horizontal-padding);
   position: relative;
   flex: 1;
 
-  code .cl {
-    position: relative;
+  code {
+    font-size: var(--font-step--1);
+
+    .cl {
+      position: relative;
+    }
+  }
+
+  table {
+    width: calc(100% + var(--codeblock-horizontal-padding));
+  }
+
+  .lntd:first-child pre code {
+    span {
+      margin-left: -1rem;
+      padding-left: 1rem;
+      width: calc(100% + 1rem);
+    }
+  }
+
+  pre code .line {
+    display: inline;
+  }
+
+  pre code .line.hl {
+    display: block;
   }
 }
 
@@ -1863,10 +1923,6 @@ a:has(code:not(pre code)) {
   /* margin: 1.5rem 0 0.25rem 0; */
 }
 
-.highlight code {
-  font-size: 0.875rem;
-}
-
 .highlight-v2.single-line {
   display: flex;
   align-items: center;
@@ -1890,7 +1946,7 @@ a:has(code:not(pre code)) {
 }
 
 .code-container {
-  box-shadow: 2px 2px 0px oklch(var(--color-codeblock-shadow));
+  box-shadow: 3px 3px 0px oklch(var(--color-shadow));
 }
 
 ol .code-block,
@@ -1938,6 +1994,7 @@ ul .code-block {
 .highlight code .hl {
   width: fit-content;
   min-width: 100%;
+  display: block;
   background-color: oklch(var(--color-codeblock-highlight));
 }
 
@@ -1949,6 +2006,13 @@ ul .code-block {
   }
 }
 
+/* MARK: Banner 
+*/
+
+.banner {
+  margin-top: 1rem;
+}
+
 /* MARK: Images
 */
 figure {
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
new file mode 100644
index 00000000..d0722a47
--- /dev/null
+++ b/exampleSite/content/_index.md
@@ -0,0 +1,18 @@
+---
+title: Example Site for NGINX Hugo Theme
+description: 
+---
+
+## NGINX Hugo Theme Documentation 
+Documentation for hugo theme
+{{<card-layout>}}
+  {{<card-section showAsCards="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">}}
+      See a live example of theme components
+    {{</card >}}
+  {{</card-section>}}
+{{</card-layout>}}
+
diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md
index fdec377b..500c5ec2 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" >}}
       Installing NGINX
     {{</card >}}
   {{</card-section >}}
diff --git a/exampleSite/content/test-product/call-out/all-callouts.md b/exampleSite/content/test-product/call-out/all-callouts.md
index d09f70c2..7e9868d4 100644
--- a/exampleSite/content/test-product/call-out/all-callouts.md
+++ b/exampleSite/content/test-product/call-out/all-callouts.md
@@ -25,7 +25,7 @@ This is a plain callout with a default title for its type. It has a [link](#plai
 
 Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage.
 
-{{<call-out "side-callout">}}
+{{<call-out sideline="true">}}
 This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class.
 {{</call-out>}}
 
@@ -33,7 +33,7 @@ When designing effective web layouts, it's important to maintain proper balance
 
 Additionally, concise callouts tend to be more effective at capturing user attention. When a callout becomes too verbose, users are less likely to read it entirely, defeating its purpose. The visual weight of callouts should align with their informational importance - brief, impactful statements create better engagement than lengthy explanations. Remember that white space itself is a powerful design element, creating visual breathing room that enhances readability and focus. Ultimately, the most successful callouts follow the principle of "less is more," delivering maximum impact through minimal interruption to the user's reading experience.
 
-{{<call-out "side-callout" "Custom title">}}
+{{<call-out sideline="true" title="Custom title">}}
 This is a plain side callout with a custom title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class, and a custom title.
 {{</call-out>}}
 
@@ -84,4 +84,4 @@ This is `<before-you-begin>`.
 
 {{<see-also>}}
 This is `<see-also>`.
-{{</see-also>}}
\ No newline at end of file
+{{</see-also>}}
diff --git a/exampleSite/content/test-product/cards/_index.md b/exampleSite/content/test-product/cards/_index.md
new file mode 100644
index 00000000..7346afc8
--- /dev/null
+++ b/exampleSite/content/test-product/cards/_index.md
@@ -0,0 +1,5 @@
+---
+description: Card usage
+title: Cards
+weight: 300
+---
\ No newline at end of file
diff --git a/exampleSite/content/test-product/cards/permitted.md b/exampleSite/content/test-product/cards/permitted.md
new file mode 100644
index 00000000..933ea962
--- /dev/null
+++ b/exampleSite/content/test-product/cards/permitted.md
@@ -0,0 +1,120 @@
+---
+description: Card usage
+title: Usage
+weight: 100
+---
+## General usage
+The structure of a card looks like the following:
+```plaintext
+<card-layout >
+    <card-section>
+        <card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON"><\card>
+        ...
+        <card>SOME CONTENT<\card>
+    </card-section>
+</card-layout >
+```
+
+and will render as the following:
+<div data-testid="cards-test__basic">
+  {{<card-layout >}}
+    {{<card-section>}}
+      {{<card title="SOME_TITLE">}}
+        SOME CONTENT
+      {{</card >}}
+    {{</card-section>}}
+  {{</card-layout >}}
+</div>
+
+### Params 
+To support customization, there are also some params you can add to the shortcode `<card>` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFeaturedCard`, `isFullSize`.
+
+* `title` (required) - Title of the card. 
+<br>
+* `titleUrl` (optional) - URL for the card.
+<br>
+* `icon` (optional) - Custom icon using <a href="https://lucide.dev/icons/">lucide</a> icons.
+<br>
+* `brandIcon` (optional) - Custom icon using image from  `nginx-hugo-theme/static/images/icons`.
+  * Usage: `<card brandIcon="NGINX-App-Protect-WAF-product-icon"...>`
+<br>
+* `isFeaturedCard` (optional) - Boolean indicating whether or not the card should be the first one and full size. By default, false.
+  * Usage: `<card isFeaturedCard="true"...>`
+<br>
+* `isFullSize` (optional) - Boolean indicating whether or not the card should be full size. By default, cards are half sized.
+  * Usage: `<card isFullSize="true"...>`
+
+For the `<card-section>`, there are some params you can add such as `title`, `isFeaturedSection`, and `showAsCards`.
+* `title` - Title of the section.
+<br>
+* `isFeaturedSection` (optional) - Boolean indicating whether or not the section is a featured one - will discuss later down the page. By default, false.
+<br> 
+* `showAsCards` (optional) - Boolean indicating whether or not the cards in the section should appear with borders. By default, false.
+
+### Additional Information
+While it may come immediate, you can't use a `<card>` shortcode on its own in your markdown or else the build will fail. This is because if you call a card, there is no way to structure it in a writer-friendly customizable way. 
+
+## Show as cards
+As you can see from the above example in 'General usage', it renders as a plain box that does not resemble a card. To change the appearance and render as a card, use the param `showAsCards` in the shortcode `<card-section>`. The usage as seen below:
+```plaintext
+<card-layout >
+    <card-section showAsCards="true">
+        <card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON"><\card>
+        ...
+        <card>SOME CONTENT<\card>
+    </card-section>
+</card-layout >
+```
+and will render as the following:
+<div data-testid="cards-test__showAsCards">
+  {{<card-layout >}}
+    {{<card-section showAsCards="true">}}
+      {{<card title="SOME_TITLE">}}
+        SOME CONTENT
+      {{</card >}}
+    {{</card-section>}}
+  {{</card-layout >}}
+</div>
+
+## Featured Section
+Denoted by the param `isFeaturedSection` in the shortcode `<card-layout>`, this block of cards can contain only up to three cards.
+
+<div data-testid="cards-test__featuredSection">
+  {{<card-layout >}}
+    {{<card-section showAsCards="true" isFeaturedSection="true">}}
+      {{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
+        All shortcodes in one page.
+      {{</card >}}
+      {{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
+        Examples for call-out shortcode
+      {{</card >}}
+      {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
+        Examples for codeblock shortcode
+      {{</card >}}
+      {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
+        Examples for codeblock shortcode
+      {{</card >}}
+    {{</card-section>}}
+  {{</card-layout >}}
+</div>
+
+## Featured Card
+Denoted by the param `isFeaturedCard` in the shortcode `<card>`, this will push the card up to very top of the section and make it full length.
+<div data-testid="cards-test__featuredCard">
+  {{<card-layout >}}
+    {{<card-section showAsCards="true">}}
+      {{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
+        All shortcodes in one page.
+      {{</card >}}
+      {{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
+        Examples for call-out shortcode
+      {{</card >}}
+      {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code" isFeaturedCard="true">}}
+        Examples for codeblock shortcode
+      {{</card >}}
+      {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
+        Examples for codeblock shortcode
+      {{</card >}}
+    {{</card-section>}}
+  {{</card-layout >}}
+</div>
\ No newline at end of file
diff --git a/exampleSite/layouts/index.html b/exampleSite/layouts/index.html
index 2c0398f5..2d7eb44a 100644
--- a/exampleSite/layouts/index.html
+++ b/exampleSite/layouts/index.html
@@ -1,16 +1,3 @@
 {{ define "main" }}
-
-<h1>Homepage Example</h1>
-<p>
-    <ul>
-        <li>
-            <a href="{{ relref . "nginx" }}">NGINX and NGINX Plus</a>
-        </li>
-        <li>
-            <a href="{{ relref . "test-product" }}">Test Product</a>
-        </li>
-    </ul>
-</p>
-
-
+{{ partial "homepage.html" . }}
 {{end}}
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 6b7db671..fa5369a4 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,16 +1,14 @@
 {{ define "main" }}
 
 <main class="content " role="main">
-<section class="main-layout">
-    <section id="maincontent" class="content-layout">
     <div data-cms-edit="content" class="text-content list-page">
-        <section class="breadcrumb-layout wide">
+        <div class="breadcrumb-layout">
         {{ if not .IsHome }}
             {{ if not (in .Params.display_breadcrumb "false" ) }}
             {{ partial "breadcrumb" .}}
             {{ end }}
         {{ end }}
-        </section>
+        </div>
         <div class="list-header-container">
           <img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
           <div class="list-header-title">
@@ -42,8 +40,7 @@ <h2>
         {{ end }}
 
     </div>
-    </section>
-</section>
+
 </main>
 
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9c5837b4..4284f4e2 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,28 +1,25 @@
 {{ define "main" }}
-
 <main class="content">
     <!-- Replace icons -->
     {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 
-
-    <section class="main-layout">
-    <section id="maincontent" class="content-layout">
-        <div data-cms-edit="content" class="text-content">
-        <section class="breadcrumb-layout wide">
-            {{ if not .IsHome }}
-            {{ if not (in .Params.display_breadcrumb "false" ) }}
-            {{ partial "breadcrumb" .}}
-            {{ end }}
-            {{ end }}
-        </section>
+    <div class="breadcrumb-layout">
+        {{ if not .IsHome }}
+        {{ if not (in .Params.display_breadcrumb "false" ) }}
+        {{ partial "breadcrumb" .}}
+        {{ end }}
+        {{ end }}
+    </div>
+    <article data-cms-edit="content" >
         {{ partial "banner" .}}
+
         <h1>{{ .Title }}</h1>
+
         {{ $content | safeHTML }}
+
         {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
         {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
 
-        <hr>
-
         {{ if .Page.Lastmod }}
         <div class="last-modified">
             {{ partial "page-meta-links" . }}
@@ -46,6 +43,4 @@ <h1>{{ .Title }}</h1>
 
 
 
-
-
 {{ end }}
diff --git a/layouts/partials/callout.html b/layouts/partials/callout.html
index 314137ac..52bac5ee 100644
--- a/layouts/partials/callout.html
+++ b/layouts/partials/callout.html
@@ -13,10 +13,10 @@
 {{ $sideOption := "side-callout" }}
 {{ $inlineOption := "inline-callout" }}
 
+{{/*  Default to inline callout  */}}
+{{ $dataGrid := "first-two-thirds" }}
 {{ if $sideline }}
-  {{ $class = printf "%s %s" $class $sideOption }}
-{{ else }}
-  {{ $class = printf "%s %s" $class $inlineOption }}
+  {{ $dataGrid = "last-third" }}
 {{ end }}
 
 {{/*  Render a different block, if "loud" callouts are used  */}}
@@ -33,7 +33,7 @@
 {{ $isSpecialTitle := in $specialTitles $type }}
 {{ if $isSpecialTitle }}
 {{/*  Loud callouts  */}}
-<blockquote class="{{ $class }}">
+<blockquote class="{{ $class }}" data-grid="{{ $dataGrid }}">
   <div>
     <div class="call-out-type">
       {{ partial "feather" (dict "context" . "icon" $icon) .}}
@@ -51,7 +51,7 @@
 
 {{ $cleanTitle := strings.TrimSuffix ":" $title}}
 
-<blockquote class="{{ $class }} note" data-title="{{ $cleanTitle }}">
+<blockquote class="{{ $class }} note" data-title="{{ $cleanTitle }}" data-grid="{{ $dataGrid }}">
   <div class="callout-content">
     {{- with $icon -}}
       <i class="{{ . }}"></i>
diff --git a/layouts/partials/homepage.html b/layouts/partials/homepage.html
new file mode 100644
index 00000000..52bd5acf
--- /dev/null
+++ b/layouts/partials/homepage.html
@@ -0,0 +1,5 @@
+<div class="homepage">
+  <div class="homepage-section">
+    {{ .Content }}
+  </div>
+</div>
\ No newline at end of file
diff --git a/layouts/redoc/single.html b/layouts/redoc/single.html
index 2451793d..81248520 100644
--- a/layouts/redoc/single.html
+++ b/layouts/redoc/single.html
@@ -1,6 +1,7 @@
 {{ define "main" }}
 
 <main class="content content__redocly">
+    <div class="breadcrumb-layout">{{ partial "breadcrumb" . }}</div>
     <div id="api-component">{{ .Content}}</div>
 </main>
 
diff --git a/layouts/shortcodes/card-layout.html b/layouts/shortcodes/card-layout.html
index e5337167..57d83472 100644
--- a/layouts/shortcodes/card-layout.html
+++ b/layouts/shortcodes/card-layout.html
@@ -1,2 +1,2 @@
 <!-- Render the main content first with modifications, then render the custom content -->
-<div class="card-layout">{{- .Inner | markdownify -}}</div>
+<div class="card-layout" data-testid="card-layout">{{- .Inner | markdownify -}}</div>
diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html
index c05caa9b..26478172 100644
--- a/layouts/shortcodes/card-section.html
+++ b/layouts/shortcodes/card-section.html
@@ -1,6 +1,7 @@
 {{ $title := .Get "title" }}
 {{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }}
 {{ $showAsCardsParam := .Get "showAsCards" | default "false"}}
+
 {{- /* Validate the parameter strictly */ -}}
 {{- if not (in (slice "true" "false") $showAsCardsParam) -}}
   {{- warnf "The '<card-section>' Shortcode parameter 'showAsCards' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $showAsCardsParam -}}
@@ -15,14 +16,18 @@
 {{- end -}}
 {{- $isFeaturedSection := cond (eq $isFeaturedSectionParam "true") "true" "false" -}}
 {{- $class := "card-grid" -}}
+
+{{- /* Get number of cards */ -}}
+{{ $cardCount := len (findRE "<div\\s+class=\"card\"[\\s\\S]*?>" .Inner) }}
+
 {{- /* Validate that the parent is card-layout */ -}}
 {{ if eq .Parent.Name "card-layout"}}
-  <div class="card-section {{if eq $isFeaturedSection "true"}}featured-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 }}">{{- .Inner -}}</div>    
+      <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>    
     {{ else }}
-      <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{ .Inner }}</div>    
+      <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>    
     {{ end }}
   </div>
 {{ else }}
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index b4d55878..7fdb157c 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -1,39 +1,63 @@
 {{- $title := .Get "title" -}}
-{{- $titleUrl := .Get "titleUrl" | default "/" -}} 
+{{- $titleUrl := .Get "titleUrl" | default "." -}} 
 {{- $icon := .Get "icon" | default "book-open" -}}
 {{- $brandIcon := .Get "brandIcon" -}}
-{{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
+{{- $isFeaturedParam := .Get "isFeaturedCard" | default "false" }}
+{{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
+{{- $isLandingParam := .Get "isLanding" | default "false" }}
+
 {{- /* Validate the parameter strictly */ -}}
 {{- if not (in (slice "true" "false") $isFeaturedParam) -}}
-  {{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
+  {{- warnf "The '<card>' Shortcode parameter 'isFeaturedCard' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
 {{- end -}}
 {{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
-{{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
-{{- $newCard := dict "title" ($title) "content" (.Inner) -}}
-{{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
+
+{{- if not (in (slice "true" "false") $isFullSizeParam) -}}
+  {{- warnf "The '<card>' Shortcode parameter 'isFullSize' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFullSizeParam -}}
+{{- end -}}
+{{- $isFullSize := cond (eq $isFullSizeParam "true") "true" "false" -}}
+
+{{- if not (in (slice "true" "false") $isLandingParam) -}}
+  {{- warnf "The '<card>' Shortcode parameter 'isLanding' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isLandingParam -}}
+{{- end -}}
+{{- $isLanding := cond (eq $isLandingParam "true") "true" "false" -}}
+
+{{- /* Set up the positioning */ -}}
+{{ $dataGrid := "" }}
+{{ if or (eq $isFullSize "true") (eq $isFeatured "true") }}
+  {{ $dataGrid = "wide"}}
+{{ else if (eq $isLanding "true") }}
+  {{ $dataGrid = "third"}}
+{{ else }}
+  {{ $dataGrid = "half"}}
+{{ end }}
+
+{{- /* Build the url */ -}}
+{{ 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 }}
+{{ 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") -}}
-  <div class="card-container {{ if eq $isFeatured "true" }}featured-card{{ end }}">
+<a href="{{- $url -}}" alt="{{- $title -}}" class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}" data-testid="{{ if eq $isFeatured "true" }}card__featured-card{{else}}card{{ end }}">
+  <div class="card-container">
     {{- if $title -}}
       <div class="card-header">
         {{- if $brandIcon -}}
           <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
-        {{- else -}}
-          {{- if $icon -}}
-            {{ partial "lucide" (dict "context" . "icon" $icon) }}
-          {{- end -}}
-        {{- end -}}
-        {{- if $titleUrl -}}
-          <h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
-        {{- else -}}
-          <h2 class="card-title">{{- $title -}}</h2>
+        {{- else if $icon -}}
+          {{ partial "lucide" (dict "context" . "icon" $icon) }}
         {{- end -}}
+        <h2 class="card-title">{{- $title -}}</h2>
       </div>
     {{- else -}}
       {{ errorf "Mainframe: Missing param 'title'" }}
     {{- end -}}
-    {{ .Inner }}
+    <div class="card-content">{{ .Inner }}</div>
   </div>
+</a>
 {{- else -}}
   {{ errorf "The '<card>' must be nested directly inside the shortcode '<card-section>'. Please see the exampleSite for an example of usage." }}
 {{- end -}}
\ No newline at end of file
diff --git a/tests/src/cards.spec.js b/tests/src/cards.spec.js
new file mode 100644
index 00000000..3f40eb38
--- /dev/null
+++ b/tests/src/cards.spec.js
@@ -0,0 +1,71 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Testing for cards shortcode', () => {
+  test.beforeEach(async ({ page }) => {
+    const cardsUrl = 'test-product/cards/permitted';
+    await page.goto(`/${cardsUrl}`);
+  });
+
+  test('should test basic section', async ({ page }) => {
+    const section = await page.locator('data-testid=cards-test__basic');
+    const basicCode = await section.locator('data-testid=card-section-content');
+    const showAsCardCode = await section.locator(
+      'data-testid=card-section-content__card-grid'
+    );
+
+    expect(await basicCode.count()).toBeTruthy();
+    expect(await showAsCardCode.count()).toBe(0);
+  });
+
+  test('should test showAsCard section', async ({ page }) => {
+    const section = await page.locator('data-testid=cards-test__showAsCards');
+    const showAsCardCode = await section.locator(
+      'data-testid=card-section-content__card-grid'
+    );
+
+    expect(await showAsCardCode.count()).toBeTruthy();
+  });
+
+  test('should test featured section', async ({ page }) => {
+    const section = await page.locator(
+      'data-testid=cards-test__featuredSection'
+    );
+    const featuredSection = await section.locator(
+      'data-testid=card-section__featured-section'
+    );
+    const cards = await (
+      await featuredSection.locator('data-testid=card')
+    ).all();
+
+    // Test featured section exists AND there are less than or equal to 3 cards.
+    expect(await featuredSection.count()).toBeTruthy();
+    const visibleCards = [];
+    for (const card of cards) {
+      if (await card.isVisible()) {
+        visibleCards.push(card);
+      }
+    }
+    expect(visibleCards.length).toBeLessThanOrEqual(3);
+  });
+
+  test('should test featured card', async ({ page }) => {
+    const section = await page.locator('data-testid=cards-test__featuredCard');
+    const featuredCard = await section.locator(
+      'data-testid=card__featured-card'
+    );
+    const cards = await (await section.locator('data-testid=card')).all();
+    const featuredCardOrder = await featuredCard.evaluate((el) => {
+      return window.getComputedStyle(el).getPropertyValue('order');
+    });
+
+    // Test featured card exist AND is the first one in the order
+    expect(await featuredCard.count()).toBeTruthy();
+    expect(featuredCardOrder).toBe('1');
+    for (const card of cards) {
+      const order = await card.evaluate((el) => {
+        return window.getComputedStyle(el).getPropertyValue('order');
+      });
+      expect(order).toBe('2');
+    }
+  });
+});