vanilla-framework 4.37.2 → 4.39.0

package/templates/_macros/vf_basic-section.jinja

@@ -1,23 +1,45 @@
 {% from "_macros/shared/vf_dedent.jinja" import vf_dedent %}
 {% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}
+{% from "_macros/shared/vf_cta-block.jinja" import vf_cta_block %}
+{% from "_macros/shared/vf_description-block.jinja" import vf_description_block %}
 {% from "_macros/vf_linked-logo-section.jinja" import vf_linked_logo_section %}
+{% from "_macros/shared/vf_linked-logo-block.jinja" import vf_linked_logo_block %}
+{% from "_macros/shared/vf_logo-block.jinja" import vf_logo_block %}
+
+{% macro vf_basic_section_blocks(items=[]) %}
+  {%- for item in items -%}
+    {%- set item_padding = (item.get("padding", "")) | trim -%}
+    {%- if item_padding not in ["shallow"] -%}
+      {%- set item_padding="" -%}
+    {%- endif -%}
 
-# description_config
-# - type: "text" | "html" (default is "text")
-# - content: The content of the description. Could be plain text (if type is "text") or HTML (if type is "html").
-{% macro _basic_section_description(description_config={}) %}
-  {%- set type = (description_config.get("type", "text")) | trim -%}
-  {%- if type not in ["text", "html"] -%}
-    {%- set type = "text" -%}
-  {%- endif -%}
+    {%- set item_classes = "" -%}
+    {%- if item_padding | length > 0 -%}
+      {%- set item_classes = "p-section--" + item_padding -%}
+    {%- endif -%}
 
