diff --git a/package.json b/package.json
index b7bf5685e..4800ca6be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.43.0",
+  "version": "4.44.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
diff --git a/releases.yml b/releases.yml
index 91f941066..deac174f4 100644
--- a/releases.yml
+++ b/releases.yml
@@ -1,3 +1,13 @@
+- version: 4.44.0
+  features:
+    - component: Hero section
+      url: /docs/patterns/hero
+      status: Updated
+      notes: Added <a href="/docs/patterns/hero#blocks">blocks</a> successor to slots.
+    - component: Basic section
+      url: /docs/patterns/basic-section
+      status: Updated
+      notes: Added more aspect_ratio options to the image block. Introduced two new parameters, <code>is_cover</code> and <code>override_last_item_padding</code>.
 - version: 4.43.0
   features:
     - component: Icon
diff --git a/templates/_macros/vf_basic-section.jinja b/templates/_macros/vf_basic-section.jinja
index 772266035..0849c322c 100644
--- a/templates/_macros/vf_basic-section.jinja
+++ b/templates/_macros/vf_basic-section.jinja
@@ -6,7 +6,7 @@
 {% from "_macros/shared/vf_linked-logo-block.jinja" import vf_linked_logo_block %}
 {% from "_macros/shared/vf_logo-block.jinja" import vf_logo_block %}
 
-{% macro vf_basic_section_blocks(items=[]) %}
+{% macro vf_basic_section_blocks(items=[], override_last_item_padding=false) %}
   {%- for item in items -%}
     {%- set item_padding = (item.get("padding", "")) | trim -%}
     {%- if item_padding not in ["shallow"] -%}
@@ -19,7 +19,7 @@
     {%- endif -%}
 
     {#- Last item should not have any additional padding - the pattern itself already has bottom padding -#}
-    {%- if loop.last -%}
+    {%- if loop.last and not override_last_item_padding -%}
       {%- set item_classes = "" -%}
     {%- endif -%}
     <div{%- if item_classes | length > 0 %} class="{{ item_classes }}"{%- endif -%}>
@@ -41,22 +41,27 @@
 {%- endmacro -%}
 
 # image_config
-# - aspect_ratio: "16-9" | "3-2" | "" (default is "")
+# - aspect_ratio: "16-9" | "3-2" | "2-3", "cinematic" | "" (default is "")
 # - caption_html: The HTML content for the caption of the image (optional). Will be wrapped in <figcaption>, and the image and caption will be wrapped in a <figure>.
+# - is_highlighted: Whether to apply the "is-highlighted" class to the image container (default is true).
+# - is_cover: Whether to apply the "is-cover" class to the image container (default is false).
 # - attrs: A dictionary of attributes to apply to the image
 {% macro _basic_section_image(image_config={}) %}
   {%- set aspect_ratio = image_config.get("aspect_ratio", "") | trim -%}
-  {%- if aspect_ratio not in ["16-9", "3-2"] -%}
+  {%- if aspect_ratio not in ["16-9", "3-2", "2-3", "cinematic"] -%}
     {%- set aspect_ratio = "" -%}
   {%- endif -%}
 
   {%- set caption_html = image_config.get("caption_html", "") | trim -%}
   {%- set has_caption = caption_html | length > 0 -%}
 
+  {%- set is_highlighted = image_config.get("is_highlighted", true) -%}
+  {%- set is_cover = image_config.get("is_cover", false) -%}
+
   {%- if has_caption -%}
   <figure>
   {%- endif -%}
-  <div class="p-image-container{%- if aspect_ratio | length > 0 -%}--{{- aspect_ratio -}}{%- endif %} is-highlighted">
+  <div class="p-image-container{%- if aspect_ratio | length > 0 -%}--{{- aspect_ratio -}}{%- endif %}{%- if is_highlighted %} is-highlighted{% endif -%}{%- if is_cover %} is-cover{% endif -%}">
     <img class="p-image-container__image {{ image_config.get("attrs", {}).get("class", "") -}}"
       {%- for attr, value in image_config.get("attrs", {}).items() -%}
         {% if attr != "class" %}
@@ -238,6 +243,7 @@
   padding="default",
   is_split_on_medium=false,
   top_rule_variant="default",
+  override_last_item_padding=false,
   attrs={}
 ) -%}
 
@@ -280,7 +286,7 @@
       {%- if has_subtitle -%}
         <p class="p-heading--{{ subtitle_heading_level }}">{{- subtitle_text -}}</p>
       {%- endif -%}
-      {{- vf_basic_section_blocks(items=items) -}}
+      {{- vf_basic_section_blocks(items=items, override_last_item_padding=override_last_item_padding) -}}
     </div>
   </div>
 </section>
