From 06b30130173b4674142ee891088956742e8f00d1 Mon Sep 17 00:00:00 2001
From: Madhur Jain <21112002mj@gmail.com>
Date: Thu, 5 Mar 2026 17:52:21 +0530
Subject: [PATCH 1/5] feat: implemented blocks in cta section pattern

---
 templates/_macros/vf_cta-section.jinja | 66 ++++++++++++++++++++++----
 1 file changed, 57 insertions(+), 9 deletions(-)

diff --git a/templates/_macros/vf_cta-section.jinja b/templates/_macros/vf_cta-section.jinja
index 57314185e..62e2a2b3b 100644
--- a/templates/_macros/vf_cta-section.jinja
+++ b/templates/_macros/vf_cta-section.jinja
@@ -1,11 +1,15 @@
+{% from "_macros/shared/vf_cta-block.jinja" import vf_cta_block %}
+{% from "_macros/shared/vf_description-block.jinja" import vf_description_block %}
+
 # All Params
   # title_text: H2 title text
   # variant: variant for the cta section. Options are "default", "block". Default is "default".
   # layout: Layout type of cta section. Options are "100", "25-75".
+  # blocks: list of content blocks for the CTA section. Includes description and cta blocks.
 
 # All Slots
-  # description: Paragraph-style (one or more) content below the title. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
-  # cta: Call-to-action block with action links/buttons. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
+  # description (deprecated): Paragraph-style (one or more) content below the title. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
+  # cta (deprecated): Call-to-action block with action links/buttons. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
 
 # Variants:
   # default-100: Full-width CTA with title and link text
@@ -14,6 +18,7 @@
         # variant: default
         # layout: 100
         # attrs: A dictionary of attributes to apply to the section element
+        # blocks: cta-block is required
 
     # Slots:
         # cta: The cta link - required
@@ -23,6 +28,7 @@
         # title_text: H2 title text - optional
         # variant: default
         # layout: 25-75
+        # blocks: cta-block is required
 
       # Slots:
         # cta: The cta link - required
@@ -32,6 +38,7 @@
         # title_text: H2 title text - required
         # variant: block
         # layout: 100
+        # blocks: cta-block is required
 
     # Slots:
         # description: Paragraph-style (one or more) content below the title - Optional
@@ -42,31 +49,69 @@
         # title_text: H2 title text - required
         # variant: block
         # layout: 25-75
+        # blocks: cta-block is required
 
     # Slots:
         # description: Paragraph-style (one or more) content below the title - Optional
         # cta: Call-to-action block (required)
 
-{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None, attrs={}) -%}
+{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None, attrs={}, blocks=[]) -%}
+  
+  {%- set description_block = blocks | selectattr("type", "equalto", "description") | list | last | default(None) -%} 
+  {%- set cta_block = blocks | selectattr("type", "equalto", "cta") | list | last | default(None) -%}
+
   {% set description_content = caller('description') %}
-  {% set has_description = description_content|trim|length > 0 %}
+  {% set has_description = description_block or description_content|trim|length > 0 %}
   {% set cta_content = caller('cta') %}
