vanilla-framework 4.49.0 → 4.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.49.0",
+  "version": "4.51.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

package/scss/_patterns_content-card.scss

@@ -4,15 +4,15 @@
     Content card:
       .p-content-card:
         Main element of the content card component.
-      "&.p-content-card--2-cols":
+      "&.p-content-card--cols-2":
         Modifier for a 2-column width vertical layout. Applied ONLY to the parent .p-content-card.
-      "&.p-content-card--4-cols":
+      "&.p-content-card--cols-4":
         Modifier for a 4-column width horizontal layout. Applied ONLY to the parent .p-content-card.
-      "&.p-content-card--6-cols":
+      "&.p-content-card--cols-6":
         Modifier for a 6-column width horizontal layout. Applied ONLY to the parent .p-content-card.
-      "&.p-content-card__has-image":
+      "&.has-image":
         State class applied to the parent when the card includes an image.
-      "&.p-content-card__has-desc":
+      "&.has-desc":
         State class applied to the parent when the card includes a description that appears on hover.
     Links:
       .p-content-card__overlay-link:
@@ -54,72 +54,170 @@
 
 @import 'settings';
 
+// =========================================
+// CONTENT CARD VARIABLES
+// =========================================
+$card-height-vertical: 23.75rem; // 380px
+$card-height-default: 12rem; // 192px
+
+$card-image-width: 17.75rem; // 284px
+// Horizontal image heights are explicit to preserve the tuned text/image balance at each breakpoint
+$card-image-height-horizontal: 9.703125rem; // 155.25px
+$card-image-height-horizontal-large: 9.984375rem; // 159.75px
+
+// Horizontal card heights are image height plus vertical spacing budget.
+$card-height-horizontal: $card-image-height-horizontal + $sp-x-large;
+$card-height-horizontal-large: $card-image-height-horizontal-large + $sp-x-large;
+
+$card-footer-outer-height: $sp-x-large + ($sp-small * 0.5);
+$card-footer-inner-height: $sp-x-large - ($sp-small * 0.5);
+
+$card-nudge-negative: map-get($settings-text-h4, nudge);
+$card-chip-margin-right: 1.5625rem; // 25px
+$card-author-padding-bottom: $sp-small;
+
+$card-fallback-spacing-large: $sp-x-large;
+$card-fallback-image-gap: $sp-small + $sp-xx-small;
+
+@mixin mq-min($breakpoint) {
+  @media screen and (width >= $breakpoint) {
+    @content;
+  }
+}
+
+@mixin mq-max($breakpoint) {
+  @media screen and (width < $breakpoint) {
+    @content;
+  }
+}
+
+@mixin mq-between($min, $max) {
+  @media screen and ($min <= width < $max) {
+    @content;
+  }
+}
+
 @mixin vf-p-content-card {
+  /* =========================================
+     GRID WRAPPER 
+     (Handles spanning and invisible bottom spacing)
+     ========================================= */
+  .p-content-card-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-bottom: var(--spacing-vertical-large, $card-fallback-spacing-large);
+    width: 100%;
+
+    /* 2-Column Spanning */
+    &--2 {
+      grid-column: 1 / -1; /* Mobile */
+      @include mq-between($breakpoint-small, $breakpoint-large) {
+        grid-column: span 2; /* Medium */
+      }
+      @include mq-min($breakpoint-large) {
+        grid-column: span 2; /* Desktop */
+      }
+    }
+
+    /* 4-Column Spanning */
+    &--4 {
+      grid-column: 1 / -1;
+      @include mq-min($breakpoint-large) {
+        grid-column: span 4;
+      }
+    }
+
+    /* 6-Column Spanning */
+    &--6 {
+      grid-column: 1 / -1;
+      @include mq-min($breakpoint-large) {
+        grid-column: span 6;
+      }
+    }
+  }
+
+  /* =========================================
+     CARD COMPONENT
+     ========================================= */
   .p-content-card {
     align-items: flex-start;
     border: 1px solid var(--color-border-low-contrast, rgba(0, 0, 0, 0.1));
     display: flex;
+    flex: 1;
     flex-direction: column;
-    height: 23.75rem; /* 380px */
+    height: 100%;
     justify-content: space-between;
+    max-width: 100%;
+
+    min-height: $card-height-vertical;
     overflow: hidden;
     padding-top: var(--spacing-vertical-large, $sp-medium);
     position: relative;
     text-decoration: none !important;
     transition: all 0.4s ease-in-out;
-    width: var(--size-width-grid-col-2, 17.75rem); /* 284px */
+    width: 100%;
 
-    @media screen and (width >= $breakpoint-small) {
-      &.p-content-card--4-cols,
-      &.p-content-card--6-cols {
-        align-items: flex-start;
-        align-self: stretch;
-        flex-direction: row;
-        gap: $sp-medium; /* 16px */
-        height: 11.703125rem; /* 187.25px */
-        padding: $sp-medium $sp-medium 0;
-        width: var(--size-width-grid-col-4, 37.5rem); /* 600px */
-      }
+    &:not(.has-image) {
+      height: $card-height-default;
+      min-height: $card-height-default;
+    }
 
-      &.p-content-card--4-cols:not(.has-image),
-      &.p-content-card--6-cols:not(.has-image) {
-        height: 12rem; /* 192px - Fixed height */
+    /* Shrink-to-fit for cards without footers on mobile */
+    @include mq-max($breakpoint-small) {
+      &:not(:has(.p-content-card__footer-outer)) {
+        height: auto;
+        min-height: 0;
+        padding-bottom: var(--spacing-vertical-large, $sp-medium); /* Keeps spacing balanced */
       }
+    }
 
-      &.p-content-card--4-cols:not(.has-image) .p-rule--muted,
-      &.p-content-card--6-cols:not(.has-image) .p-rule--muted {
-        margin-left: -$sp-medium;
-        margin-right: -$sp-medium;
-        width: calc(100% + $sp-large); /* 32px */
+    /* 2-Column Modifier Internal Resets */
+    &.p-content-card--cols-2 {
+      @include mq-between($breakpoint-small, $breakpoint-large) {
+        .p-content-card__author-and-date {
+          display: none !important;
+        }
       }
     }
 
-    @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-      &.p-content-card--2-cols {
+    /* 4 and 6 Column Horizontal Cards (Medium/Large Screens) */
+    @include mq-min($breakpoint-small) {
+      &.p-content-card--cols-4,
+      &.p-content-card--cols-6 {
         align-items: flex-start;
         align-self: stretch;
+
+        flex: 0 0 auto;
         flex-direction: row;
-        gap: $sp-medium; /* 16px */
-        height: 11.703125rem; /* 187.25px */
+        gap: $sp-medium;
+        height: $card-height-horizontal;
+
+        max-width: 100%;
+        min-height: $card-height-horizontal;
         padding: $sp-medium $sp-medium 0;
-        width: var(--size-width-grid-col-4, 37.5rem); /* 600px */
       }
 
-      &.p-content-card--2-cols:not(.has-image) {
-        height: 10rem; /* 160px - Fixed height */
+      &.p-content-card--cols-4:not(.has-image),
+      &.p-content-card--cols-6:not(.has-image) {
+        height: $card-height-default;
+        min-height: $card-height-default;
       }
 
-      &.p-content-card--2-cols:not(.has-image) .p-rule--muted {
+      &.p-content-card--cols-4:not(.has-image) .p-rule--muted,
+      &.p-content-card--cols-6:not(.has-image) .p-rule--muted {
         margin-left: -$sp-medium;
         margin-right: -$sp-medium;
-        width: calc(100% + $sp-large); /* 32px */
+        max-width: none;
+        width: calc(100% + (#{$sp-medium} * 2));
       }
     }
 
-    @media screen and (width >= $breakpoint-large) {
-      &.p-content-card--6-cols {
-        height: 11.984375rem; /* 191.75px */
-        width: var(--size-width-grid-col-6, 57.25rem); /* 916px */
+    @include mq-min($breakpoint-large) {
+      &.p-content-card--cols-6 {
+        height: $card-height-horizontal-large;
+        max-width: 100%;
+        min-height: $card-height-horizontal-large;
       }
     }
 
@@ -139,6 +237,11 @@
       overflow: hidden;
       text-decoration: none !important;
 
+      .p-content-card--cols-6 & {
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+      }
+
       &:hover,
       &:focus,
       &:active,
@@ -174,9 +277,15 @@
       text-wrap: wrap;
       width: 100%;
 
-      @media screen and (width >= $breakpoint-large) {
-        .p-content-card--6-cols & {
-          margin-top: -0.45rem !important;
+      .p-content-card--cols-6 & {
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        max-height: 3em;
+      }
+
+      @include mq-min($breakpoint-large) {
+        .p-content-card--cols-6 & {
+          margin-top: $card-nudge-negative !important;
         }
       }
     }
@@ -198,16 +307,11 @@
       grid-template-columns: 1fr;
       grid-template-rows: 1fr;
       overflow: hidden;
-      padding: 0 $sp-medium; /* 16px */
+      padding: 0 $sp-medium;
 
-      @media screen and (width >= $breakpoint-small) {
-        .p-content-card--4-cols &,
-        .p-content-card--6-cols & {
-          padding: 0;
-        }
-      }
-      @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-        .p-content-card--2-cols & {
+      @include mq-min($breakpoint-small) {
+        .p-content-card--cols-4 &,
+        .p-content-card--cols-6 & {
           padding: 0;
         }
       }
@@ -241,30 +345,37 @@
       margin: 0;
       overflow: hidden;
 
-      @media screen and (width >= $breakpoint-large) {
-        .p-content-card--6-cols & {
-          margin-top: -0.45rem !important;
+      .p-content-card--cols-6 & {
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+      }
+
+      @include mq-min($breakpoint-large) {
+        .p-content-card--cols-6 & {
+          margin-top: $card-nudge-negative !important;
         }
       }
     }
 
+    &__footer-container {
+      /* Structural grouping element.
+        Because the parent (.p-content-card__content) uses flexbox space-between, 
+        this wrapper prevents the <hr> from floating awkwardly in the middle of the card.
+      */
+    }
+
     &__footer-outer {
       align-items: center;
       align-self: stretch;
       display: flex;
-      height: 2.25rem; /* Fixed height: 36px */
+      height: $card-footer-outer-height;
       overflow: hidden;
       padding: 0 $sp-medium var(--spacing-vertical-small, $sp-small) $sp-medium;
       position: relative;
 
-      @media screen and (width >= $breakpoint-small) {
-        .p-content-card--4-cols &,
-        .p-content-card--6-cols & {
-          padding: 0 0 var(--spacing-vertical-small, $sp-small) 0;
-        }
-      }
-      @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-        .p-content-card--2-cols & {
+      @include mq-min($breakpoint-small) {
+        .p-content-card--cols-4 &,
+        .p-content-card--cols-6 & {
           padding: 0 0 var(--spacing-vertical-small, $sp-small) 0;
         }
       }
@@ -273,8 +384,8 @@
     &__footer-inner {
       align-items: center;
       display: flex;
-      gap: $sp-small; /* 8px */
-      height: 1.75rem; /* 28px */
+      gap: $sp-small;
+      height: $card-footer-inner-height;
       mask-image: linear-gradient(to right, black 85%, transparent 100%);
       -ms-overflow-style: none;
       overflow-x: auto;
@@ -294,14 +405,14 @@
       }
 
       .p-chip--information {
-        margin: 0 1.5625rem 0 0; /* 25px -> 1.5625rem */
+        margin: 0 $card-chip-margin-right 0 0;
         vertical-align: baseline;
       }
 
       .u-has-icon {
         align-items: center;
         display: flex;
-        gap: $sp-x-small; /* 4px */
+        gap: $sp-x-small;
 
         .p-content-card__icon[class*='p-icon--'],
         .p-content-card__small {
@@ -318,24 +429,20 @@
       aspect-ratio: 16/9;
       display: block;
       flex-shrink: 0;
-      height: 9.984375rem; /* 159.75px */
+      height: auto;
       object-fit: cover;
+      width: 100%;
 
-      @media screen and (width >= $breakpoint-small) {
-        .p-content-card--4-cols &,
-        .p-content-card--6-cols & {
-          height: 9.703125rem; /* 155.25px */
-        }
-      }
-      @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-        .p-content-card--2-cols & {
-          height: 9.703125rem; /* 155.25px */
+      @include mq-min($breakpoint-small) {
+        .p-content-card--cols-4 &,
+        .p-content-card--cols-6 & {
+          height: $card-image-height-horizontal;
         }
       }
 
-      @media screen and (width >= $breakpoint-large) {
-        .p-content-card--6-cols & {
-          height: 9.984375rem; /* 159.75px */
+      @include mq-min($breakpoint-large) {
+        .p-content-card--cols-6 & {
+          height: $card-image-height-horizontal-large;
         }
       }
     }
@@ -344,21 +451,18 @@
       align-items: flex-start;
       display: flex;
       flex-direction: column;
-      gap: var(--spacing-vertical-image-container, 0.625rem); /* 10px -> 0.625rem */
+      gap: var(--spacing-vertical-image-container, $card-fallback-image-gap);
+      max-width: 100%;
       padding-bottom: var(--spacing-vertical-large, $sp-medium);
-      width: 17.75rem; /* 284px */
 
-      @media screen and (width >= $breakpoint-small) {
-        .p-content-card--4-cols &,
-        .p-content-card--6-cols & {
-          align-self: stretch;
-          flex: 0 0 auto;
-        }
-      }
-      @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-        .p-content-card--2-cols & {
+      width: 100%;
+
+      @include mq-min($breakpoint-small) {
+        .p-content-card--cols-4 &,
+        .p-content-card--cols-6 & {
           align-self: stretch;
           flex: 0 0 auto;
+          width: $card-image-width;
         }
       }
     }
@@ -367,61 +471,59 @@
       align-items: flex-start;
       align-self: stretch;
       display: flex;
+      padding-bottom: $card-author-padding-bottom;
 
       > :first-child {
         margin-bottom: 0 !important;
       }
 
-      @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-        .p-content-card--2-cols &,
-        .p-content-card--6-cols & {
+      @include mq-between($breakpoint-small, $breakpoint-large) {
+        .p-content-card--cols-6 & {
           display: none;
         }
       }
 
-      @media screen and (width >= $breakpoint-large) {
-        .p-content-card--6-cols & {
+      @include mq-min($breakpoint-large) {
+        .p-content-card--cols-6 & {
           display: flex;
-          margin-top: -0.45rem;
         }
       }
     }
 
-    &:not(.has-image) {
-      height: 12.25rem;
-    }
-
     &.has-image {
       padding-top: 0;
 
-      @media screen and (width >= $breakpoint-small) {
-        &.p-content-card--4-cols,
-        &.p-content-card--6-cols {
-          padding-top: $sp-medium; /* 16px */
+      @include mq-min($breakpoint-small) {
+        &.p-content-card--cols-4,
+        &.p-content-card--cols-6 {
+          padding-top: $sp-medium;
         }
       }
     }
 
-    &:has(.p-content-card__main-link:focus-visible) {
-      outline: 3px solid var(--color-focus, #0066cc);
-      outline-offset: 2px;
-    }
-
     &:hover,
     &:focus-within {
       border-color: var(--color-border-high-contrast, #707070);
       text-decoration: none;
+    }
 
-      &.has-desc {
-        .p-content-card__primary-content {
-          opacity: 0;
-          transform: translateY(-150px);
-        }
-        .p-content-card__hover-content {
-          opacity: 1;
-          transform: translateY(0);
-        }
+    @include mq-min($breakpoint-large) {
+      &.has-desc:hover .p-content-card__primary-content,
+      &.has-desc:focus-within .p-content-card__primary-content {
+        opacity: 0;
+        transform: translateY(-150px);
+      }
+
+      &.has-desc:hover .p-content-card__hover-content,
+      &.has-desc:focus-within .p-content-card__hover-content {
+        opacity: 1;
+        transform: translateY(0);
       }
     }
+
+    &:has(.p-content-card__main-link:focus-visible) {
+      outline: 3px solid var(--color-focus, #0066cc);
+      outline-offset: 2px;
+    }
   }
 }

package/scss/_patterns_image.scss

@@ -18,6 +18,10 @@
         Wraps contents in a container with an aspect ratio of 2.4:1.
       .p-image-container--square:
         Wraps contents in a container with an aspect ratio of 1:1.
+      .p-image-container--auto-height:
+        Stretches the container to the height of an adjacent grid column, clamped between a 16:9 minimum and a 2:3 maximum of the column width using CSS container queries.
+      .p-image-container--auto-height-on-(small|medium|large):
+        Auto-height variant applied only at the specified breakpoint.
       .p-image-container--(16-9|3-2|2-3|cinematic|square)-on-(small|medium|large):
         Wraps contents in a container with the specified aspect ratio on the specified breakpoint.
     Image:
@@ -37,6 +41,11 @@ $aspect-ratios: (
   'square': 1,
 );
 
+// Auto-height clamp bounds, expressed as a percentage of the container's width.
+// Upper bound matches the 2:3 (portrait) ratio; lower bound matches 16:9.
+$image-container-auto-height-max: math.div(1, map-get($aspect-ratios, '2-3')) * 100cqw;
+$image-container-auto-height-min: math.div(1, map-get($aspect-ratios, '16-9')) * 100cqw;
+
 @mixin apply-aspect-ratio-styles($padding-value) {
   &::before {
     content: '';
@@ -57,6 +66,19 @@ $aspect-ratios: (
   }
 }
 
+@mixin apply-auto-height-styles {
+  container-type: inline-size;
+  height: 100%;
+  max-height: $image-container-auto-height-max;
+  min-height: $image-container-auto-height-min;
+
+  .p-image-container__image {
+    height: 100%;
+    object-fit: contain;
+    width: 100%;
+  }
+}
+
 @mixin aspect-ratio-classes {
   @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
     $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
@@ -65,6 +87,10 @@ $aspect-ratios: (
     }
   }
 
+  .p-image-container--auto-height {
+    @include apply-auto-height-styles;
+  }
+
   // Responsive aspect ratios
   @each $breakpoint-name, $breakpoint-bounds-pair in $breakpoint-bounds {
     $min-width: map-get($breakpoint-bounds-pair, min);
@@ -78,6 +104,9 @@ $aspect-ratios: (
             @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
+        .p-image-container--auto-height-on-#{$breakpoint-name} {
+          @include apply-auto-height-styles;
+        }
       }
     } @else if $min-width {
       @media (width >= $min-width) {
@@ -87,6 +116,9 @@ $aspect-ratios: (
             @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
+        .p-image-container--auto-height-on-#{$breakpoint-name} {
+          @include apply-auto-height-styles;
+        }
       }
     } @else if $max-width {
       @media (width < $max-width) {
@@ -96,6 +128,9 @@ $aspect-ratios: (
             @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
+        .p-image-container--auto-height-on-#{$breakpoint-name} {
+          @include apply-auto-height-styles;
+        }
       }
     }
   }

package/scss/_settings_colors.scss

@@ -58,7 +58,7 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 // NON-SEMANTIC COLOURS
 $color-label-validated: #006b75;
 $color-code-background: rgba($color-x-dark, 0.03);
-$color-code-background-dark: rgba($color-x-light, 0.3);
+$color-code-background-dark: rgba($color-x-light, 0.15);
 $color-code-heading-background: rgba($color-x-dark, 0.08);
 
 // Background colours for form elements

package/templates/_macros/vf_card.jinja

@@ -22,80 +22,77 @@
 
 {%- macro vf_card(columns="2", link=None, heading=None, image=None, author=None, date=None, footer=None, description=None) -%}
 
-{%- set layout = 'p-content-card--' ~ columns ~ '-cols' -%}
+{%- set col_str = columns | string -%}
+{%- set layout = 'p-content-card--cols-' ~ col_str -%}
 {%- set img_class = 'has-image' if image else '' -%}
 {%- set has_desc = 'has-desc' if description else '' -%}
 
-<div class="p-content-card {{ layout }} {{ img_class }} {{ has_desc }}">
-
-    {%- if link -%}
-        <a href="{{ link }}" class="p-content-card__overlay-link" tabindex="-1" aria-hidden="true"></a>
-    {%- endif -%}
+<div class="p-content-card-wrapper p-content-card-wrapper--{{ col_str }}">
+    
+    <div class="p-content-card {{ layout }} {{ img_class }} {{ has_desc }}">
+        
+        {%- if link -%}
+            <a href="{{ link }}" class="p-content-card__overlay-link" tabindex="-1" aria-hidden="true"></a>
+        {%- endif -%}
 
-    {%- if image -%}
-    <div class="p-content-card__image-wrapper">
-        <img class="p-content-card__image" src="{{ image.src }}" alt="{{ image.alt }}" />
-    </div>
-    {%- endif -%}
+        {%- if image -%}
+        <div class="p-content-card__image-wrapper">
+            <img class="p-content-card__image" src="{{ image.src }}" alt="{{ image.alt }}" />
+        </div>
+        {%- endif -%}
 
-    <div class="p-content-card__content">
-        <div class="p-content-card__body">
-            
-            <div class="p-content-card__primary-content">
-                <h4 class="p-content-card__heading">
-                    {%- if link -%}
-                        <a href="{{ link }}" class="p-content-card__main-link">{{ heading }}</a>
-                    {%- else -%}
-                        {{ heading }}
-                    {%- endif -%}
-                </h4>
+        <div class="p-content-card__content">
+            <div class="p-content-card__body">
                 
-                {%- if image and (author or date) -%}
-                <div class="p-content-card__author-and-date u-sv-3">
-                    <small>
-                        {%- if author -%}
-                            <span class="u-text--muted">{{ author }}</span>
-                        {%- endif -%}
-                        
-                        {%- if author and date -%}
-                            &middot;
-                        {%- endif -%}
-                        
-                        {%- if date -%}
-                            <span class="u-text--muted">{{ date }}</span> 
+                <div class="p-content-card__primary-content">
+                    <h4 class="p-content-card__heading">
+                        {%- if link -%}
+                            <a href="{{ link }}" class="p-content-card__main-link">{{ heading }}</a>
+                        {%- else -%}
+                            {{ heading }}
                         {%- endif -%}
-                    </small>
+                    </h4>
+                    
+                    {%- if image and (author or date) -%}
+                    <div class="p-content-card__author-and-date u-sv-3">
+                        <small>
+                            {%- set items = [] -%}
+                            {%- if author -%}{%- set _ = items.append('<span class="u-text--muted">' ~ author ~ '</span>') -%}{%- endif -%}
+                            {%- if date -%}{%- set _ = items.append('<span class="u-text--muted">' ~ date ~ '</span>') -%}{%- endif -%}
+                            {{ items | join('&nbsp;&middot;&nbsp;') | safe }}
+                        </small>
+                    </div>
+                    {%- endif -%}
+                </div>
+
+                {%- if description -%}
+                <div class="p-content-card__hover-content">
+                    <p class="p-content-card__description">{{ description }}</p>
                 </div>
                 {%- endif -%}
-            </div>
 
-            {%- if description -%}
-            <div class="p-content-card__hover-content">
-                <p class="p-content-card__description">{{ description }}</p>
             </div>
-            {%- endif -%}
-
-        </div>
-        
-        {%- if footer -%}
-        <div>
-            <hr class="p-rule--muted">
-            <div class="p-content-card__footer-outer">
-                <div class="p-content-card__footer-inner" tabindex="-1">
-                    {%- if footer.resource_type -%}
-                        <span class="u-has-icon">
-                            <i class="p-content-card__icon p-icon--{{ footer.resource_type.icon }}"></i>
-                            <small class="p-content-card__small">{{ footer.resource_type.text }}</small>
-                        </span>
-                    {%- endif -%}
+            
+            {%- if footer -%}
+            <div class="p-content-card__footer-container">
+                <hr class="p-rule--muted">
+                <div class="p-content-card__footer-outer">
+                    <div class="p-content-card__footer-inner" tabindex="-1">
+                        {%- if footer.resource_type -%}
+                            <span class="u-has-icon">
+                                <i class="p-content-card__icon p-icon--{{ footer.resource_type.icon }}"></i>
+                                <small class="p-content-card__small">{{ footer.resource_type.text }}</small>
+                            </span>
+                        {%- endif -%}
 
-                    {%- if footer.content_type %}
-                        <span class="p-chip--information is-readonly">{{ footer.content_type}}</span>
-                    {%- endif -%}
+                        {%- if footer.content_type %}
+                            <span class="p-chip--information is-readonly">{{ footer.content_type }}</span>
+                        {%- endif -%}
+                    </div>
                 </div>
             </div>
+            {%- endif -%}
         </div>
-        {%- endif -%}
     </div>
 </div>
 {%- endmacro -%}

package/templates/_macros/vf_rich-vertical-list.jinja

@@ -1,127 +1,127 @@
+{% from "_macros/vf_basic-section.jinja" import basic_section_title, vf_basic_section_blocks %}
+{% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}
+
 # Params
-# title_text (string) (required): Title of the rich vertical list
-# list_item_tick_style (string) (optional): Type of list item tick styling. Options are "bullet", "tick", "number".
-# is_flipped (boolean) (optional): Whether the list items are flipped so image is on the left and the text is on the right. Defaults to false.
-# Slots
-# description: Paragraph-style description content
-# logo_section Logo section block
-# list_item_[1-7]: List item content, assumed to be li.p-list__item
-# image (required)
+# title (dict) (required): {text, link_attrs?} — rendered via basic_section_title (always renders <h2>).
+# items (array) (optional): Array of {type, item} dicts rendered via vf_basic_section_blocks.
+#   Supported types: description, list, code-block, logo-block, cta-block.
+#   Entries with any other type are silently dropped.
+# media (dict) (required): Media column config. Keys:
+#   - type (string): "image" | "video". Defaults to "image".
+#   - ratio.large (string): "16-9" | "3-2" | "1-1" | "2-3" | "auto-height". Defaults to "3-2".
+#   - ratio.medium_small (string): "16-9" | "3-2" | "1-1". Defaults to "3-2".
+#   - fit (string): "cover" | "contain". Defaults to "cover".
+#   - attrs (dict): Passthrough HTML attributes for the <img> or <iframe>.
+# is_flipped (bool) (optional): Swap content and media columns. Defaults to false.
+# padding (string) (optional): "deep" | "shallow" | "default". Defaults to "default".
+# top_rule_variant (string) (optional): "default" | "muted". Defaults to "default".
+# attrs (dict) (optional): HTML attrs for the <section>.
 {% macro vf_rich_vertical_list(
-  title_text,
-  list_item_tick_style="",
-  is_flipped=false
+  title={},
+  items=[],
+  media={},
+  is_flipped=false,
+  padding="default",
+  top_rule_variant="default",
+  attrs={}
 ) -%}
-  {% set description_content = caller('description') %}
-  {% set has_description = description_content|trim|length > 0 %}
-  {% set logo_section_content = caller('logo_section') %}
-  {% set has_logo_section = logo_section_content|trim|length > 0 %}
-  {% set cta_content = caller('cta') %}
-  {% set has_cta = cta_content|trim|length > 0 %}
-  {% set has_list = caller('list_item_1')|trim|length > 0 %}
-  {% set image_content = caller('image') %}
-  {% set max_list_items = 7 %}
-
-  {% set list_item_tick_style=list_item_tick_style|trim|lower %}
-  {% if list_item_tick_style|length > 0 and list_item_tick_style not in ['bullet', 'tick', 'number'] %}
-    {% set list_item_tick_style = '' %}
-  {% endif %}
+  {#- Normalise & validate padding -#}
+  {%- set padding = padding | string | trim | lower -%}
+  {%- if padding not in ['deep', 'shallow', 'default'] -%}{%- set padding = 'default' -%}{%- endif -%}
+  {%- set padding_classes = 'p-section--' ~ padding -%}
+  {%- if padding == 'default' -%}{%- set padding_classes = 'p-section' -%}{%- endif -%}
 
-  {% if list_item_tick_style == "bullet" %}
-    {% set list_item_tick_class = "has-bullet" %}
-  {% elif list_item_tick_style == "tick" %}
-    {% set list_item_tick_class = "is-ticked" %}
-  {% endif %}
+  {#- Normalise & validate top_rule_variant -#}
+  {%- set top_rule_variant = top_rule_variant | string | trim | lower -%}
+  {%- if top_rule_variant not in ['default', 'muted'] -%}{%- set top_rule_variant = 'default' -%}{%- endif -%}
 
-  {% set list_element_type = "ul" %}
-  {% if list_item_tick_style == "number" %}
-    {% set list_element_type = "ol" %}
-  {% endif %}
+  {#- Normalise & validate media config -#}
+  {%- set media_type = (media.get('type', 'image') | string | trim | lower) -%}
+  {%- if media_type not in ['image', 'video'] -%}{%- set media_type = 'image' -%}{%- endif -%}
 
-  {#-
-    Construct list of list items using caller in the top-level macro
-    The _text_column_contents macro will not have access to the caller block, so we need to extract the list items here.
-  -#}
-  {% set list_items = [] %}
-  {% if has_list %}
-    {% for list_item_index in range(1, max_list_items + 1) %}
-      {% set list_item_content = caller('list_item_' + list_item_index|string) %}
-      {% set has_list_item_content = list_item_content|trim|length > 0 %}
-      {% if has_list_item_content %}
-        {{ list_items.append(list_item_content) or ""}}
-      {% endif %}
-    {% endfor %}
-  {% endif %}
+  {%- set media_ratio = media.get('ratio', {}) -%}
+  {%- set media_ratio_large = (media_ratio.get('large', '3-2') | string | trim | lower) -%}
+  {%- set valid_large_ratios = ['16-9', '3-2', '1-1', '2-3', 'auto-height'] -%}
+  {%- if media_ratio_large not in valid_large_ratios -%}{%- set media_ratio_large = '3-2' -%}{%- endif -%}
 
-  {%- macro _text_column_contents(list_items) %}
-    {#- Mandatory title -#}
-    <div class="p-section--shallow">
-      <h2>{{ title_text }}</h2>
-    </div>
-
-    {%- if has_logo_section %}
-      {#- Optional logo section -#}
-      <div class="p-section--shallow">
-        <div class="u-fixed-width">
-        {{- logo_section_content -}}
-        </div>
-      </div>
-    {%- endif -%}
+  {%- set media_ratio_medium_small = (media_ratio.get('medium_small', '3-2') | string | trim | lower) -%}
+  {#- 'auto-height' is intentionally excluded — it requires side-by-side columns, but medium/small layouts stack -#}
+  {%- set valid_medium_small_ratios = ['16-9', '3-2', '1-1'] -%}
+  {%- if media_ratio_medium_small not in valid_medium_small_ratios -%}{%- set media_ratio_medium_small = '3-2' -%}{%- endif -%}
 
-    {%- if has_description %}
-      {#- Optional description -#}
-      <div class="p-section--shallow">
-        {{- description_content -}}
-      </div>
-    {%- endif -%}
+  {%- set media_fit = (media.get('fit', 'cover') | string | trim | lower) -%}
+  {%- if media_fit not in ['cover', 'contain'] -%}{%- set media_fit = 'cover' -%}{%- endif -%}
 
-    {%- if list_items|length > 0 %}
-      {#- Optional list -#}
-      <{{ list_element_type }} class="p-list--divided">
-       {% for list_item in list_items %}
-         <li class="p-list__item {{ list_item_tick_class }}">
-           {{- list_item -}}
-         </li>
-        {% endfor %}
-      </{{ list_element_type }}>
-    {%- endif -%}
+  {%- set media_attrs = media.get('attrs', {}) -%}
+  {%- set is_auto_height = (media_ratio_large == 'auto-height') -%}
 
-    {%- if has_cta %}
-      {#- Optional CTA block -#}
-      <div class="p-cta-block">
-        {{- cta_content -}}
-      </div>
-    {%- endif -%}
+  {#- Constrain items to the curated allow-list. Disallowed types are silently dropped. -#}
+  {%- set allowed_item_types = ['description', 'list', 'code-block', 'logo-block', 'cta-block'] -%}
+  {%- set filtered_items = items | selectattr('type', 'in', allowed_item_types) | list -%}
 
+  {%- macro _rich_list_image(ratio_large, ratio_medium_small, fit, attrs) %}
+    {%- set is_cover = (fit == 'cover') -%}
+    {#- The image-container CSS uses 'square' for the 1:1 ratio class, not '1-1'. -#}
+    {%- set ratio_large_class = 'square' if ratio_large == '1-1' else ratio_large -%}
+    {%- set ratio_medium_small_class = 'square' if ratio_medium_small == '1-1' else ratio_medium_small -%}
+    {%- set classes = 'p-image-container--' ~ ratio_large_class ~ '-on-large' -%}
+    {%- set classes = classes ~ ' p-image-container--' ~ ratio_medium_small_class ~ '-on-medium' -%}
+    {%- set classes = classes ~ ' p-image-container--' ~ ratio_medium_small_class ~ '-on-small' -%}
+    {%- if is_cover -%}{%- set classes = classes ~ ' is-cover' -%}{%- endif -%}
+    <div class="{{ classes }}">
+      <img class="p-image-container__image{%- if 'class' in attrs %} {{ attrs['class'] }}{%- endif %}"
+        {%- for attr, value in attrs.items() -%}
+          {%- if attr != 'class' %} {{ attr }}="{{ value }}"{%- endif -%}
+        {%- endfor -%}
+      />
+    </div>
   {%- endmacro -%}
 
-  {%- macro _image_column_contents() %}
-    {#- Mandatory image -#}
-    <div class="p-section--shallow">
-      {{- image_content -}}
+  {%- macro _rich_list_video(attrs) %}
+    <div class="u-embedded-media">
+      <iframe class="u-embedded-media__element{%- if 'class' in attrs %} {{ attrs['class'] }}{%- endif %}"
+        {%- for attr, value in attrs.items() -%}
+          {%- if attr != 'class' %} {{ attr }}="{{ value }}"{%- endif -%}
+        {%- endfor -%}
+      ></iframe>
     </div>
   {%- endmacro -%}
 
-  <div class="p-section">
-    <div class="grid-row--50-50-on-large">
-      <hr>
-      {% if not is_flipped -%}
-        <div class="grid-col">
-          {{- _text_column_contents(list_items) -}}
-        </div>
-        <div class="grid-col">
-          {{- _image_column_contents() -}}
-        </div>
+  {%- macro _media_column_contents(
+    media_type, media_ratio_large, media_ratio_medium_small, media_fit, media_attrs, is_auto_height
+  ) -%}
+    {%- if is_auto_height -%}
+      <div>
+    {%- else -%}
+      <div class="p-section--shallow">
+    {%- endif -%}
+      {%- if media_type == 'video' -%}
+        {{ _rich_list_video(media_attrs) }}
       {%- else -%}
-        {#- For flipped layout, place the image contents in the first column and the text in the second column -#}
-        <div class="grid-col">
-          {{- _image_column_contents() -}}
-        </div>
-        <div class="grid-col">
-          {{- _text_column_contents(list_items) -}}
-        </div>
+        {{ _rich_list_image(media_ratio_large, media_ratio_medium_small, media_fit, media_attrs) }}
       {%- endif -%}
     </div>
-  </div>
+  {%- endmacro -%}
 
+  {%- macro _content_column_contents(title, items) -%}
+    {{ basic_section_title(title) }}
+    {{ vf_basic_section_blocks(items=items) }}
+  {%- endmacro -%}
+
+<section class="{{ padding_classes }}{%- if 'class' in attrs %} {{ attrs['class'] }}{%- endif -%}"
+  {%- for attr, value in attrs.items() -%}
+    {%- if attr != 'class' %} {{ attr }}="{{ value }}"{%- endif -%}
+  {%- endfor -%}
+>
+  <div class="grid-row--50-50-on-large">
+    {{ vf_section_top_rule(top_rule_variant) }}
+    {%- if not is_flipped -%}
+      <div class="grid-col">{{ _content_column_contents(title, filtered_items) }}</div>
+      <div class="grid-col">{{ _media_column_contents(media_type, media_ratio_large, media_ratio_medium_small, media_fit, media_attrs, is_auto_height) }}</div>
+    {%- else -%}
+      <div class="grid-col">{{ _media_column_contents(media_type, media_ratio_large, media_ratio_medium_small, media_fit, media_attrs, is_auto_height) }}</div>
+      <div class="grid-col">{{ _content_column_contents(title, filtered_items) }}</div>
+    {%- endif -%}
+  </div>
+</section>
 {%- endmacro %}