diff --git a/templates/_macros/vf_hero.jinja b/templates/_macros/vf_hero.jinja
index ecc97f1c0..556768bae 100644
--- a/templates/_macros/vf_hero.jinja
+++ b/templates/_macros/vf_hero.jinja
@@ -1,3 +1,6 @@
+{% from "_macros/shared/vf_cta-block.jinja" import vf_cta_block %}
+{% from "_macros/vf_basic-section.jinja" import vf_basic_section_blocks %}
+
 # Params
 # title_text: Hero title text (required)
 # subtitle_text: Hero subtitle text
@@ -5,28 +8,35 @@
 # is_split_on_medium: whether the layout is split on tablet in 50/50, 25/75, and 75/25 layouts.
 #   If false, the layout is stacked on tablet.
 #   If true, the layout is split on tablet.
-# Slots
-# description: paragraph-style content below the title and subtitle
-# cta: call-to-action block below the description
-# image: slot for image content
-# signpost_image: slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout.
 # display_blank_signpost_image_space: whether to indent the content for 25/75 layout on large screens.
+# blocks: list of content blocks for the hero section. Includes description, cta, image, and signpost_image blocks.
+# Slots
+# description (deprecated): paragraph-style content below the title and subtitle
+# cta (deprecated): call-to-action block below the description
+# image (deprecated): slot for image content
+# signpost_image (deprecated): slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout.
 {% macro vf_hero(
   title_text,
   subtitle_text='',
   layout="fallback",
   is_split_on_medium=false,
-  display_blank_signpost_image_space=false
+  display_blank_signpost_image_space=false,
+  blocks=[]
 ) -%}
+  {%- set description_blocks = blocks | selectattr("type", "equalto", "description") | list -%}
+  {%- set cta_block = blocks | selectattr("type", "equalto", "cta-block") | list | first | default(None) -%}
+  {%- set image_block = blocks | selectattr("type", "equalto", "image") | list | first | default(None) -%}
+  {%- set signpost_image_block = blocks | selectattr("type", "equalto", "signpost_image") | list | first | default(None) -%}
+
   {% set has_subtitle = subtitle_text|trim|length > 0 %}
   {% set description_content = caller('description') %}
-  {% set has_description = description_content|trim|length > 0 %}
+  {% set has_description = description_blocks | length > 0 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 %}
   {% set image_content = caller('image') %}
-  {% set has_image = image_content|trim|length > 0 %}
+  {% set has_image = image_block or image_content|trim|length > 0 %}
   {% set signpost_image_content = caller('signpost_image') %}
