diff --git a/releases.yml b/releases.yml
index 6a3c35fe1..081679ebd 100644
--- a/releases.yml
+++ b/releases.yml
@@ -1,5 +1,9 @@
 - version: 4.25.0
   features:
+    - component: Tiered list
+      url: /docs/patterns/tiered-list
+      status: Updated
+      notes: We've added support for <a href="/docs/patterns/tiered-list#with-media-new">embedding images or videos</a> to the tiered list pattern.
     - component: CTA Block
       url: /docs/patterns/cta-block
       status: Updated
diff --git a/requirements.txt b/requirements.txt
index 17816bef3..bdc51444a 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,6 +1,6 @@
 canonicalwebteam.flask-base==2.5.0
 canonicalwebteam.templatefinder==1.0.0
 canonicalwebteam.search==2.1.1
-canonicalwebteam.image-template==1.5.0
+canonicalwebteam.image-template==1.6.0
 mistune==0.8.4
 pyyaml==6.0.2
diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja
index c953afe95..33b776e8b 100644
--- a/templates/_macros/vf_tiered-list.jinja
+++ b/templates/_macros/vf_tiered-list.jinja
@@ -3,6 +3,10 @@
 #   desktop vs. 50/50 split between title/description
 # is_list_full_width_on_tablet: whether list title/description each have their
 #   own row on tablet vs. 50/50 split between title/description
+# is_media_full_width: whether the media is full width
+# media_placement: where the image is placed relative to the description. Options are "after_description" or "before_description".
+# img_attrs: attributes for the image element, e.g. src, alt, class
+# video_attrs: attributes for the video element, e.g. src, class
 # Slots
 # title: top-level title element
 # description: top-level description element
@@ -11,18 +15,90 @@
 # cta: CTA block element
 {% macro vf_tiered_list(
   is_description_full_width_on_desktop=true,
-  is_list_full_width_on_tablet=true) -%}
+  is_list_full_width_on_tablet=true,
+  is_media_full_width=false,
+  media_placement="after_description",
+  img_attrs={},
+  video_attrs={}
+  ) -%}
   {%- set title_content = caller('title') -%}
   {%- set description_content = caller('description') -%}
   {%- set has_description = description_content|trim|length > 0 -%}
   {%- set cta_content = caller('cta') -%}
   {%- set has_cta = cta_content|trim|length > 0 -%}