-  {%- if type == "text" -%}
-    <p>{{- description_config.get("content", "") -}}</p>
-  {%- elif type == "html" -%}
-    {{- description_config.get("content", "") | safe -}}
-  {%- endif -%}
+    {#- Last item should not have any additional padding - the pattern itself already has bottom padding -#}
+    {%- if loop.last -%}
+      {%- set item_classes = "" -%}
+    {%- endif -%}
+    <div{%- if item_classes | length > 0 %} class="{{ item_classes }}"{%- endif -%}>
+      {{- basic_section_item(item) -}}
+    </div>
+  {%- endfor -%}
 {% endmacro %}
 
+{#-
+    This helper macro used to entirely implement the description block for this pattern.
+    The description block has since been upstreamed to `templates/_macros/shared/vf_description-block.jinja`.
+    Now, this helper serves as an adapter between the established API of the basic section and the description block.
+-#}
+{%-macro _basic_section_description(description_config={}) -%}
+    {{- vf_description_block(
+        type=description_config.get("type"),
+        content=description_config.get("content")
+    ) -}}
+{%- endmacro -%}
+
 # image_config
 # - aspect_ratio: "16-9" | "3-2" | "" (default is "")
 # - caption_html: The HTML content for the caption of the image (optional). Will be wrapped in <figcaption>, and the image and caption will be wrapped in a <figure>.
@@ -145,110 +167,17 @@
   </pre>
 {% endmacro %}
 
-# logo_block_config
-# - logos: A list of logos to be displayed in the section.
-# - - attrs: A dictionary of attributes to apply to the logo
-# - - is_fixed_width: Boolean to indicate if the logo should be wrapped in a fixed-width container (default is true).
-# - - has_line_break_after: Boolean to indicate if a line break should be included after the logo (default is false). This will be hidden on small screens.
-#       See https://vanillaframework.io/docs/patterns/logo-section#line-breaks
-{% macro _basic_section_logo_block(logo_block_config={}) %}
-  {%- set is_fixed_width = logo_block_config.get("is_fixed_width", true) != false -%}
-  {%- if is_fixed_width -%}<div class="u-fixed-width">{%- endif -%}
-    <div class="p-logo-section">
-      {%- for logo in logo_block_config.get("logos", []) -%}
-        <div class="p-logo-section__item">
-          <img class="p-logo-section__logo {{ logo.get("attrs", {}).get("class", "") -}}"
-            {%- for attr, value in logo.get("attrs", {}).items() -%}
-              {% if attr != "class" %}
-                {{ attr }}="{{ value }}"
-              {%- endif -%}
-            {%- endfor -%}
-          />
-          {%- if logo.get("has_line_break_after", false) -%}
-            <br class="u-hide--small">
-          {%- endif -%}
-        </div>
-      {%- endfor -%}
-    </div>
-  {%- if is_fixed_width -%}</div>{%- endif -%}
-{% endmacro %}
-
-# linked_logo_block_config
-#   - links (array) (required) : Array of links, each including 'href', 'label', 'text', and 'image_attrs'
-{% macro _basic_section_linked_logo_block(linked_logo_block_config={}) %}
-  {{- vf_linked_logo_section(
-    links=linked_logo_block_config.get("links", []),
-    top_rule_variant="none",
-    padding="none"
-  ) -}}
-{% endmacro %}
-
-# content_html: The inner HTML for the call-to-action button.
-# button_type: "primary" | "secondary" (default is "primary")
-# attrs: A dictionary of attributes to apply to the button or link.
-{% macro _cta_button(content_html, button_type="", attrs={}) %}
-  {%- set cta_element_tag = "button" -%}
-  {%- if "href" in attrs and attrs.get("href", "") | length > 0 -%}
-    {%- set cta_element_tag = "a" -%}
-  {%- endif -%}
-
-  {%- if button_type not in ["primary", "secondary"] -%}
-    {%- set button_type = "" -%}
-  {%- endif -%}
-
-  {%- set cta_class = "" -%}
-  {%- if button_type == "primary" -%}
-    {%- set cta_class = "p-button--positive" -%}
-  {%- elif button_type == "secondary" -%}
-    {%- set cta_class = "p-button" -%}
-  {%- endif -%}
-
-  <{{ cta_element_tag }} class="{{ cta_class }} {{ attrs.get("class", "") }}"
-    {%- for attr, value in attrs.items() -%}
-      {% if attr != "class" %}
-        {{ attr }}="{{ value }}"
-      {%- endif -%}
-    {%- endfor -%}
-  >
-    {{- content_html | safe -}}
-  </{{ cta_element_tag }}>
-{% endmacro %}
-
-# cta_block_config
-# - primary
-#  - content_html: The inner HTML for the primary call-to-action button.
-#  - attrs: A dictionary of attributes to apply to the primary button.
-# - secondaries (generally, we recommend using 2):
-#  - content_html: The inner HTML for the secondary call-to-action button.
-#  - attrs: A dictionary of attributes to apply to the secondary button.
-# - link
-#  - content_html: The inner HTML for the link.
-#  - attrs: A dictionary of attributes to apply to the link.
+{#-
+    This helper macro used to entirely implement the cta block for this pattern.
+    The CTA block has since been upstreamed to `templates/_macros/shared/vf_cta-block.jinja`.
+    Now, this helper serves as an adapter between the established API of the basic section and the CTA block.
+ #}
 {% macro _basic_section_cta_block(cta_block_config={}) %}
-  <div class="p-cta-block u-no-padding--bottom">
-    {%- if "primary" in cta_block_config %}
-      {{ _cta_button(
-        content_html=cta_block_config["primary"].get("content_html", ""),
-        attrs=cta_block_config["primary"].get("attrs", {}),
-        button_type="primary"
-      ) }}
-    {%- endif -%}
-    {%- if "secondaries" in cta_block_config %}
-      {%- for secondary in cta_block_config["secondaries"] -%}
-        {{ _cta_button(
-          content_html=secondary.get("content_html", ""),
-          attrs=secondary.get("attrs", {}),
-          button_type="secondary"
-        ) }}
-      {%- endfor -%}
-    {%- endif -%}
-    {%- if "link" in cta_block_config %}
-      {{ _cta_button(
-        content_html=cta_block_config["link"].get("content_html", ""),
-        attrs=cta_block_config["link"].get("attrs", {})
-      ) }}
-    {%- endif -%}
-  </div>
+  {{- vf_cta_block(
+    primary=cta_block_config.get("primary"),
+    secondaries=cta_block_config.get("secondaries"),
+    link=cta_block_config.get("link")
+  ) -}}
 {% endmacro %}
 
 # item_config
@@ -268,9 +197,9 @@
   {%- elif type == "code-block" -%}
     {{- _basic_section_code_block(item_config.get("item", {})) -}}
   {%- elif type =="logo-block" -%}
-    {{- _basic_section_logo_block(item_config.get("item", {})) -}}
+    {{- vf_logo_block(item_config.get("item", {})) -}}
   {%- elif type == "linked-logo-block" -%}
-    {{- _basic_section_linked_logo_block(item_config.get("item", {})) -}}
+    {{- vf_linked_logo_block(item_config.get("item", {})) -}}
   {%- elif type == "cta-block" -%}
     {{- _basic_section_cta_block(item_config.get("item", {})) -}}
   {%- elif type == "notification" -%}
@@ -300,6 +229,7 @@
 # padding: Type of padding to apply to the pattern - "deep", "shallow", "default" (default is "default").
 # is_split_on_medium: Boolean to indicate if the section should be split on medium screens (default is false).
 # top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" (default is "default").
+# attrs: A dictionary of attributes to apply to the section element.
 {% macro vf_basic_section(
   title={},
   label_text="",
@@ -307,7 +237,8 @@
   items=[],
   padding="default",
   is_split_on_medium=false,
-  top_rule_variant="default"
+  top_rule_variant="default",
+  attrs={}
 ) -%}
 
   {%- set padding = padding | trim -%}
@@ -330,7 +261,13 @@
   {%- set has_label = label_text|length > 0 -%}
   {%- set has_subtitle = subtitle_text|length > 0 -%}
 
-<section class="{{ padding_classes }}">
+<section class="{{ padding_classes }} {{ attrs.get("class", "") -}}" 
+  {%- for attr, value in attrs.items() -%}
+    {% if attr != "class" %}
+      {{ attr }}="{{ value }}"
+    {%- endif -%}
+  {%- endfor -%}
+>
   <div class="grid-row--50-50{%- if not is_split_on_medium -%}-on-large{%- endif -%}">
     {{ vf_section_top_rule(top_rule_variant) }}
     <div class="grid-col">
@@ -343,25 +280,7 @@
       {%- if has_subtitle -%}
         <p class="p-heading--{{ subtitle_heading_level }}">{{- subtitle_text -}}</p>
       {%- endif -%}
-      {%- for item in items -%}
-        {%- set item_padding = (item.get("padding", "")) | trim -%}
-        {%- if item_padding not in ["shallow"] -%}
-          {%- set item_padding="" -%}
-        {%- endif -%}
-
-        {%- set item_classes = "" -%}
-        {%- if item_padding | length > 0 -%}
-          {%- set item_classes = "p-section--" + item_padding -%}
-        {%- endif -%}
-
-        {#- Last item should not have any additional padding - the pattern itself already has bottom padding -#}
-        {%- if loop.last -%}
-         {%- set item_classes = "" -%}
-        {%- endif -%}
-        <div{%- if item_classes | length > 0 %} class="{{ item_classes }}"{%- endif -%}>
-        {{- basic_section_item(item) -}}
-        </div>
-      {%- endfor -%}
+      {{- vf_basic_section_blocks(items=items) -}}
     </div>
   </div>
 </section>

package/templates/_macros/vf_blog.jinja

@@ -1,5 +1,5 @@
 {% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}
-{% from "_macros/shared/vf_article_block.jinja" import vf_article_block %}
+{%- from "_macros/shared/vf_blog-block.jinja" import vf_blog_block %}
 
 # Params
 # - article_config: A dictionary with the article configuration.
@@ -14,41 +14,8 @@
 #     - "date": A dictionary with "text" and optional "attrs" (a dictionary of time element attributes)
 # - template_mode: Boolean indicating if the macro is being used in template mode (for dynamic loading scenarios).
 # - fallback_image_url: URL to use as a fallback image, if no image is provided for an article.
-{%- macro _blog_article(article_config={}, template_mode=False, fallback_image_url="https://assets.ubuntu.com/v1/94c82a15-blog_fallback_image.png") -%}
-  {%- set base_image_container_classes = "p-image-container--16-9 is-cover article-image" -%}
-  {%- if not template_mode -%}
-    {%- set default_image_attrs = {
-      'src': fallback_image_url,
-      'alt': 'Blog fallback image'
-      }
-    -%}
-    {%- set input_image_attrs = article_config.get('image', {}).get('attrs', {}) -%}
-    {#- Merge user attributes over the defaults -#}
-    {%- set img_attrs = default_image_attrs.copy() -%}
-    {%- set _ = img_attrs.update(input_image_attrs) -%}
-    {#- class merging -#}
-    {%- set base_image_class = 'p-image-container__image' -%}
-    {%- set input_image_class = input_image_attrs.get('class', '') -%}
-    {%- if input_image_class -%}
-      {%- set final_image_classes = base_image_class + ' ' + input_image_class -%}
-    {%- else -%}
-      {%- set final_image_classes = base_image_class -%}
-    {%- endif -%}
-    {%- set _ = img_attrs.update({'class': final_image_classes}) -%}
-    {#- Build the HTML tag -#}
-    {%- set ns = namespace(image_html="<img") -%}
-    {%- for attr, value in img_attrs.items() -%}
-      {%- set ns.image_html = ns.image_html + " " + attr + "=\"" + value + "\"" -%}
-    {%- endfor -%}
-    {%- set image_html = ns.image_html + ">" -%}
-    {%- set _ = article_config.update({'image_html': '<div class="' + base_image_container_classes + '">\n            ' + image_html + '\n          </div>'}) -%}
-  {%- else -%}
-    {#- template mode - the template JS will fill in the image slot. -#}
-    {%- set _ = article_config.update({'image_html': '<div class="' + base_image_container_classes + '"></div>'}) -%}
-  {%- endif -%}
-  {{ vf_article_block(article_config=article_config, attrs={"class": "grid-col-2 grid-col-medium-2"}, template_mode=template_mode) }}
-
-{%- endmacro -%}
+{# moved article rendering and template/container logic into shared vf_blog-block.jinja
+   which exposes `vf_blog_block` for rendering the articles area. #}
 
 # Params
 # title: A dictionary with "text" and optional "link_attrs" (a dictionary of link attributes for the title).
@@ -116,18 +83,7 @@
           {%- endif -%}
         </h2>
       </div>
-      {%- if template_mode -%}
-        <div id="{{ template_config.get("template_container_id", "articles") }}" class="p-blog__articles"></div>
-        <template style="display: none;" id="{{ template_config.get("template_id", "template") }}">
-          {{ _blog_article(template_mode=True) }}
-        </template>
-      {%- else -%}
-        <div class="p-blog__articles grid-row">
-          {%- for article in articles -%}
-            {{ _blog_article(article_config=article, fallback_image_url=fallback_image_url) }}
-          {%- endfor -%}
-        </div>
-      {%- endif -%}
+      {{ vf_blog_block(articles=articles, template_config=template_config, fallback_image_url=fallback_image_url) }}
     </div>
   </section>
 {%- endmacro -%}

package/templates/_macros/vf_cta-section.jinja

@@ -13,6 +13,7 @@
         # title_text: H2 title text - optional
         # variant: default
         # layout: 100
+        # attrs: A dictionary of attributes to apply to the section element
 
     # Slots:
         # cta: The cta link - required
@@ -46,7 +47,7 @@
         # description: Paragraph-style (one or more) content below the title - Optional
         # cta: Call-to-action block (required)
 
-{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None) -%}
+{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None, attrs={}) -%}
   {% set description_content = caller('description') %}
   {% set has_description = description_content|trim|length > 0 %}
   {% set cta_content = caller('cta') %}
@@ -88,7 +89,13 @@
     {%- endif -%}
   {%- endmacro -%}
   <hr class="p-rule is-fixed-width u-no-margin--bottom" />
-  <section class="p-strip is-deep">
+  <section class="p-strip is-deep {{ attrs.get("class", "") -}}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != "class" %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
     {%- if layout == "25-75" -%}
       <div class="grid-row">
         <div class="grid-col-start-large-3 grid-col-9">{{ _cta_variant() }}</div>

package/templates/_macros/vf_divided-section.jinja

@@ -3,24 +3,9 @@
 # - padding: Type of padding to apply to the pattern - "deep", "shallow", "default" (default is "default").
 # - is_split_on_medium: Boolean to indicate if the section should be split on medium screens (default is false).
 # - top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" (default is "default").
-{% from "_macros/vf_basic-section.jinja" import basic_section_item, basic_section_title %}
+{% from "_macros/vf_basic-section.jinja" import basic_section_title %}
 {% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}
-
-{% macro _get_item_padding_classes(item_config={}, isLastLoopItr=False, isLastBlockItr=False) %}
-  {%- set item_padding = (item_config.get("padding", "")) | trim -%}
-  {%- if item_padding not in ["shallow"] -%}
-    {%- set item_padding = "" -%}
-  {%- endif -%}
-  {%- set item_classes = "" -%}
-  {%- if item_padding | length > 0 -%}
-    {%- set item_classes = "p-section--" + item_padding -%}
-  {%- endif -%}
-  {#- Last item of the last block should not have any bottom padding, as per desgin requirement -#}
-  {%- if isLastLoopItr and isLastBlockItr -%}
-    {%- set item_classes = "" -%}
-  {%- endif -%}
-  {{ item_classes | trim }}
-{% endmacro %}
+{% from "_macros/shared/vf_divided-section-block.jinja" import vf_divided_section_block %}
 {% macro vf_divided_section(title, blocks=[], padding="default", is_split_on_medium=False, top_rule_variant="default", caller=None) %}
   {%- set padding = padding | trim -%}
   {%- if padding not in ["deep", "shallow", "default"] -%}
@@ -32,48 +17,11 @@
   {%- endif -%}
   <section class="{{ padding_classes }}">
     <div class="grid-row--50-50{%- if not is_split_on_medium -%}-on-large{%- endif -%}">
-      {%- set description_block = blocks | selectattr("type", "equalto", "description-block") | first -%}
-      {%- set divided_blocks = blocks | selectattr("type", "equalto", "divided-block") | list -%}
       {{ vf_section_top_rule(top_rule_variant) }}
       <div class="grid-col">{{- basic_section_title(title) -}}</div>
       <div class="grid-col">
-        {%- if description_block -%}
-          {%- for item in description_block.get("items",[]) -%}
-            {% set item_classes = _get_item_padding_classes(item, loop.last) %}
-            <div {%- if item_classes | trim | length > 0 %}
-                 class="{{ item_classes }}"
-                 {%- endif -%}>{{- basic_section_item(item) -}}</div>
-          {%- endfor -%}
-          {%- if divided_blocks | length > 0 -%}<hr class="p-rule--muted" />{%- endif %}
-        {%- endif -%}
-        {%- for block in divided_blocks -%}
-          {%- set outer_last = loop.last -%}
-          {%- set ns = namespace(list_element="ul", list_class="p-list") -%}
-          {%- if block.get("bullet_type") == "number" -%}
-            {%- set ns.list_element = "ol" -%}
-            {%- set ns.list_class = "p-stepped-list" -%}
-          {%- endif -%}
-          <{{ ns.list_element }} class="p-divided__block {{ ns.list_class }} u-no-padding">
-          {%- for item in block.get("items",[]) -%}
-            {%- set list_bullet_type = "has-bullet" if block.bullet_type == "bullet" else "is-ticked" if block.bullet_type == "status" -%}
-            <li class="p-divided__heading u-no-padding--bottom {{ list_bullet_type }}{% if ns.list_class == 'p-stepped-list' %} p-stepped-list__item{% else %} p-list__item{% endif %}">
-              <div class="{% if not loop.last %}p-section--shallow{% endif %}{% if ns.list_class == 'p-stepped-list' %} p-stepped-list__title{% endif %}">
-                {%- if item.title_text -%}
-                  <h3 class="p-heading--5 u-no-padding">{{ item.title_text }}</h3>
-                {%- endif -%}
-                {%- for content in item.contents -%}
-                  {%- set item_classes = _get_item_padding_classes(content, loop.last, outer_last) -%}
-                  <div {%- if item_classes | trim | length > 0 %}
-                       class="{{ item_classes }}"
-                       {%- endif -%}>{{- basic_section_item(content) -}}</div>
-                {%- endfor -%}
-              </div>
-            </li>
-            {% if not loop.last %}<hr class="p-rule--muted" />{% endif %}
-          {%- endfor -%}
-          </ {{ ns.list_element }}>
-        {%- endfor -%}
+        {{ vf_divided_section_block(blocks=blocks) }}
       </div>
     </div>
   </section>
-{% endmacro %}
+{% endmacro %}

package/templates/_macros/vf_equal-heights.jinja

@@ -1,6 +1,9 @@
+{#- The vf_equal-heights-block has been abstracted to _macros/shared/ folder so that it can be nested and used in other components -#}
+{% from "_macros/shared/vf_equal-heights-block.jinja" import vf_equal_heights_block %}
 {#-
   Params
   - title_text (string) (required): The text to be displayed as the heading
+  - attrs (dictionary) (optional): A dictionary of attributes to apply to the equal heights pattern.
   - subtitle_text (string) (optional): The text to be displayed as the subtitle
   - subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5.
   - highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default.
@@ -8,9 +11,11 @@
   - image_aspect_ratio_medium (string) (optional): The aspect ratio for item images on medium screens. Defaults to "square". Can be "square", "2-3", "3-2", "16-9", "cinematic" or "auto". Defaults to "square".
   - image_aspect_ratio_large (string) (optional): The aspect ratio for item images on large screens. Defaults to "2-3". Can be "square", "2-3", "3-2", "16-9", "cinematic" or "auto". Defaults to "2-3".
   - items (array) (required): An array of items, each including 'image_html', 'title_text', 'description_html', and 'cta_html'.
- -#}
+-#}
+
 {%- macro vf_equal_heights(
   title_text,
+  attrs={},
   subtitle_text="",
   subtitle_heading_level=5,
   highlight_images=false,
@@ -31,19 +36,25 @@
     {% set subtitle_heading_level=5 %}
   {%- endif -%}
 
-  <div class="p-section">
+  <div class="p-section {{ attrs.get('class', '') }}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != 'class' %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
     <hr class="p-rule is-fixed-width"/>
     <div class="p-section--shallow">
     {%- if has_two_top_cols -%}
-      <div class="row--50-50-on-large">
-        <div class="col">
+      <div class="grid-row--50-50-on-large">
+        <div class="grid-col">
     {%- endif -%}
           <h2{% if not has_two_top_cols %} class="u-fixed-width"{% endif %}>{{ title_text }}</h2>
     {%- if has_two_top_cols -%}
         </div>
     {%- endif -%}
         {%- if has_two_top_cols -%}
-          <div class="col">
+          <div class="grid-col">
             {%- if has_subtitle -%}
               <p class="p-heading--{{ subtitle_heading_level }}">{{ subtitle_text }}</p>
             {%- endif -%}
@@ -57,53 +68,22 @@
     {%- endif -%}
     </div>
 
-    <div class="row">
-      <div class="{%- if items | length == 2 -%}col-6 col-start-large-7{%- elif items | length % 3 == 0 and items | length % 4 != 0 -%}col-9 col-start-large-4{%- else -%}col{%- endif -%}">
-        <div class="p-equal-height-row--wrap">
-          {%- for item in items -%}
-            {% set image = item.get("image_html", "") | trim %}
-            {% set title = item.get("title_text", "") | trim %}
-            {% set description = item.get("description_html", "") | trim %}
-            {% set cta = item.get("cta_html", "") | trim %}
-            <div class="p-equal-height-row__col is-borderless">
-              {#- Image item -#}
-              <div class="p-equal-height-row__item">
-                {%- if image | length > 0 %}
-                  <div
-                    class="p-image-container {% if image_aspect_ratio_small != 'auto' %} p-image-container--{{ image_aspect_ratio_small }}-on-small{% endif %}{% if image_aspect_ratio_medium != 'auto' %} p-image-container--{{ image_aspect_ratio_medium }}-on-medium{% endif %}{% if image_aspect_ratio_large != 'auto' %} p-image-container--{{ image_aspect_ratio_large }}-on-large{% endif %} is-cover{% if highlight_images %} is-highlighted{% endif %}" >
-                    {#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
-                    {{- image | safe -}}
-                  </div>
-                  <hr class="p-rule--highlight"/>
-                {%- endif -%}
-              </div>
-              {#- Title item -#}
-              <div class="p-equal-height-row__item">
-                {%- if title | length > 0 -%}
-                  <p class="p-heading--{{ subtitle_heading_level }}">{{- title -}}</p>
-                {%- endif -%}
-              </div>
-              {#- Description item (optional) -#}
-              <div class="p-equal-height-row__item">
-                {{- description | safe -}}
-              </div>
-              {#- CTA item (optional) -#}
-              <div class="p-equal-height-row__item">
-                {%- if cta | length > 0 -%}
-                  <p>
-                    {{- cta | safe -}}
-                  </p>
-                {%- endif -%}
-              </div>
-            </div>
-          {%- endfor -%}
-          </div>
+    <div class="grid-row">
+      <div class="{%- if items | length == 2 -%}grid-col-4 grid-col-start-large-5{%- elif items | length % 3 == 0 and items | length % 4 != 0 -%}grid-col-6 grid-col-start-large-3{%- else -%}grid-col-8{%- endif -%}">
+        {{ vf_equal_heights_block(
+          items=items,
+          subtitle_heading_level=subtitle_heading_level,
+          highlight_images=highlight_images,
+          image_aspect_ratio_small=image_aspect_ratio_small,
+          image_aspect_ratio_medium=image_aspect_ratio_medium,
+          image_aspect_ratio_large=image_aspect_ratio_large
+        ) }}
       </div>
     </div>
     {%- if has_cta -%}
-      <div class="row">
+      <div class="grid-row">
         <hr class="p-rule--muted">
-        <div class="col-6 col-medium-3 col-start-large-7 col-start-medium-4">
+        <div class="grid-col-4 grid-col-medium-2 grid-col-start-large-5 grid-col-start-medium-3">
           <p>
             {{- cta_content -}}
           </p>

package/templates/_macros/vf_linked-logo-section.jinja

@@ -1,3 +1,5 @@
+{% from "_macros/shared/vf_linked-logo-block.jinja" import vf_linked_logo_block %}
+
 {#
   Params
   - title_text (string): The text to be displayed as the heading
@@ -59,35 +61,6 @@
   {%- set padding_classes = "" -%}
   {%- endif -%}
 
-  {% macro _list(links, cols_per_item=2) %}
-    {%- if links|length > 1 -%}
-      <div class="grid-row">
-        {%- for link in links -%}
-          <div class="grid-col-{{ cols_per_item }} grid-col-medium-{{ cols_per_item }}">
-            <a href="{{ link.href }}" aria-label="{{ link.label }}">
-              <div class="p-image-container--16-9 is-highlighted">
-              {#- If image_attrs is present, use it to generate the image HTML -#}
-              {%- if "image_attrs" in link -%}
-                <img class="p-image-container__image {{ link["image_attrs"]["class"] }}"
-                  {% for attr, value in link["image_attrs"].items() %}
-                    {% if attr != "class" %}
-                      {{ attr }}="{{ value }}"
-                    {% endif %}
-                  {% endfor %}
-                >
-              {% else %}
-                {{ link.image_html | safe }}
-              {% endif %}
-              </div>
-              <hr class="p-rule--muted">
-              <p>{{ link.text }}</p>
-            </a>
-          </div>
-        {%- endfor -%}
-      </div>
-    {%- endif -%}
-  {% endmacro %}
-
   {%- if padding == "none" -%}
   <div>
   {%- else -%}
@@ -105,7 +78,7 @@
           </div>
           {% endif %}
           <div class="grid-col-4 grid-col-start-large-5 grid-col-medium-4 grid-col-start-medium-5">
-            {{ _list(links) }}
+            {{ vf_linked_logo_block({'links': links}) }}
           </div>
         </div>
       </div>
@@ -118,7 +91,7 @@
           </div>
           {% endif %}
           <div class="grid-col-6 grid-col-start-large-3">
-            {{ _list(links) }}
+            {{ vf_linked_logo_block({'links': links}) }}
           </div>
         </div>
       </div>
@@ -130,7 +103,7 @@
           </div>
         </div>
       {% endif %}
-      {{ _list(links) }}
+      {{ vf_linked_logo_block({'links': links}) }}
     {%- endif -%}
   {%- if padding == "none" -%}
   </div>

package/templates/_macros/vf_pricing-block.jinja

@@ -2,6 +2,7 @@
   Params
   - title_text (string) (required): The text to be displayed as the heading
   - top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none".
+  - attrs (dictionary) (optional): A dictionary of attributes to apply to the Pricing block section.
   - tiers (Array<{
       tier_name_text: String (optional),
       tier_price_text: String,
@@ -20,6 +21,7 @@
 {%- macro vf_pricing_block(
   top_rule_variant="default",
   title_text="",
+  attrs={},
   tiers=[]
   ) -%}
   {% set top_rule_variant = top_rule_variant | trim %}
@@ -86,7 +88,13 @@
       <hr class="p-rule{% if top_rule_variant != 'default' %}--{{ rule_class }}{% endif %} is-fixed-width" />
     {% endif %}
   {%- endmacro -%}
-  <div class="p-section">
+  <div class="p-section {{ attrs.get("class", "") -}}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != "class" %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
     {{ _top_rule() }}
     <div class="grid-row">
       <div class="grid-col-4 grid-col-medium-4 grid-col-small-4">