-  {% set has_signpost_image = signpost_image_content|trim|length > 0 or display_blank_signpost_image_space %}
+  {% set has_signpost_image = signpost_image_block or signpost_image_content|trim|length > 0 or display_blank_signpost_image_space %}
 
   {#- User can pass layout as "X-Y" or "X/Y" -#}
   {% set layout = layout | trim | replace('/', '-') %}
@@ -98,7 +108,9 @@
   {%- endmacro %}
 
   {%- macro _hero_cta_block() -%}
-    {% if has_cta -%}
+    {%- if cta_block -%}
+      {{- vf_basic_section_blocks(items=[cta_block], override_last_item_padding=true) -}}
+    {% elif has_cta -%}
       <div class="p-cta-block">
         {{ cta_content }}
       </div>
@@ -106,19 +118,35 @@
   {%- endmacro %}
 
   {%- macro _hero_description_block() -%}
-    {% if has_description %}
+    {%- if description_blocks | length > 0 -%}
+      {% for description_block in description_blocks %}
+        {{ vf_basic_section_blocks(items=[description_block], override_last_item_padding=true) }}
+      {% endfor %}
+    {% elif has_description %}
       <div class="p-section--shallow">
         {{ description_content }}
       </div>
     {% endif %}
   {%- endmacro %}
 
+  {%- macro _hero_image_block() -%}
+    {%- if image_block -%}
+      {{- vf_basic_section_blocks(items=[image_block], override_last_item_padding=true) -}}
+    {% elif has_image -%}
+      {{ image_content }}
+    {% endif %}
+  {%- endmacro %}
+
   {%- macro _hero_signpost_image_block() -%}
-    {% if layout == '25-75' and has_signpost_image -%}
-      <div class="p-section--shallow">
+    <div class="p-section--shallow">
+      {%- if signpost_image_block -%}
+        {% set _ = signpost_image_block.update(type="image") %}
+        {% set _ = signpost_image_block.item.attrs.update({"class": "u-no-margin"}) %}
+        {{- vf_basic_section_blocks(items=[signpost_image_block], override_last_item_padding=true) -}}
+      {% else -%}
         {{ signpost_image_content }}
-      </div>
-    {% endif %}
+      {% endif %}
+    </div>
   {%- endmacro %}
 
   <section class="p-section--hero">
@@ -140,7 +168,7 @@
         </div>
         {% if has_image -%}
           <div class="{{ col_classes[1] }}">
-            {{ image_content }}
+            {{ _hero_image_block() }}
           </div>
         {% endif -%}
       {% elif (has_full_width_image and not has_signpost_image) or is_50_50_no_image %}
@@ -156,8 +184,8 @@
           {{- _hero_description_block() -}}
           {{- _hero_cta_block() -}}
         </div>
-        {{ image_content -}}
-      {% elif has_signpost_image %}
+        {{ _hero_image_block() }}
+      {% elif has_signpost_image and layout == '25-75' %}
         {#- 25/75 Signpost layout -#}
         <div class="{{ col_classes[0] }}">
           {{ _hero_signpost_image_block() -}}
@@ -172,7 +200,7 @@
         </div>
         {% if has_image %}
           {#- Signpost with image is always full-width, so set it after the columns -#}
-          {{- image_content }}
+          {{- _hero_image_block() }}
         {% endif -%}
       {% else %}
         <div class="{{ col_classes[0] }}">
@@ -185,7 +213,7 @@
         </div>
         {% if has_image -%}
           <div class="{{ col_classes[1] }}">
-            {{ image_content }}
+            {{ _hero_image_block() }}
           </div>
         {% endif -%}
       {% endif -%}
diff --git a/templates/docs/examples/patterns/hero/cta-block.html b/templates/docs/examples/patterns/hero/cta-block.html
new file mode 100644
index 000000000..78f611feb
--- /dev/null
+++ b/templates/docs/examples/patterns/hero/cta-block.html
@@ -0,0 +1,42 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_hero.jinja" import vf_hero %}
+
+{% block title %}Hero | CTA block{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% set is_paper = true %}
+{% block content %}
+
+{% call(slot) vf_hero(
+  title_text='H1 - ideally one line, up to two',
+  subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
+  layout='50/50',
+  blocks=[
+    {
+      "type": "cta-block",
+      "item": {
+        "primary": {
+          "content_html": "Contact us",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Learn more &rsaquo;",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    }
+  ]
+) -%}
+    {%- if slot == 'description' -%}
+      <p>
+        Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side.
+      </p>
+    {%- endif -%}
+{% endcall -%}
+
+{% endblock %}
diff --git a/templates/docs/examples/patterns/hero/description-block.html b/templates/docs/examples/patterns/hero/description-block.html
new file mode 100644
index 000000000..cad16316f
--- /dev/null
+++ b/templates/docs/examples/patterns/hero/description-block.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_hero.jinja" import vf_hero %}
+
+{% block title %}Hero | Description block{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% set is_paper = true %}
+{% block content %}
+
+{% call(slot) vf_hero(
+  title_text='H1 - ideally one line, up to two',
+  subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
+  layout='50/50',
+  blocks=[
+    {
+      "type": "description",
+      "item": {
+        "type": "text",
+        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate."
+      }
+    }
+  ]
+) -%}
+{% endcall -%}
+
+{% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-50-50-full-width-image.html b/templates/docs/examples/patterns/hero/hero-50-50-full-width-image.html
index ef18d3fbf..4bbcddee9 100644
--- a/templates/docs/examples/patterns/hero/hero-50-50-full-width-image.html
+++ b/templates/docs/examples/patterns/hero/hero-50-50-full-width-image.html
@@ -10,23 +10,49 @@
 {% call(slot) vf_hero(
   title_text='H1 - ideally one line, up to two',
   subtitle_text='H2 placeholder - aim for one line, 2 is acceptable.',
-  layout='50/50-full-width-image'
+  layout='50/50-full-width-image',
+  blocks=[
+    {
+      "type": "description",
+      "padding": "shallow",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side."
+      }
+    },
+    {
+      "type": "cta-block",
+      "padding": "shallow",
+      "item": {
+        "primary": {
+          "content_html": "Learn more",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Contact us ›",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    },
+    {
+      "type": "image",
+      "item": {
+        "aspect_ratio": "cinematic",
+        "is_highlighted": false,
+        "is_cover": true,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg",
+          "alt": "alt-text"
+        }
+      }
+    },
+  ]
 ) -%}
-  {%- if slot == 'description' -%}
-    <p>
-      Generally, the height of the right hand side of a 50/50 split should contain more content than the left
-      hand side.
-    </p>
-  {%- endif -%}
-  {%- if slot == 'cta' -%}
-    <a href="#" class="p-button--positive">Learn more</a>
-    <a href="#">Contact us ›</a>
-  {%- endif -%}
-  {%- if slot == 'image' -%}
-    <div class="p-image-container--cinematic is-cover">
-      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
-    </div>
-  {% endif -%}
 {% endcall -%}
 
 {% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-50-50-no-image.html b/templates/docs/examples/patterns/hero/hero-50-50-no-image.html
index f6981107e..6ea0e5163 100644
--- a/templates/docs/examples/patterns/hero/hero-50-50-no-image.html
+++ b/templates/docs/examples/patterns/hero/hero-50-50-no-image.html
@@ -10,18 +10,37 @@
 {% call(slot) vf_hero(
   title_text='H1 - ideally one line, up to two',
   subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
-  layout='50/50'
+  layout='50/50',
+  blocks=[
+    {
+      "type": "description",
+      "padding": "shallow",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side."
+      }
+    },
+    {
+      "type": "cta-block",
+      "padding": "shallow",
+      "item": {
+        "primary": {
+          "content_html": "Learn more",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Contact us ›",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    },
+  ]
 ) -%}
-    {%- if slot == 'description' -%}
-      <p>
-        Generally, the height of the right hand side of a 50/50 split should contain more content than the left
-        hand side.
-      </p>
-    {%- endif -%}
-    {%- if slot == 'cta' -%}
-      <a href="#" class="p-button--positive">Learn more</a>
-      <a href="#">Contact us ›</a>
-    {%- endif -%}
 {% endcall -%}
 
 {% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html b/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html
index 27d483f23..4a7a289cb 100644
--- a/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html
+++ b/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html
@@ -11,23 +11,49 @@
   title_text='H1 - ideally one line, up to two',
   subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
   layout='50/50',
-  is_split_on_medium=true
+  is_split_on_medium=true,
+  blocks=[
+    {
+      "type": "description",
+      "padding": "shallow",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side."
+      }
+    },
+    {
+      "type": "cta-block",
+      "padding": "shallow",
+      "item": {
+        "primary": {
+          "content_html": "Learn more",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Contact us ›",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    },
+    {
+      "type": "image",
+      "item": {
+        "aspect_ratio": "3-2",
+        "is_highlighted": false,
+        "is_cover": true,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/cf1e2ddb-datacenter-wide-crop.jpeg",
+          "alt": "alt-text"
+        }
+      }
+    },
+  ]
 ) -%}
-    {%- if slot == 'description' -%}
-      <p>
-        Generally, the height of the right hand side of a 50/50 split should contain more content than the left
-        hand side.
-      </p>
-    {%- endif -%}
-    {%- if slot == 'cta' -%}
-      <a href="#" class="p-button--positive">Learn more</a>
-      <a href="#">Contact us ›</a>
-    {%- endif -%}
-    {%- if slot == 'image' -%}
-      <div class="p-image-container--3-2 is-cover">
-        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/cf1e2ddb-datacenter-wide-crop.jpeg" alt="">
-      </div>
-    {%- endif -%}
   {% endcall -%}
 
 {% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-50-50.html b/templates/docs/examples/patterns/hero/hero-50-50.html
index b80299440..7e62238a5 100644
--- a/templates/docs/examples/patterns/hero/hero-50-50.html
+++ b/templates/docs/examples/patterns/hero/hero-50-50.html
@@ -10,23 +10,49 @@
 {% call(slot) vf_hero(
   title_text='H1 - ideally one line, up to two',
   subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
-  layout='50/50'
+  layout='50/50',
+  blocks=[
+    {
+      "type": "description",
+      "padding": "shallow",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side."
+      }
+    },
+    {
+      "type": "cta-block",
+      "padding": "shallow",
+      "item": {
+        "primary": {
+          "content_html": "Learn more",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Contact us ›",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    },
+    {
+      "type": "image",
+      "item": {
+        "aspect_ratio": "3-2",
+        "is_highlighted": false,
+        "is_cover": true,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/cf1e2ddb-datacenter-wide-crop.jpeg",
+          "alt": "alt-text"
+        }
+      }
+    },
+  ]
 ) -%}
-    {%- if slot == 'description' -%}
-      <p>
-        Generally, the height of the right hand side of a 50/50 split should contain more content than the left
-        hand side.
-      </p>
-    {%- endif -%}
-    {%- if slot == 'cta' -%}
-      <a href="#" class="p-button--positive">Learn more</a>
-      <a href="#">Contact us ›</a>
-    {%- endif -%}
-    {%- if slot == 'image' -%}
-      <div class="p-image-container--3-2 is-cover">
-        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/cf1e2ddb-datacenter-wide-crop.jpeg" alt="">
-      </div>
-    {%- endif -%}
 {% endcall -%}
 
 {% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-75-25.html b/templates/docs/examples/patterns/hero/hero-75-25.html
index 04caa5430..68264f95e 100644
--- a/templates/docs/examples/patterns/hero/hero-75-25.html
+++ b/templates/docs/examples/patterns/hero/hero-75-25.html
@@ -10,22 +10,47 @@
   title_text='H1 - ideally one line, up to two',
   subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
   layout='75/25',
-  is_split_on_medium=true
+  is_split_on_medium=true,
+  blocks=[
+    {
+      "type": "description",
+      "padding": "shallow",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side."
+      }
+    },
+    {
+      "type": "cta-block",
+      "item": {
+        "primary": {
+          "content_html": "Learn more",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Contact us ›",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    },
+    {
+      "type": "image",
+      "item": {
+        "aspect_ratio": "2-3",
+        "is_highlighted": false,
+        "is_cover": true,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/6c909bd8-datacenter-tall.jpeg",
+          "alt": "alt-text"
+        }
+      }
+    },
+  ]
 ) -%}
-    {%- if slot == 'description' -%}
-      <p>
-        Generally, the height of the right hand side of a 50/50 split should contain more content than the left
-        hand side.
-      </p>
-    {%- endif -%}
-    {%- if slot == 'cta' -%}
-      <a href="#" class="p-button--positive">Learn more</a>
-      <a href="#">Contact us ›</a>
-    {%- endif -%}
-    {%- if slot == 'image' -%}
-      <div class="p-image-container--2-3 is-cover u-hide--small">
-        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/6c909bd8-datacenter-tall.jpeg" alt="">
-      </div>
-    {%- endif -%}
   {% endcall -%}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-fallback.html b/templates/docs/examples/patterns/hero/hero-fallback.html
index 35e92ce1e..fbadd7034 100644
--- a/templates/docs/examples/patterns/hero/hero-fallback.html
+++ b/templates/docs/examples/patterns/hero/hero-fallback.html
@@ -10,29 +10,51 @@
   title_text='H1 - ideally one line, up to two',
   subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
   layout='fallback',
-  is_split_on_medium=true
-) -%}
-    {%- if slot == 'description' -%}
-      <p>
-        Use this variant when there is a lot of content, so that it looks balanced with the image to the right. Works
+  is_split_on_medium=true,
+  blocks=[
+    {
+      "type": "description",
+      "padding": "shallow",
+      "item": {
+        "type": "html",
+        "content": "<p>Use this variant when there is a lot of content, so that it looks balanced with the image to the right. Works
         best when the image is in portrait format. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.
-      </p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate.
-      </p>
-    {%- endif -%}
-    {%- if slot == 'cta' -%}
-      <a href="#" class="p-button--positive">Learn more</a>
-      <a href="#">Contact us ›</a>
-    {%- endif -%}
-    {%- if slot == 'image' -%}
-      <div class="p-image-container--3-2 is-cover">
-        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/cf1e2ddb-datacenter-wide-crop.jpeg"
-             alt="">
-      </div>
-    {%- endif -%}
+        consequat. Duis aute irure dolor in reprehenderit in voluptate.</p>"
+      }
+    },
+    {
+      "type": "cta-block",
+      "item": {
+        "primary": {
+          "content_html": "Learn more",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Contact us ›",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    },
+    {
+      "type": "image",
+      "item": {
+        "aspect_ratio": "3-2",
+        "is_highlighted": false,
+        "is_cover": true,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/cf1e2ddb-datacenter-wide-crop.jpeg",
+          "alt": "alt-text"
+        }
+      }
+    },
+  ]
+) -%}
   {% endcall -%}
 {% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-signpost-full-width-image.html b/templates/docs/examples/patterns/hero/hero-signpost-full-width-image.html
index 720dc9ae8..c01714490 100644
--- a/templates/docs/examples/patterns/hero/hero-signpost-full-width-image.html
+++ b/templates/docs/examples/patterns/hero/hero-signpost-full-width-image.html
@@ -9,26 +9,59 @@
 {% call(slot) vf_hero(
   title_text='H1 - ideally one line, up to two',
   subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
-  layout='25/75'
+  layout='25/75',
+  blocks=[
+    {
+      "type": "description",
+      "padding": "shallow",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side."
+      }
+    },
+    {
+      "type": "cta-block",
+      "padding": "shallow",
+      "item": {
+        "primary": {
+          "content_html": "Learn more",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Contact us ›",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    },
+    {
+      "type": "signpost_image",
+      "item": {
+        "is_highlighted": false,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/fe20126d-RISC-V-logo.svg",
+          "alt": "alt-text"
+        }
+      }
+    },
+    {
+      "type": "image",
+      "item": {
+        "aspect_ratio": "cinematic",
+        "is_highlighted": false,
+        "is_cover": true,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg",
+          "alt": "alt-text"
+        }
+      }
+    },
+  ]
 ) -%}
-    {%- if slot == 'signpost_image' -%}
-      <img src="https://assets.ubuntu.com/v1/fe20126d-RISC-V-logo.svg" alt="">
-    {%- endif -%}
-    {%- if slot == 'description' -%}
-      <p>
-        Generally, the height of the right hand side of a 50/50 split should contain more content than the left
-        hand side.
-      </p>
-    {%- endif -%}
-    {%- if slot == 'cta' -%}
-      <a href="#" class="p-button--positive">Learn more</a>
-      <a href="#">Contact us ›</a>
-    {%- endif -%}
-    {%- if slot == 'image' -%}
-      <div class="p-image-container--cinematic is-cover">
-        <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
-      </div>
-    {%- endif -%}
 {% endcall -%}
 
 {% endblock %}
diff --git a/templates/docs/examples/patterns/hero/hero-signpost.html b/templates/docs/examples/patterns/hero/hero-signpost.html
index 9d70e52eb..aca9ceef5 100644
--- a/templates/docs/examples/patterns/hero/hero-signpost.html
+++ b/templates/docs/examples/patterns/hero/hero-signpost.html
@@ -9,21 +9,47 @@
 {% call(slot) vf_hero(
   title_text='H1 - ideally one line, up to two',
   subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph',
-  layout='25/75'
+  layout='25/75',
+  blocks=[
+    {
+      "type": "description",
+      "padding": "shallow",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side."
+      }
+    },
+    {
+      "type": "cta-block",
+      "padding": "shallow",
+      "item": {
+        "primary": {
+          "content_html": "Learn more",
+          "attrs": {
+            "href": "#"
+          }
+        },
+        "link": {
+          "content_html": "Contact us ›",
+          "attrs": {
+            "href": "#"
+          }
+        }
+      }
+    },
+    {
+      "type": "signpost_image",
+      "item": {
+        "is_highlighted": false,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/fe20126d-RISC-V-logo.svg",
+          "alt": "alt-text"
+        }
+      }
+    },
+  ]
 ) -%}
-  {%- if slot == 'signpost_image' -%}
-    <img src="https://assets.ubuntu.com/v1/fe20126d-RISC-V-logo.svg" alt="">
-  {%- endif -%}
-  {%- if slot == 'description' -%}
-    <p>
-      Generally, the height of the right hand side of a 50/50 split should contain more content than the left
-      hand side.
-    </p>
-  {%- endif -%}
-  {%- if slot == 'cta' -%}
-    <a href="#" class="p-button--positive">Learn more</a>
-    <a href="#">Contact us ›</a>
-  {%- endif -%}
 {%- endcall -%}
 
 {% endblock %}
diff --git a/templates/docs/examples/patterns/hero/image-block.html b/templates/docs/examples/patterns/hero/image-block.html
new file mode 100644
index 000000000..183f0f759
--- /dev/null
+++ b/templates/docs/examples/patterns/hero/image-block.html
@@ -0,0 +1,35 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_hero.jinja" import vf_hero %}
+
+{% block title %}Hero | Image block{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% set is_paper = true %}
+{% block content %}
+
+{% call(slot) vf_hero(
+  title_text='H1 - ideally one line, up to two',
+  layout='50/50',
+  blocks=[
+    {
+      "type": "description",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left hand side."
+      }
+    },
+    {
+      "type": "image",
+      "item": {
+        "aspect_ratio": "16-9",
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png",
+          "alt": "alt-text"
+        }
+      }
+    },
+  ]
+) -%}
+{% endcall -%}
+
+{% endblock %}
diff --git a/templates/docs/examples/patterns/hero/signpost-image-block.html b/templates/docs/examples/patterns/hero/signpost-image-block.html
new file mode 100644
index 000000000..bb2a9224b
--- /dev/null
+++ b/templates/docs/examples/patterns/hero/signpost-image-block.html
@@ -0,0 +1,35 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_hero.jinja" import vf_hero %}
+
+{% block title %}Hero | Image block{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% set is_paper = true %}
+{% block content %}
+
+{% call(slot) vf_hero(
+  title_text='H1 - ideally one line, up to two',
+  layout='25/75',
+  blocks=[
+    {
+      "type": "description",
+      "item": {
+        "type": "text",
+        "content": "Generally, the height of the right hand side of a 50/50 split should contain more content than the left hand side."
+      }
+    },
+    {
+      "type": "signpost_image",
+      "item": {
+        "is_highlighted": false,
+        "attrs": {
+          "src": "https://assets.ubuntu.com/v1/fe20126d-RISC-V-logo.svg",
+          "alt": "alt-text",
+        }
+      }
+    }
+  ]
+) -%}
+{% endcall -%}
+
+{% endblock %}
diff --git a/templates/docs/patterns/basic-section/index.md b/templates/docs/patterns/basic-section/index.md
index afa0f0e1b..a766740a4 100644
--- a/templates/docs/patterns/basic-section/index.md
+++ b/templates/docs/patterns/basic-section/index.md
@@ -96,6 +96,7 @@ By default, items have no additional padding, but you can set `padding: "shallow
 
 The last block will always have no additional padding, regardless of the item padding setting.
 This way, the [pattern padding](#pattern-level) is the only padding at the bottom of the pattern.
+This setting can be overridden by passing <code>override_last_item_padding=true</code> to the pattern.
 
 <div class="embedded-example"><a href="/docs/examples/patterns/basic-section/item-padding" class="js-example" data-lang="jinja">
 View example of the basic section pattern with item padding options
@@ -148,8 +149,10 @@ ratios</a> and a [caption](/docs/patterns/images#image-with-caption).
 {
   "type": "image",
   "item": {
-    "aspect_ratio": "16-9" | "3-2" | "",
+    "aspect_ratio": "16-9" | "3-2" | "2-3" | "cinematic" | "",
     "caption_html": "Optional caption with HTML",
+    "is_highlighted": "Optional boolean to enable/disable background highlighting. Default is true",
+    "is_cover": "Optional boolean to add 'is-cover' class to image container. Default is false",
     "attrs": {
       "src": "image-url",
       "alt": "alt-text"
@@ -158,8 +161,12 @@ ratios</a> and a [caption](/docs/patterns/images#image-with-caption).
 }
 ```
 
-- **`aspect_ratio`**: Optional aspect ratio constraint. Valid values: `"16-9"`, `"3-2"`, or empty string for default.
+- **`aspect_ratio`**: Optional aspect ratio constraint. Valid values: `"16-9"`, `"3-2"`, `"2-3"`, `"cinematic"`, or empty string for default.
 - **`caption_html`**: Optional HTML caption. If provided, the image and caption are wrapped in a `<figure>` element.
+- **`is_highlighted`**: Optional boolean which defaults to true. Wraps image in a <a href="/docs/patterns/images#highlighted-image">highlighted image
+  container</a>.
+- **`is_cover`**: Optional boolean which defaults to false. Wraps image in a <a href="/docs/patterns/images#cover-image">cover image
+  container</a>.
 - **`attrs`**: Dictionary of image attributes (src, alt, class, etc.). The `p-image-container__image` class is automatically applied. See [attribute forwarding docs](/docs/building-vanilla#attribute-forwarding) for more info.
 
 #### Videos
@@ -631,6 +638,23 @@ below.
           Attributes to apply to the basic section. See <a href="/docs/building-vanilla#attribute-forwarding">attribute forwarding docs</a> for more info.
         </td>
       </tr>
+      <tr>
+        <td>
+          <code>override_last_item_padding</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          <code>&lt;boolean&gt;</code>
+        </td>
+        <td>
+          <code>false</code>
+        </td>
+        <td>
+          The last block will always have no additional padding, regardless of the item padding setting. This setting can be overridden by passing <code>override_last_item_padding=true</code> to the pattern.
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>
diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md
index cfb9e31a0..25bee215e 100644
--- a/templates/docs/patterns/hero/index.md
+++ b/templates/docs/patterns/hero/index.md
@@ -13,7 +13,7 @@ Depending on the size and composition of your content, you can choose from a var
 
 - [50/50](#5050)
 - [50/50 with full-width image](#5050-with-full-width-image)
-- [50/50 with no image](#5050-with-no-image-new)
+- [50/50 with no image](#5050-with-no-image)
 - [25/75 Signpost](#2575-signpost)
 - [75/25](#7525)
 - [Fallback](#fallback)
@@ -65,7 +65,7 @@ This will make the image take up the full width of the hero.
 View example of the hero pattern in 50/50 split with a full-width image
 </a></div>
 
-### 50/50 with no image {{ status("new") }}
+### 50/50 with no image
 
 This layout positions the title in the left half of the hero, and the rest of the text content in the right half.
 
@@ -113,6 +113,148 @@ This places the title and subtitle in their own row above the rest of the hero c
 View example of the hero pattern in fallback configuration
 </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/hero/description-block" class="js-example" data-lang="jinja">
+View example of the Hero 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.
+
+It 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/hero/cta-block" class="js-example" data-lang="jinja">
+View example of the Hero section with CTA block
+</a></div>
+
+```json
+{
+  "type": "cta-block",
+  "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"
+      }
+    }
+  }
+}
+```
+
+- **`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.
+
+### Image
+
+Image block allows you to include an image within the section, and can have configurable aspect ratios and a caption.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/hero/image-block" class="js-example" data-lang="jinja">
+View example of the Hero section with image block
+</a></div>
+
+```json
+{
+  "type": "image",
+  "item": {
+    "aspect_ratio": "16-9" | "3-2" | "2-3" | "cinematic" | "",
+    "caption_html": "Optional caption with HTML",
+    "is_highlighted": "Optional boolean to enable/disable background highlighting. Default is true",
+    "is_cover": "Optional boolean to add 'is-cover' class to image container. Default is false",
+    "attrs": {
+      "src": "image-url",
+      "alt": "alt-text"
+    }
+  }
+}
+```
+
+- **`aspect_ratio`**: Optional aspect ratio constraint. Valid values: `"16-9"`, `"3-2"`, or empty string for default.
+- **`caption_html`**: Optional HTML caption. If provided, the image and caption are wrapped in a `<figure>` element.
+- **`is_highlighted`**: Optional boolean which defaults to true. Wraps image in a <a href="/docs/patterns/images#highlighted-image">highlighted image
+  container</a>.
+- **`is_cover`**: Optional boolean which defaults to false. Wraps image in a <a href="/docs/patterns/images#cover-image">cover image
+  container</a>.
+- **`attrs`**: Dictionary of image attributes (src, alt, class, etc.). The `p-image-container__image` class is automatically applied. See [attribute forwarding docs](/docs/building-vanilla#attribute-forwarding) for more info.
+
+### Signpost image
+
+Signpost image block allows you to include a signpost page, in a small column beside the primary hero content.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/hero/signpost-image-block" class="js-example" data-lang="jinja">
+View example of the Hero section with signpost image block
+</a></div>
+
+```json
+{
+  "type": "signpost_image",
+  "item": {
+    "aspect_ratio": "16-9" | "3-2" | "2-3" | "cinematic" | "",
+    "caption_html": "Optional caption with HTML",
+    "is_highlighted": "Optional boolean to enable/disable background highlighting. Default is true",
+    "is_cover": "Optional boolean to add 'is-cover' class to image container. Default is false",
+    "attrs": {
+      "src": "image-url",
+      "alt": "alt-text"
+    }
+  }
+}
+```
+
+- **`aspect_ratio`**: Optional aspect ratio constraint. Valid values: `"16-9"`, `"3-2"`, or empty string for default.
+- **`caption_html`**: Optional HTML caption. If provided, the image and caption are wrapped in a `<figure>` element.
+- **`is_highlighted`**: Optional boolean which defaults to true. Wraps image in a <a href="/docs/patterns/images#highlighted-image">highlighted image
+  container</a>.
+- **`is_cover`**: Optional boolean which defaults to false. Wraps image in a <a href="/docs/patterns/images#cover-image">cover image
+  container</a>.
+- **`attrs`**: Dictionary of image attributes (src, alt, class, etc.). The `p-image-container__image` class is automatically applied. See [attribute forwarding docs](/docs/building-vanilla#attribute-forwarding) for more info.
+
 ## Jinja Macro
 
 The `vf_hero` Jinja macro can be used to generate a hero pattern. The API for the macro is shown below.
@@ -227,6 +369,8 @@ The `vf_hero` Jinja macro can be used to generate a hero pattern. The API for th
 
 ### Slots
 
+Hero 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>
@@ -239,7 +383,7 @@ The `vf_hero` Jinja macro can be used to generate a hero pattern. The API for th
     <tbody>
       <tr>
         <td>
-          <code>description</code>
+          <code>description {{ status("deprecated") }}</code>
         </td>
         <td>
           No
@@ -250,7 +394,7 @@ The `vf_hero` Jinja macro can be used to generate a hero pattern. The API for th
       </tr>
       <tr>
         <td>
-          <code>cta</code>
+          <code>cta {{ status("deprecated") }}</code>
         </td>
         <td>
           Yes
@@ -262,7 +406,7 @@ The `vf_hero` Jinja macro can be used to generate a hero pattern. The API for th
       </tr>
       <tr>
         <td>
-          <code>image</code>
+          <code>image {{ status("deprecated") }}</code>
         </td>
         <td>
           Yes, when <code>layout='50/50-full-width-image'</code>
@@ -273,7 +417,7 @@ The `vf_hero` Jinja macro can be used to generate a hero pattern. The API for th
       </tr>
       <tr>
         <td>
-          <code>signpost_image</code>
+          <code>signpost_image {{ status("deprecated") }}</code>
         </td>
         <td>
           Yes, when <code>layout='25/75'</code>