+  {%- set has_image = img_attrs['src']|trim|length > 0 -%}
+  {%- set has_video = video_attrs['src']|trim|length > 0 -%}
+  {%- set has_media = has_image or has_video -%}
+
+  {% if media_placement not in ["before_description", "after_description"] %}
+    {% set media_placement = "after_description" %}
+  {% endif %}
+
+  {% set image_aspect_ratio = "16-9" %}
+  {% if is_media_full_width and not is_video %}
+    {% set image_aspect_ratio = "cinematic" %}
+  {% endif %}
+
+  {% macro _wrapped_media() %}
+    {%- if has_media -%}
+      {%- if has_video -%}
+        <div class="p-section--shallow">
+          {#- u-embedded-media applies 16:9 aspect ratio via padding. -#}
+          <div class="u-embedded-media">
+            <iframe class="u-embedded-media__element {{ video_attrs['class'] }}"
+            {% for attr, value in video_attrs.items() %}
+              {% if attr != "class" %}
+                {{- attr }}="{{ value }}"
+              {% endif %}
+            {% endfor %}
+            ></iframe>
+          </div>
+        </div>
+      {%- elif has_image -%}
+        <div class="p-section--shallow">
+          <div class="p-image-container--{{ image_aspect_ratio }} is-cover">
+            <img
+              {#- Forward classes from the img_attrs. This is optional, on a per-pattern basis. #}
+              class="p-image-container__image {{ img_attrs['class'] }}"
+            {% for attr, value in img_attrs.items() %}
+              {% if attr != "class" %}
+                {{- attr }}="{{ value }}"
+              {% endif %}
+            {% endfor %}
+            >
+          </div>
+        </div>
+      {%- endif -%}
+    {%- endif -%}
+  {% endmacro %}
+
+  {% macro _full_width_media_row() %}
+    {%- if has_media and is_media_full_width -%}
+      <div class="row">
+        <div class="col">
+          {{- _wrapped_media() -}}
+        </div>
+      </div>
+    {%- endif -%}
+  {% endmacro %}
+
+  {%- if title_content|trim|length == 0 -%}
+    {%- set title_content = "<h2>Tiered List</h2>" -%}
+  {%- endif -%}
+
+  {%- if description_content|trim|length == 0 -%}
+    {%- set description_content = "<p>This is a tiered list.</p>" -%}
+  {%- endif -%}
+
+  {%- if cta_content|trim|length == 0 -%}
+    {%- set cta_content = "<p>No CTA provided.</p>" -%}
+  {%- endif -%}
 
   <div class="p-section u-fixed-width">
     <hr class="p-rule">
 
-    {% if has_description == true -%}
-      {%- if is_description_full_width_on_desktop == true -%}
+    {% if has_description -%}
+      {%- if is_description_full_width_on_desktop -%}
         <div class="u-fixed-width">
           <div class="p-section--shallow">
             {{ title_content }}
@@ -31,10 +107,18 @@
 
         <div class="row">
           <div class="col-6 col-start-large-7">
+            {#- Non-full-width media before description -#}
+            {% if has_media and media_placement == "before_description" and not is_media_full_width %}
+              {{- _wrapped_media() -}}
+            {% endif %}
             {{ description_content }}
+            {#- Non-full-width media after description -#}
+            {% if has_media and media_placement == "after_description" and not is_media_full_width %}
+              {{- _wrapped_media() -}}
+            {% endif %}
           </div>
         </div>
-      {%- else -%}
+      {%- else -%} {#- (50/50 desktop layout) -#}
         <div class="row">
           <div class="col-6">
             <div class="p-section--shallow">
@@ -43,18 +127,39 @@
           </div>
 
           <div class="col-6">
+            {#- Non-full-width media before description -#}
+            {%- if has_media and media_placement == "before_description" and not is_media_full_width -%}
+              {{- _wrapped_media() -}}
+            {%- endif -%}
             {{ description_content }}
+            {#- Non-full-width media after description -#}
+            {%- if has_media and media_placement == "after_description" and not is_media_full_width -%}
+              {{- _wrapped_media() -}}
+            {%- endif -%}
           </div>
         </div>
       {%- endif -%}
-    {%- else -%}
-      <div class="u-fixed-width">
-        <div class="p-section--shallow">
-          {{ title_content }}
+    {%- else -%} {#- No description (has_description is false) -#}
+      <div class="row">
+        {#- No description; the non-full-width media goes directly adjacent to the title -#}
+        <div class="{% if not has_media or is_media_full_width %}col{% else %}col-6{% endif %}">
+          <div class="p-section--shallow">
+            {{ title_content }}
+          </div>
         </div>
+        {% if has_media and not is_media_full_width %}
+          <div class="col-6 col-start-large-7">
+            {{- _wrapped_media() -}}
+          </div>
+        {% endif %}
       </div>
     {%- endif %}
 
+    {#- Always render full-width media in its own row, after the main title/description/no-description blocks -#}
+    {% if has_media and is_media_full_width %}
+      {{- _full_width_media_row() -}}
+    {% endif %}
+
     {#-
       When there is a CTA, we use shallow spacing to space the list away from the CTA.
       When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space.
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html
new file mode 100644
index 000000000..f3b6ef805
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html
@@ -0,0 +1,93 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on desktop with description CTA / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+
+    <!-- Optional CTA block -->
+    <div class="p-cta-block">
+      <a href="#">Link to blog post &rsaquo;</a>
+    </div>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html
new file mode 100644
index 000000000..03db05617
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html
@@ -0,0 +1,93 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on desktop with description CTA / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+
+    <!-- Optional CTA block -->
+    <div class="p-cta-block">
+      <a href="#">Link to blog post &rsaquo;</a>
+    </div>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html
new file mode 100644
index 000000000..15a341265
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html
@@ -0,0 +1,96 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on desktop with description CTA / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+
+    <!-- Optional CTA block -->
+    <div class="p-cta-block">
+      <a href="#">Link to blog post &rsaquo;</a>
+    </div>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html
new file mode 100644
index 000000000..01a1f1a04
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html
@@ -0,0 +1,96 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on desktop with description CTA / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+
+    <!-- Optional CTA block -->
+    <div class="p-cta-block">
+      <a href="#">Link to blog post &rsaquo;</a>
+    </div>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html
new file mode 100644
index 000000000..5124beee4
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with default width image / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html
new file mode 100644
index 000000000..5d9a0fdc6
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with default width image / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html
new file mode 100644
index 000000000..d21070424
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html
@@ -0,0 +1,90 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with default width image / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html
new file mode 100644
index 000000000..a8eed15c5
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html
@@ -0,0 +1,92 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with default width image / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true, is_media_full_width=true, img_attrs=image(
+url="https://assets.ubuntu.com/v1/3f63a18c-data-center.png",
+alt="",
+width="2464",
+height="1028",
+hi_def=True,
+loading="auto|lazy",
+output_mode="attrs"
+)) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html
new file mode 100644
index 000000000..add23bd6a
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on tablet with description / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=false, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html
new file mode 100644
index 000000000..9ab6e0e9b
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on tablet with description / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=false) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html
new file mode 100644
index 000000000..379f12fd9
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html
@@ -0,0 +1,90 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on tablet with description / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=false, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html
new file mode 100644
index 000000000..17f964065
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html
@@ -0,0 +1,90 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on tablet with description / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=false, is_media_full_width=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html
new file mode 100644
index 000000000..8534f66eb
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html
@@ -0,0 +1,81 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on tablet without description / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html
new file mode 100644
index 000000000..a30900861
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html
@@ -0,0 +1,81 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on tablet without description / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html
new file mode 100644
index 000000000..8fb4ee137
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html
@@ -0,0 +1,83 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on tablet without description / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html
new file mode 100644
index 000000000..90dbb512e
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html
@@ -0,0 +1,83 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 on tablet without description / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=false, is_media_full_width=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html
new file mode 100644
index 000000000..697284fd2
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with description / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html
new file mode 100644
index 000000000..246fd5497
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with description / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html
new file mode 100644
index 000000000..7680dca0b
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html
@@ -0,0 +1,90 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with description / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html
new file mode 100644
index 000000000..0e286f8f0
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html
@@ -0,0 +1,90 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with description / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, is_media_full_width=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html
new file mode 100644
index 000000000..9f895e3c3
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html
@@ -0,0 +1,83 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with description / Without CTA / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html
new file mode 100644
index 000000000..52c912004
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html
@@ -0,0 +1,83 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with description / Without CTA / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html
new file mode 100644
index 000000000..a693dfc57
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html
@@ -0,0 +1,85 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with description / Without CTA / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html
new file mode 100644
index 000000000..673887a67
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html
@@ -0,0 +1,85 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / 50/50 with description / Without CTA / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=false, is_media_full_width=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/combined.html b/templates/docs/examples/patterns/tiered-list/combined.html
index de190205c..8f238e654 100644
--- a/templates/docs/examples/patterns/tiered-list/combined.html
+++ b/templates/docs/examples/patterns/tiered-list/combined.html
@@ -15,5 +15,44 @@
 <section>{% include 'docs/examples/patterns/tiered-list/full-width-without-description.html' %}</section>
 <section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description.html' %}</section>
 <section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta.html' %}</section>
+
+{# All new and renamed files from git status (using their NEW names) #}
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-cta-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-desktop-with-description-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-tablet-without-description-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-with-description-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-with-description-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/50-50-with-description-without-cta-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html' %}</section>
+<section>{% include 'docs/examples/patterns/tiered-list/video.html' %}</section>
 {% endwith %}
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html
new file mode 100644
index 000000000..a58bcdfbb
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image-before-description.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width with description / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html
new file mode 100644
index 000000000..bb4d8d740
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-default-width-image.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width with description / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html
new file mode 100644
index 000000000..dbba26f6a
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image-before-description.html
@@ -0,0 +1,90 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width with description / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html
new file mode 100644
index 000000000..a90857748
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-with-full-width-image.html
@@ -0,0 +1,90 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width with description / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html
new file mode 100644
index 000000000..f08825cf6
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image-before-description.html
@@ -0,0 +1,83 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width with description / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html
new file mode 100644
index 000000000..e8c39305d
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-default-width-image.html
@@ -0,0 +1,83 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width with description / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html
new file mode 100644
index 000000000..580d8e0ee
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image-before-description.html
@@ -0,0 +1,85 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width with description / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html
new file mode 100644
index 000000000..b3a9ca999
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-with-description-without-cta-with-full-width-image.html
@@ -0,0 +1,85 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width with description / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, is_media_full_width=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html
new file mode 100644
index 000000000..bb091993e
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image-before-description.html
@@ -0,0 +1,81 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width without description / With default width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html
new file mode 100644
index 000000000..c09764bee
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-default-width-image.html
@@ -0,0 +1,81 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width without description / With default width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/98b645b4-assessment.png" width="800" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html
new file mode 100644
index 000000000..e53ea09fb
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image-before-description.html
@@ -0,0 +1,83 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width without description / With full width image before description{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=true, is_media_full_width=true, media_placement="before_description") -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html
new file mode 100644
index 000000000..629737589
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/full-width-without-description-with-full-width-image.html
@@ -0,0 +1,83 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / Full-width without description / With full width image{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_list_full_width_on_tablet=true, is_media_full_width=true) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == "image" -%}
+      <img class="p-image-container__image"
+           src="https://assets.ubuntu.com/v1/3f63a18c-data-center.png"
+           width="2464" height="1028" alt="">
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/examples/patterns/tiered-list/video.html b/templates/docs/examples/patterns/tiered-list/video.html
new file mode 100644
index 000000000..ea0cdc303
--- /dev/null
+++ b/templates/docs/examples/patterns/tiered-list/video.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
+
+{% block title %}Tiered list / With video{% endblock %}
+
+{% block standalone_css %}patterns_all{% endblock %}
+
+{% block content %}
+{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=true, is_list_full_width_on_tablet=true, video_attrs={"src": "https://www.youtube.com/embed/TShKZLeZzWE", "allowfullscreen": ""}) -%}
+  {%- if slot == 'title' -%}
+    <h2>H2 - up to two lines; ideally one.</h2>
+  {%- endif -%}
+
+  {%- if slot == 'video' -%}
+    <iframe title="Title of the media object" class="u-embedded-media__element" src="https://www.youtube.com/embed/PZdJiH0bUxY?si=zepeZVY1SXWr-KJo" allowfullscreen=""></iframe>
+  {%- endif -%}
+
+  {%- if slot == 'description' -%}
+    <p>A <a href="#">private cloud</a> provides organisations with on-demand
+    compute, storage and other resources that can be accessed over the network
+    and that are reserved exclusively for them - either in their own data centre
+    or via a 3rd party.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_1' -%}
+    <h3 class="p-heading--5">Rich portfolio of products</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_1' -%}
+    <p>Resell the full range of Canonical’s portfolio of private and public
+    cloud products: OpenStack, Kubernetes, IoT, support, security and
+    compliance for Ubuntu.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_2' -%}
+    <h3 class="p-heading--5">Sales enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_2' -%}
+    <p>Canonical can help train your field sales and presales teams and
+    provide you with sales collateral and permission to use the Canonical
+    and Ubuntu trademarks in your own materials.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_3' -%}
+    <h3 class="p-heading--5">Access to Canonical partner portal</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_3' -%}
+    <p>We host a partner portal with product and solutions collaterals, agreed
+    pricing, incentives and a deal registration system.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_4' -%}
+    <h3 class="p-heading--5">Training and certification</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_4' -%}
+    <p>Gain access to technology that is the foundation for digital
+    transformation and expand your business through marketing support and
+    alignment with a trusted brand</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_5' -%}
+    <h3 class="p-heading--5">Technical enablement</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_5' -%}
+    <p>We provide in-depth technical training for your customer engineering
+    teams with access to technical resources for your labs and customer
+    engagements.</p>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_title_6' -%}
+    <h3 class="p-heading--5">Go to market with Canonical</h3>
+  {%- endif -%}
+
+  {%- if slot == 'list_item_description_6' -%}
+    <p>Working with our dedicated partner team, get new joint marketing
+    opportunities and lead generation.</p>
+  {%- endif -%}
+
+  {%- if slot == 'cta' -%}
+    <a href="#" class="p-button">Learn more</a>
+    <a href="#">Contact us &rsaquo;</a>
+  {%- endif -%}
+{%- endcall -%}
+{% endblock %}
diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md
index 26792c6e0..5eb2e53a2 100644
--- a/templates/docs/patterns/tiered-list/index.md
+++ b/templates/docs/patterns/tiered-list/index.md
@@ -20,6 +20,7 @@ from a variety of tiered list layouts:
 - [50/50 with description](#5050-with-description)
 - [Full-width without description](#full-width-without-description)
 - [Full-width with description](#full-width-with-description)
+- [With media](#with-media-new)
 
 The tiered list pattern is composed of the following elements:
 
@@ -27,6 +28,7 @@ The tiered list pattern is composed of the following elements:
 | --------------------- | ----------------------------------------------------------------------------------- |
 | Title (**required**)  | <code>h2</code> title text                                                          |
 | Description           | <code>p</code> description text with optional [CTA block](/docs/patterns/cta-block) |
+| Media (optional)      | Image or video to show near description                                             |
 | List item title       | Title text/content                                                                  |
 | List item description | Description text/content with optional [CTA block](/docs/patterns/cta-block)        |
 | Call to action block  | [CTA block](/docs/patterns/cta-block) beneath the list                              |
@@ -89,6 +91,85 @@ respectively.
 View example of the tiered list pattern
 </a></div>
 
+## With media {{ status('new') }}
+
+You can embed an [image](#image) or a [video](#video) near the description.
+
+### Image
+
+You can embed a [default width](#default-width-image) or [full width](#full-width-image) image near the description.
+The image may be positioned before or after the description, depending on the variant you choose.
+The aspect ratio of the image depends on the variant you choose, and it will be wrapped in an [image container](/docs/patterns/images#image-container-with-aspect-ratio) to ensure it maintains the correct aspect ratio.
+
+**Always apply the `p-image-container__image` class to your image** to ensure the image is styled correctly.
+
+#### Default width image
+
+This variant contains a top-level description, and its title, description, and
+child list are presented full-width on desktop and tablet screen sizes
+respectively. Additionally, this variant features a default width image positioned beneath the title and description.
+
+When using the default width image, the image will use half of the page width on large screens.
+We recommend following these guidelines when using the default width image:
+
+- Use an image with a width sufficient to fill the page width on all screens.
+- Use an image with an aspect ratio of approximately 16:9 to avoid using too much vertical space.
+  - The Jinja macro will wrap your image in
+    a [16:9 image container](/docs/patterns/images#image-container-with-aspect-ratio) and make your
+    image [fill its contents](/docs/patterns/images#cover-image). Use an image with approximately a 16:9 aspect ratio,
+    otherwise some of your image contents may be cropped at some screen sizes.
+
+The following example demonstrates a good usage of the default width image variant:
+
+<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image" class="js-example" data-lang="jinja">
+View example of the tiered list pattern
+</a></div>
+
+#### Full width image
+
+This variant contains a top-level description, and its title, description, and
+child list are presented full-width on desktop and tablet screen sizes
+respectively. Additionally, this variant features a full width image positioned beneath the title and description.
+
+When using the full width image, the image will use the full width of the page on all screens.
+We recommend following these guidelines when using the full width image:
+
+- Use an image with a width sufficient to fill the page width on all screens.
+- Use an image with an aspect ratio of approximately 2.4:1 to avoid using too much vertical space.
+  - The Jinja macro will wrap your image in
+    a [2.4:1 ("cinematic") image container](/docs/patterns/images#image-container-with-aspect-ratio) and make your
+    image [fill its contents](/docs/patterns/images#cover-image). Use an image with approximately a 2.4:1 aspect
+    ratio, otherwise some of your image contents may be cropped at some screen sizes.
+
+The following example demonstrates a good usage of the full width image variant:
+
+<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-full-width-image" class="js-example" data-lang="jinja">
+View example of the tiered list pattern
+</a></div>
+
+### Variable media placement
+
+By default, the media is displayed after the description, but you can choose whether it should be displayed before or after the description.
+To do this, set the `media_placement` parameter in the Jinja macro to either `before_description` or `after_description`.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/50-50-tablet-with-description-with-default-width-image-before-description" class="js-example" data-lang="jinja">
+View example of the tiered list pattern
+</a></div>
+
+### Video
+
+You may also use this variant to embed a video. Videos are positioned exactly the same as images, but they always have a
+16:9 aspect ratio.
+
+When embedding a video with the Jinja macro, follow the following guidelines:
+
+- Use the `video` slot instead of the `image` slot.
+- Apply the `u-embedded-media__element` class, which is provided by the [embedded media utility](/docs/utilities/embedded-media).
+
+<div class="embedded-example"><a href="/docs/examples/patterns/tiered-list/video/" class="js-example" data-lang="jinja">
+View example of the tiered list pattern
+</a></div>
+
 ## Additional CTA options
 
 In addition to the CTA block placed below the list, you may also add CTA blocks
@@ -155,6 +236,26 @@ The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern.
           Whether the list element should be full-width on tablet
         </td>
       </tr>
+      <tr>
+        <td>
+          <code>is_media_full_width</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          <code>boolean</code>
+        </td>
+        <td>
+          <code>false</code>
+        </td>
+        <td>
+          Whether the media should be full-width and displayed in its own row.<br/>
+          If the media is a full-width image, a <a href="/docs/patterns/images#image-container-with-aspect-ratio">cinematic (2.4:1 aspect ratio) image container</a> will wrap your image.<br/>
+          If the media is a default-width image, a <a href="/docs/patterns/images#image-container-with-aspect-ratio">16:9 image container</a> will wrap your image.<br/>
+          If you use the <code>video</code> slot, this parameter will affect the positioning of the video, but will not change its aspect ratio. Videos are always 16:9.
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>
@@ -182,6 +283,32 @@ The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern.
           Title sentence displayed at the top of the pattern
         </td>
       </tr>
+      <tr>
+        <td>
+          <code>image</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          Image to display near the description.<br/>
+          Must have the class <code><a href="/docs/patterns/images">p-image-container__image</a></code>.<br/>
+          If the <code>video</code> slot is used, this slot will be ignored.
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <code>video</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          Video to display near the description.<br/>
+          Must have the class <code><a href="/docs/utilities/embedded-media">u-embedded-media__element</a></code>.<br/>
+          Takes precedence over the <code>image</code> slot, so if both are used, the <code>video</code> will be displayed instead of the <code>image</code>.
+        </td>
+      </tr>
       <tr>
         <td>
           <code>description</code>