-  {% set has_cta = cta_content|trim|length > 0 %}
+  {% set has_cta = cta_block or cta_content|trim|length > 0 %}
+
+  {%- if cta_block -%}
+    {%- set cta_block_item = cta_block.get("item", {}) -%}
+    {%- set cta_block_type = cta_block_item.get("type","") | trim -%}
+
+    {%- if  cta_block_type == "html" -%}
+        {%- set cta_content = cta_block_item.get("content","") | trim -%}
+    {%- endif -%}
+  {%- endif -%}
+  
+  {%- if description_block -%}
+    {%- set description_block_item = description_block.get("item", {}) -%}
+  {%- endif -%}    
+
   {#- User can pass layout as "X-Y" or "X/Y" -#}
   {% set layout = layout | trim | replace('/', '-') %}
+
   {% if layout not in ['100', '25-75'] %}
     {% set layout = "100" %}
   {% endif %}
+
   {% set variant = variant | trim %}
   {% if variant not in ['default', 'block'] %}
     {% set variant = "default" %}
   {% endif %}
+
   {%- macro _description_block() -%}
-    {% if has_description %}{{ description_content }}{% endif %}
-  {%- endmacro -%}
+    {%- if description_block -%}
+      {{ vf_description_block(type = description_block_item.get("type", ""), content = description_block_item.get("content","")) }}
+    {% elif has_description %}
+      {{ description_content }}
+    {% endif %}
+  {%- endmacro %}
+  
   {%- macro _cta_block() -%}
-    {% if has_cta -%}<div class="p-cta-block">{{ cta_content }}</div>{% endif %}
-  {%- endmacro -%}
+    {%- if cta_block -%}
+        {%- if  cta_block_type == "html" -%}
+          <div class="p-cta-block">{{- cta_content | safe -}}</div>
+        {%- else -%}
+          {{ vf_cta_block( primary=cta_block_item.get("primary", {}),
+                           secondaries=cta_block_item.get("secondaries", []),
+                           link=cta_block_item.get("link",{})) }}
+        {% endif %}
+    {% elif has_cta %}
+      <div class="p-cta-block">{{ cta_content }}</div>
+    {% endif %}
+  {%- endmacro %}
+
   {%- macro _cta_default_variant() -%}
     <h2>
       {%- if title_text -%}
@@ -76,11 +121,13 @@
       {{ cta_content }}
     </h2>
   {%- endmacro -%}
+
   {%- macro _cta_block_variant() -%}
     <h2>{{ title_text }}</h2>
     {{ _description_block() -}}
     {{ _cta_block() }}
   {%- endmacro -%}
+
   {%- macro _cta_variant() -%}
     {%- if variant == 'default' -%}
       {{ _cta_default_variant() }}
@@ -88,6 +135,7 @@
       {{ _cta_block_variant() }}
     {%- endif -%}
   {%- endmacro -%}
+  
   <hr class="p-rule is-fixed-width u-no-margin--bottom" />
   <section class="p-strip is-deep {{ attrs.get("class", "") -}}"
     {%- for attr, value in attrs.items() -%}

From 179af501ff0e7d45bc14635bb43d782868a10d17 Mon Sep 17 00:00:00 2001
From: Madhur Jain <21112002mj@gmail.com>
Date: Thu, 5 Mar 2026 17:52:42 +0530
Subject: [PATCH 2/5] feat: updated examples of cta-section

---
 .../patterns/cta-section/block-25-75.html     | 55 ++++++++++++++-----
 .../cta-section/block-full-width.html         | 55 ++++++++++++++-----
 .../patterns/cta-section/cta-block.html       | 41 ++++++++++++++
 .../default-25-75-links-within-text.html      | 24 ++++----
 .../patterns/cta-section/default-25-75.html   | 24 +++++---
 .../default-full-width-links-within-text.html | 24 ++++----
 .../cta-section/default-full-width.html       | 26 +++++----
 .../cta-section/description-block.html        | 33 +++++++++++
 8 files changed, 215 insertions(+), 67 deletions(-)
 create mode 100644 templates/docs/examples/patterns/cta-section/cta-block.html
 create mode 100644 templates/docs/examples/patterns/cta-section/description-block.html

diff --git a/templates/docs/examples/patterns/cta-section/block-25-75.html b/templates/docs/examples/patterns/cta-section/block-25-75.html
index 2d36058de..a1c4787ba 100644
--- a/templates/docs/examples/patterns/cta-section/block-25-75.html
+++ b/templates/docs/examples/patterns/cta-section/block-25-75.html
@@ -4,18 +4,45 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        title_text='The quick brown fox jumps over the lazy dog',
-        variant='block',
-        layout='25-75'
-        ) -%}
-        {%- if slot == 'description' -%}
-            <p>The quick brown fox jumps over the lazy dog.</p>
-        {%- endif -%}
-        {%- if slot == 'cta' -%}
-            <a href="#" class="p-button--positive">Action</a>
-            <a href="#" class="p-button">Action</a>
-            <a href="#">Lorem ipsum dolor sit amet&#32;&rsaquo;</a>
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='block',
+    layout='25-75',
+    blocks=[
+      {
+        "type": "description",
+        "item": {
+          "type": "text",
+          "content": "The quick brown fox jumps over the lazy dog."
+        }
+      },
+      {
+        "type": "cta",
+        "item": {
+          "primary": {
+            "content_html": "Action",
+            "attrs": {
+              "href": "link-url",
+              "class": "optional-css-class"
+            }
+          },
+          "secondaries": [
+            {
+              "content_html": "Secondary action",
+              "attrs": {
+                "href": "link-url"
+              }
+            }
+          ],
+          "link": {
+            "content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
+            "attrs": {
+              "href": "link-url"
+            }
+          }
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/cta-section/block-full-width.html b/templates/docs/examples/patterns/cta-section/block-full-width.html
index 2f865041f..804271d66 100644
--- a/templates/docs/examples/patterns/cta-section/block-full-width.html
+++ b/templates/docs/examples/patterns/cta-section/block-full-width.html
@@ -4,18 +4,45 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        title_text='The quick brown fox jumps over the lazy dog',
-        variant='block',
-        layout='100'
-        ) -%}
-        {%- if slot == 'description' -%}
-            <p>The quick brown fox jumps over the lazy dog.</p>
-        {%- endif -%}
-        {%- if slot == 'cta' -%}
-            <a href="#" class="p-button--positive">Action</a>
-            <a href="#" class="p-button">Action</a>
-            <a href="#">Lorem ipsum dolor sit amet&#32;&rsaquo;</a>
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='block',
+    layout='100',
+    blocks=[
+      {
+        "type": "description",
+        "item": {
+          "type": "text",
+          "content": "The quick brown fox jumps over the lazy dog."
+        }
+      },
+      {
+        "type": "cta",
+        "item": {
+          "primary": {
+            "content_html": "Action",
+            "attrs": {
+              "href": "link-url",
+              "class": "optional-css-class"
+            }
+          },
+          "secondaries": [
+            {
+              "content_html": "Action",
+              "attrs": {
+                "href": "link-url"
+              }
+            }
+          ],
+          "link": {
+            "content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
+            "attrs": {
+              "href": "link-url"
+            }
+          }
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/cta-section/cta-block.html b/templates/docs/examples/patterns/cta-section/cta-block.html
new file mode 100644
index 000000000..1912183a8
--- /dev/null
+++ b/templates/docs/examples/patterns/cta-section/cta-block.html
@@ -0,0 +1,41 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_cta-section.jinja" import vf_cta_section %}
+{% block title %}CTA section / CTA block{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+{% set is_paper = true %}
+{% block content %}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='block',
+    layout='25-75',
+    blocks=[
+      {
+        "type": "cta",
+        "item": {
+          "primary": {
+            "content_html": "Action",
+            "attrs": {
+              "href": "link-url",
+              "class": "optional-css-class"
+            }
+          },
+          "secondaries": [
+            {
+              "content_html": "Secondary action",
+              "attrs": {
+                "href": "link-url"
+              }
+            }
+          ],
+          "link": {
+            "content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
+            "attrs": {
+              "href": "link-url"
+            }
+          }
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/cta-section/default-25-75-links-within-text.html b/templates/docs/examples/patterns/cta-section/default-25-75-links-within-text.html
index 9f87b6ddb..e79c93274 100644
--- a/templates/docs/examples/patterns/cta-section/default-25-75-links-within-text.html
+++ b/templates/docs/examples/patterns/cta-section/default-25-75-links-within-text.html
@@ -4,14 +4,18 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        variant='default',
-        layout='25/75',
-        ) -%}
-        {%- if slot == 'cta' -%}
-            For more information, <a href="#">read the docs</a>
-            <br />
-            or <a href="#">contact us</a> to let our experts help you take the next step
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    variant='default',
+    layout='25/75',
+    blocks=[
+      {
+        "type": "cta",
+        "item": {
+          "type": "html",
+          "content": "For more information, <a href='link-url'>read the docs</a><br />or <a href='link-url'>contact us</a> to let our experts help you take the next step"
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/cta-section/default-25-75.html b/templates/docs/examples/patterns/cta-section/default-25-75.html
index d2650e666..6fcf64086 100644
--- a/templates/docs/examples/patterns/cta-section/default-25-75.html
+++ b/templates/docs/examples/patterns/cta-section/default-25-75.html
@@ -4,13 +4,19 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        title_text='The quick brown fox jumps over the lazy dog',
-        variant='default',
-        layout='25-75',
-        ) -%}
-        {%- if slot == 'cta' -%}
-            <a href="#">The quick brown fox jumps over the lazy dog &rsaquo;</a>
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='default',
+    layout='25-75',
+    blocks=[
+      {
+        "type": "cta",
+        "item": {
+          "type": "html",
+          "content": "<a href='link-url'>The quick brown fox jumps over the lazy dog &rsaquo;</a>"
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/cta-section/default-full-width-links-within-text.html b/templates/docs/examples/patterns/cta-section/default-full-width-links-within-text.html
index acff1c813..93bcf4c33 100644
--- a/templates/docs/examples/patterns/cta-section/default-full-width-links-within-text.html
+++ b/templates/docs/examples/patterns/cta-section/default-full-width-links-within-text.html
@@ -4,14 +4,18 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        variant='default',
-        layout='100',
-        ) -%}
-        {%- if slot == 'cta' -%}
-            For more information, <a href="#">read the docs</a>
-            <br />
-            or <a href="#">contact us</a> to let our experts help you take the next step
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    variant='default',
+    layout='100',
+    blocks=[
+      {
+        "type": "cta",
+        "item": {
+          "type": "html",
+          "content": "For more information, <a href='link-url'>read the docs</a><br />or <a href='link-url'>contact us</a> to let our experts help you take the next step"
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/cta-section/default-full-width.html b/templates/docs/examples/patterns/cta-section/default-full-width.html
index c3fe22724..1afb36228 100644
--- a/templates/docs/examples/patterns/cta-section/default-full-width.html
+++ b/templates/docs/examples/patterns/cta-section/default-full-width.html
@@ -4,14 +4,20 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        title_text='The quick brown fox jumps over the lazy dog',
-        variant='default',
-        layout='100',
-        attrs={'id': 'full-width-default'}
-        ) -%}
-        {%- if slot == 'cta' -%}
-            <a href="#">The quick brown fox jumps over the lazy dog &rsaquo;</a>
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='default',
+    layout='100',
+    attrs={'id': 'full-width-default'},
+    blocks=[
+      {
+        "type": "cta",
+        "item": {
+          "type": "html",
+          "content": "<a href='link-url'>The quick brown fox jumps over the lazy dog &rsaquo;</a>"
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/cta-section/description-block.html b/templates/docs/examples/patterns/cta-section/description-block.html
new file mode 100644
index 000000000..c19ab1702
--- /dev/null
+++ b/templates/docs/examples/patterns/cta-section/description-block.html
@@ -0,0 +1,33 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_cta-section.jinja" import vf_cta_section %}
+{% block title %}CTA section / Description block{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+{% set is_paper = true %}
+{% block content %}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='block',
+    layout='25-75',
+    blocks=[
+      {
+        "type": "description",
+        "item": {
+          "type": "text",
+          "content": "The quick brown fox jumps over the lazy dog."
+        }
+      },
+      {
+        "type": "cta",
+        "item": {
+          "primary": {
+            "content_html": "Action",
+            "attrs": {
+              "href": "link-url"
+            }
+          }
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
+{% endblock %}

From df74484e3bb59013efa67d16b3ea8d7260282a7c Mon Sep 17 00:00:00 2001
From: Madhur Jain <21112002mj@gmail.com>
Date: Thu, 5 Mar 2026 17:52:54 +0530
Subject: [PATCH 3/5] updated documentation for cta-section

---
 templates/docs/patterns/cta-section/index.md | 112 ++++++++++++++++++-
 1 file changed, 109 insertions(+), 3 deletions(-)

diff --git a/templates/docs/patterns/cta-section/index.md b/templates/docs/patterns/cta-section/index.md
index 4f713e7ef..ded4bcac2 100644
--- a/templates/docs/patterns/cta-section/index.md
+++ b/templates/docs/patterns/cta-section/index.md
@@ -76,6 +76,94 @@ You can use <code>block</code> variant with <code>25-75</code> layout to create
 View example of the 25-75 split cta section with cta block
 </a></div>
 
+## Blocks
+
+### Description
+
+Description blocks can be used to display elaborative text content.
+
+By default, the description contents are rendered within a `<p>` tag, but you can also use `type:"html"` to render raw HTML
+content.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/cta-section/description-block" class="js-example" data-lang="jinja">
+View example of the CTA section with description block
+</a></div>
+
+```json
+{
+  "type": "description",
+  "item": {
+    "type": "text" | "html",
+    "content": "Your content here"
+  }
+}
+```
+
+- **`type`**: Either `"text"` (default) or `"html"`. Text content is wrapped in `<p>` tags, HTML content is rendered as-is.
+- **`content`**: The text or HTML content to display.
+
+### CTA
+
+The CTA block allows you to include call-to-action elements within the section.
+You may either use  `type:"html"` with `content:"<html-content></html-content>"` to render custom HTML or use  `type:"text"` which supports three types of CTA items:
+
+- **Primary**: 1 main call-to-action button
+- **Secondary**: Supporting action buttons
+- **Link**: Text link
+
+<div class="embedded-example"><a href="/docs/examples/patterns/cta-section/cta-block" class="js-example" data-lang="jinja">
+View example of the CTA section with CTA block
+</a></div>
+
+```json
+{
+  "type": "cta",
+  "item": {
+    "primary": {
+      "content_html": "Primary button text",
+      "attrs": {
+        "href": "link-url",
+        "class": "optional-css-class"
+      }
+    },
+    "secondaries": [
+      {
+        "content_html": "Secondary button text",
+        "attrs": {
+          "href": "link-url"
+        }
+      }
+    ],
+    "link": {
+      "content_html": "Link text",
+      "attrs": {
+        "href": "link-url"
+      }
+    }
+  }
+}
+
+or
+
+{
+  "type": "cta",
+  "item": {
+    "type": "html",
+    "content": "<a href='link-url'>The quick brown fox jumps over the lazy dog &rsaquo;</a>"
+
+  }
+}
+```
+
+- **`primary`**: Optional primary button configuration.
+- **`secondaries`**: Optional array of secondary button configurations.
+- **`link`**: Optional text link configuration.
+
+Each of the CTA configurations accepts the following properties:
+
+- **`content_html`**: The inner HTML of the CTA item.
+- **`attrs`**: Dictionary of button/link attributes. These are applied to the CTA element. If `href` is present, the CTA item will be an `<a>`, otherwise it will be a `<button>`. See [attribute forwarding docs](/docs/building-vanilla#attribute-forwarding) for more info.
+
 ## Jinja Macro
 
 The `vf_cta_section` Jinja macro can be used to generate a CTA section pattern. The API for the macro is shown below.
@@ -166,12 +254,31 @@ The `vf_cta_section` Jinja macro can be used to generate a CTA section pattern.
           Attributes to apply to the CTA section. See <a href="/docs/building-vanilla#attribute-forwarding">attribute forwarding docs</a> for more info.
         </td>
       </tr>
+      <tr>
+        <td>
+          <code>blocks</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          <code>Array</code>
+        </td>
+        <td>
+          <code>[]</code>
+        </td>
+        <td>
+          List of content blocks for the CTA section. See <a href="#blocks">Blocks</a> for available block types.
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>
 
 ### Slots
 
+CTA section slots are now deprecated, and will be removed in the future version of Vanilla. Please visit [blocks](#blocks) for recommended implementation.
+
 <div style="overflow: auto;">
   <table>
     <thead>
@@ -182,10 +289,9 @@ The `vf_cta_section` Jinja macro can be used to generate a CTA section pattern.
       </tr>
     </thead>
     <tbody>
-      <tr>
       <tr>
         <td>
-          <code>description</code>
+          <code>description {{ status("deprecated") }}</code>
         </td>
         <td>
           No
@@ -196,7 +302,7 @@ The `vf_cta_section` Jinja macro can be used to generate a CTA section pattern.
       </tr>
       <tr>
         <td>
-          <code>cta</code>
+          <code>cta {{ status("deprecated") }}</code>
         </td>
         <td>
           Yes

From 01bf604a3546d36c934f1ba7d3975ba16551c51d Mon Sep 17 00:00:00 2001
From: Madhur Jain <21112002mj@gmail.com>
Date: Thu, 5 Mar 2026 17:55:14 +0530
Subject: [PATCH 4/5] feat: package update

---
 package.json | 2 +-
 releases.yml | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a24e57682..d10300646 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.45.0",
+  "version": "4.46.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
diff --git a/releases.yml b/releases.yml
index 293090734..9aa5b0e78 100644
--- a/releases.yml
+++ b/releases.yml
@@ -1,3 +1,9 @@
+- version: 4.46.0
+  features:
+    - component: CTA section
+      url: /docs/patterns/cta-section
+      status: Updated
+      notes: Added <a href="/docs/patterns/cta-section#blocks">blocks</a> successor to slots.
 - version: 4.45.0
   features:
     - component: In-page navigation

From 48e0bf431117760efccfd5e31b87655362dfccf1 Mon Sep 17 00:00:00 2001
From: Madhur Jain <21112002mj@gmail.com>
Date: Fri, 13 Mar 2026 16:53:35 +0530
Subject: [PATCH 5/5] review changes

---
 .../docs/examples/patterns/cta-section/block-25-75.html   | 6 +++---
 .../examples/patterns/cta-section/block-full-width.html   | 6 +++---
 .../docs/examples/patterns/cta-section/cta-block.html     | 6 +++---
 .../examples/patterns/cta-section/description-block.html  | 2 +-
 templates/docs/patterns/basic-section/index.md            | 8 ++++----
 templates/docs/patterns/cta-section/index.md              | 8 ++++----
 templates/docs/patterns/hero/index.md                     | 6 +++---
 templates/docs/patterns/logo-section/index.md             | 6 +++---
 templates/docs/patterns/resources/index.md                | 6 +++---
 templates/docs/patterns/tab-section/index.md              | 8 ++++----
 10 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/templates/docs/examples/patterns/cta-section/block-25-75.html b/templates/docs/examples/patterns/cta-section/block-25-75.html
index a1c4787ba..6383991c1 100644
--- a/templates/docs/examples/patterns/cta-section/block-25-75.html
+++ b/templates/docs/examples/patterns/cta-section/block-25-75.html
@@ -22,7 +22,7 @@
           "primary": {
             "content_html": "Action",
             "attrs": {
-              "href": "link-url",
+              "href": "#",
               "class": "optional-css-class"
             }
           },
@@ -30,14 +30,14 @@
             {
               "content_html": "Secondary action",
               "attrs": {
-                "href": "link-url"
+                "href": "#"
               }
             }
           ],
           "link": {
             "content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
             "attrs": {
-              "href": "link-url"
+              "href": "#"
             }
           }
         }
diff --git a/templates/docs/examples/patterns/cta-section/block-full-width.html b/templates/docs/examples/patterns/cta-section/block-full-width.html
index 804271d66..949c19a6f 100644
--- a/templates/docs/examples/patterns/cta-section/block-full-width.html
+++ b/templates/docs/examples/patterns/cta-section/block-full-width.html
@@ -22,7 +22,7 @@
           "primary": {
             "content_html": "Action",
             "attrs": {
-              "href": "link-url",
+              "href": "#",
               "class": "optional-css-class"
             }
           },
@@ -30,14 +30,14 @@
             {
               "content_html": "Action",
               "attrs": {
-                "href": "link-url"
+                "href": "#"
               }
             }
           ],
           "link": {
             "content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
             "attrs": {
-              "href": "link-url"
+              "href": "#"
             }
           }
         }
diff --git a/templates/docs/examples/patterns/cta-section/cta-block.html b/templates/docs/examples/patterns/cta-section/cta-block.html
index 1912183a8..53c071312 100644
--- a/templates/docs/examples/patterns/cta-section/cta-block.html
+++ b/templates/docs/examples/patterns/cta-section/cta-block.html
@@ -15,7 +15,7 @@
           "primary": {
             "content_html": "Action",
             "attrs": {
-              "href": "link-url",
+              "href": "#",
               "class": "optional-css-class"
             }
           },
@@ -23,14 +23,14 @@
             {
               "content_html": "Secondary action",
               "attrs": {
-                "href": "link-url"
+                "href": "#"
               }
             }
           ],
           "link": {
             "content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
             "attrs": {
-              "href": "link-url"
+              "href": "#"
             }
           }
         }
diff --git a/templates/docs/examples/patterns/cta-section/description-block.html b/templates/docs/examples/patterns/cta-section/description-block.html
index c19ab1702..d36863b7c 100644
--- a/templates/docs/examples/patterns/cta-section/description-block.html
+++ b/templates/docs/examples/patterns/cta-section/description-block.html
@@ -22,7 +22,7 @@
           "primary": {
             "content_html": "Action",
             "attrs": {
-              "href": "link-url"
+              "href": "#"
             }
           }
         }
diff --git a/templates/docs/patterns/basic-section/index.md b/templates/docs/patterns/basic-section/index.md
index a766740a4..06211e028 100644
--- a/templates/docs/patterns/basic-section/index.md
+++ b/templates/docs/patterns/basic-section/index.md
@@ -308,7 +308,7 @@ them into the basic section layout.
   "item": {
     "links": [
       {
-        "href": "link-url",
+        "href": "#",
         "text": "Link text",
         "label": "Aria label",
         "image_attrs": {
@@ -353,7 +353,7 @@ View example of the basic section pattern with cta variants
     "primary": {
       "content_html": "Primary button text",
       "attrs": {
-        "href": "link-url",
+        "href": "#",
         "class": "optional-css-class"
       }
     },
@@ -361,14 +361,14 @@ View example of the basic section pattern with cta variants
       {
         "content_html": "Secondary button text",
         "attrs": {
-          "href": "link-url"
+          "href": "#"
         }
       }
     ],
     "link": {
       "content_html": "Link text",
       "attrs": {
-        "href": "link-url"
+        "href": "#"
       }
     }
   }
diff --git a/templates/docs/patterns/cta-section/index.md b/templates/docs/patterns/cta-section/index.md
index ded4bcac2..113466c66 100644
--- a/templates/docs/patterns/cta-section/index.md
+++ b/templates/docs/patterns/cta-section/index.md
@@ -105,7 +105,7 @@ View example of the CTA section with description block
 ### CTA
 
 The CTA block allows you to include call-to-action elements within the section.
-You may either use  `type:"html"` with `content:"<html-content></html-content>"` to render custom HTML or use  `type:"text"` which supports three types of CTA items:
+You may either use `type:"html"` with `content:"<html-content></html-content>"` to render custom HTML or use `type:"text"` which supports three types of CTA items:
 
 - **Primary**: 1 main call-to-action button
 - **Secondary**: Supporting action buttons
@@ -122,7 +122,7 @@ View example of the CTA section with CTA block
     "primary": {
       "content_html": "Primary button text",
       "attrs": {
-        "href": "link-url",
+        "href": "#",
         "class": "optional-css-class"
       }
     },
@@ -130,14 +130,14 @@ View example of the CTA section with CTA block
       {
         "content_html": "Secondary button text",
         "attrs": {
-          "href": "link-url"
+          "href": "#"
         }
       }
     ],
     "link": {
       "content_html": "Link text",
       "attrs": {
-        "href": "link-url"
+        "href": "#"
       }
     }
   }
diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md
index 25bee215e..d1a2aeca2 100644
--- a/templates/docs/patterns/hero/index.md
+++ b/templates/docs/patterns/hero/index.md
@@ -160,7 +160,7 @@ View example of the Hero section with CTA block
     "primary": {
       "content_html": "Primary button text",
       "attrs": {
-        "href": "link-url",
+        "href": "#",
         "class": "optional-css-class"
       }
     },
@@ -168,14 +168,14 @@ View example of the Hero section with CTA block
       {
         "content_html": "Secondary button text",
         "attrs": {
-          "href": "link-url"
+          "href": "#"
         }
       }
     ],
     "link": {
       "content_html": "Link text",
       "attrs": {
-        "href": "link-url"
+        "href": "#"
       }
     }
   }
diff --git a/templates/docs/patterns/logo-section/index.md b/templates/docs/patterns/logo-section/index.md
index 9f1fadef9..68db8d074 100644
--- a/templates/docs/patterns/logo-section/index.md
+++ b/templates/docs/patterns/logo-section/index.md
@@ -71,7 +71,7 @@ View example of the logo section pattern with CTA block
     "primary": {
       "content_html": "Primary button text",
       "attrs": {
-        "href": "link-url",
+        "href": "#",
         "class": "optional-css-class"
       }
     },
@@ -79,14 +79,14 @@ View example of the logo section pattern with CTA block
       {
         "content_html": "Secondary button text",
         "attrs": {
-          "href": "link-url"
+          "href": "#"
         }
       }
     ],
     "link": {
       "content_html": "Link text",
       "attrs": {
-        "href": "link-url"
+        "href": "#"
       }
     }
   }
diff --git a/templates/docs/patterns/resources/index.md b/templates/docs/patterns/resources/index.md
index 5af48721a..7dc99b23c 100644
--- a/templates/docs/patterns/resources/index.md
+++ b/templates/docs/patterns/resources/index.md
@@ -198,7 +198,7 @@ It supports three types of CTA items:
     "primary": {
       "content_html": "Primary button text",
       "attrs": {
-        "href": "link-url",
+        "href": "#",
         "class": "optional-css-class"
       }
     },
@@ -206,14 +206,14 @@ It supports three types of CTA items:
       {
         "content_html": "Secondary button text",
         "attrs": {
-          "href": "link-url"
+          "href": "#"
         }
       }
     ],
     "link": {
       "content_html": "Link text",
       "attrs": {
-        "href": "link-url"
+        "href": "#"
       }
     }
   }
diff --git a/templates/docs/patterns/tab-section/index.md b/templates/docs/patterns/tab-section/index.md
index b264272e3..6ea9512b5 100644
--- a/templates/docs/patterns/tab-section/index.md
+++ b/templates/docs/patterns/tab-section/index.md
@@ -159,7 +159,7 @@ Add CTA buttons and/or links to encourage user action.
     "primary": {
       "content_html": "Primary button text",
       "attrs": {
-        "href": "link-url",
+        "href": "#",
         "class": "optional-css-class"
       }
     },
@@ -167,14 +167,14 @@ Add CTA buttons and/or links to encourage user action.
       {
         "content_html": "Secondary button text",
         "attrs": {
-          "href": "link-url"
+          "href": "#"
         }
       }
     ],
     "link": {
       "content_html": "Link text",
       "attrs": {
-        "href": "link-url"
+        "href": "#"
       }
     }
   }
@@ -273,7 +273,7 @@ View example of the tab section pattern with a linked logo tab
 {
   "links": [
     {
-      "href": "link-url",
+      "href": "#",
       "text": "Link text",
       "label": "Aria label",
       "image_attrs": {