vanilla-framework 4.45.0 → 4.48.0

package/package.json

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

package/scss/_base_icon-definitions.scss

@@ -1636,3 +1636,16 @@
 @mixin vf-icon-storage-volume-themed {
   @include vf-themed-icon($light-value: vf-icon-storage-volume-url($colors--light-theme--icon), $dark-value: vf-icon-storage-volume-url($colors--dark-theme--icon));
 }
+
+// circle-of-friends
+@function vf-icon-circle-of-friends-url($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='#{vf-url-friendly-color($color)}'  clip-path='url(%23a)'%3E%3Cpath d='M.81 7.36a1.92 1.92 0 1 1 3.799.572A1.92 1.92 0 0 1 .81 7.36M8.826 3.033a1.92 1.92 0 1 1 3.755.806 1.92 1.92 0 0 1-3.755-.806M7.04 12.585a4.68 4.68 0 0 1-3.19-2.432 2.76 2.76 0 0 1-1.64.202 6.25 6.25 0 0 0 4.498 3.77c.45.098.908.144 1.364.141a2.74 2.74 0 0 1-.562-1.605 5 5 0 0 1-.47-.076M8.394 12.193a1.92 1.92 0 0 1 3.754.805 1.92 1.92 0 1 1-3.754-.805M12.943 11.89a6.3 6.3 0 0 0 1.22-2.587 6.3 6.3 0 0 0-.905-4.782 2.77 2.77 0 0 1-1.08 1.265 4.7 4.7 0 0 1-.154 4.674c.45.37.77.87.919 1.43M2.56 4.892a2.75 2.75 0 0 1 1.603.41 4.68 4.68 0 0 1 3.77-2.015q.012-.218.057-.433c.088-.411.268-.795.525-1.124A6.31 6.31 0 0 0 2.56 4.892'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-circle-of-friends($color: $colors--light-theme--icon) {
+  background-image: vf-icon-circle-of-friends-url($color);
+}
+
+@mixin vf-icon-circle-of-friends-themed {
+  @include vf-themed-icon($light-value: vf-icon-circle-of-friends-url($colors--light-theme--icon), $dark-value: vf-icon-circle-of-friends-url($colors--dark-theme--icon));
+}

package/scss/_patterns_chip.scss

@@ -85,6 +85,7 @@
   @include vf-chips-caution;
   @include vf-chips-negative;
   @include vf-chips-information;
+  @include vf-chips-branded;
 }
 
 @mixin vf-chip-interactive(
@@ -273,3 +274,54 @@
     );
   }
 }
+
+@mixin vf-chips-branded {
+  .p-chip--branded {
+    @extend %vf-chip;
+    @extend %vf-button-dense-vertical-padding;
+
+    align-items: center;
+    background-color: $colors--theme--background-alt;
+    gap: $sph--x-small;
+    height: 1.5rem;
+    justify-content: center;
+    margin-bottom: $spv-nudge-compensation;
+    min-width: max-content;
+    padding-left: $sph--x-small;
+
+    @include vf-theme-dark; // Default to dark theme
+
+    // stylelint-disable selector-max-type -- Branded chip theming is based on theming of the document body.
+    // Apply light theme if the page or the chip component is dark
+    body.is-dark &,
+    &.is-dark {
+      @include vf-theme-light;
+    }
+
+    // Override to dark theme if the page or the chip component is light or paper
+    body.is-light &,
+    body.is-paper &,
+    &.is-light,
+    &.is-paper {
+      @include vf-theme-dark;
+    }
+    // stylelint-enable selector-max-type
+
+    .p-chip__value {
+      color: $colors--theme--text-default;
+      font-weight: $font-weight-medium;
+    }
+
+    & > .p-icon--circle-of-friends {
+      @include vf-icon-circle-of-friends-themed;
+      background-size: contain;
+      margin: 0;
+    }
+
+    &:has(> .p-icon--circle-of-friends:only-child) {
+      border-radius: 50%;
+      padding: 0;
+      width: 1.5rem;
+    }
+  }
+}

package/scss/_patterns_content-card.scss

@@ -0,0 +1,427 @@
+/*
+  @classreference
+  content-card:
+    Content card:
+      .p-content-card:
+        Main element of the content card component.
+      "&.p-content-card--2-cols":
+        Modifier for a 2-column width vertical layout. Applied ONLY to the parent .p-content-card.
+      "&.p-content-card--4-cols":
+        Modifier for a 4-column width horizontal layout. Applied ONLY to the parent .p-content-card.
+      "&.p-content-card--6-cols":
+        Modifier for a 6-column width horizontal layout. Applied ONLY to the parent .p-content-card.
+      "&.p-content-card__has-image":
+        State class applied to the parent when the card includes an image.
+      "&.p-content-card__has-desc":
+        State class applied to the parent when the card includes a description that appears on hover.
+    Links:
+      .p-content-card__overlay-link:
+        Invisible absolute link spanning the entire card to make it clickable.
+      .p-content-card__main-link:
+        The primary text link, typically wrapping the heading.
+      .p-content-card__author-link:
+        Interactive link for the author name.
+    Media:
+      .p-content-card__image-wrapper:
+        Container for the card's image. Styled contextually by parent modifiers.
+      .p-content-card__image:
+        The image element, maintaining a 16/9 aspect ratio. Styled contextually by parent modifiers.
+    Content:
+      .p-content-card__content:
+        Flex container wrapping the main body and footer of the card.
+      .p-content-card__body:
+        Grid container holding both the primary and hover content areas. Styled contextually by parent modifiers.
+      .p-content-card__primary-content:
+        The default visible content area (heading, author, date).
+      .p-content-card__hover-content:
+        The content area that slides up on hover (description).
+      .p-content-card__heading:
+        The card's title element. Styled contextually by parent modifiers.
+      .p-content-card__description:
+        The text description that appears on hover. Styled contextually by parent modifiers.
+      .p-content-card__author-and-date:
+        Container for the author and publication date. Styled contextually by parent modifiers.
+    Footer:
+      .p-content-card__footer-outer:
+        Outer container for the footer section. Styled contextually by parent modifiers.
+      .p-content-card__footer-inner:
+        Horizontally scrollable inner container for footer metadata (chips, icons).
+      .p-content-card__icon:
+        Icon element utilized within the footer.
+      .p-content-card__small:
+        Small text element utilized within the footer.
+*/
+
+@import 'settings';
+
+@mixin vf-p-content-card {
+  .p-content-card {
+    align-items: flex-start;
+    border: 1px solid var(--color-border-low-contrast, rgba(0, 0, 0, 0.1));
+    display: flex;
+    flex-direction: column;
+    height: 23.75rem; /* 380px */
+    justify-content: space-between;
+    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 */
+
+    @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 */
+      }
+
+      &.p-content-card--4-cols:not(.has-image),
+      &.p-content-card--6-cols:not(.has-image) {
+        height: 12rem; /* 192px - Fixed height */
+      }
+
+      &.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 */
+      }
+    }
+
+    @media screen and ($breakpoint-small <= width < $breakpoint-large) {
+      &.p-content-card--2-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 */
+      }
+
+      &.p-content-card--2-cols:not(.has-image) {
+        height: 10rem; /* 160px - Fixed height */
+      }
+
+      &.p-content-card--2-cols:not(.has-image) .p-rule--muted {
+        margin-left: -$sp-medium;
+        margin-right: -$sp-medium;
+        width: calc(100% + $sp-large); /* 32px */
+      }
+    }
+
+    @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 */
+      }
+    }
+
+    &__overlay-link {
+      inset: 0;
+      position: absolute;
+      z-index: 1;
+    }
+
+    &__main-link {
+      -webkit-box-orient: vertical;
+      color: inherit !important;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      outline: none !important;
+      overflow: hidden;
+      text-decoration: none !important;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:visited {
+        color: inherit !important;
+        text-decoration: none !important;
+      }
+    }
+
+    &__author-link {
+      pointer-events: auto;
+      position: relative;
+      z-index: 2;
+
+      &:focus-visible {
+        border-radius: 2px;
+        outline: 2px solid var(--color-focus, #0066cc);
+        outline-offset: 2px;
+      }
+    }
+
+    &__heading {
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      line-height: 1.5;
+      margin-top: 0 !important;
+      max-height: 4.5em;
+      max-width: none;
+      overflow: hidden;
+      padding-top: 0 !important;
+      text-wrap: wrap;
+      width: 100%;
+
+      @media screen and (width >= $breakpoint-large) {
+        .p-content-card--6-cols & {
+          margin-top: -0.45rem !important;
+        }
+      }
+    }
+
+    &__content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      height: 100%;
+      justify-content: space-between;
+      min-width: 0;
+      width: 100%;
+    }
+
+    &__body {
+      align-items: flex-start;
+      align-self: stretch;
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr;
+      overflow: hidden;
+      padding: 0 $sp-medium; /* 16px */
+
+      @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 & {
+          padding: 0;
+        }
+      }
+    }
+
+    &__primary-content,
+    &__hover-content {
+      display: flex;
+      flex-direction: column;
+      grid-area: 1 / 1 / 2 / 2;
+      transition:
+        transform 0.4s ease-in-out,
+        opacity 0.4s ease-in-out;
+    }
+
+    &__primary-content {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &__hover-content {
+      opacity: 0;
+      transform: translateY(150px);
+    }
+
+    &__description {
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      line-clamp: 4;
+      margin: 0;
+      overflow: hidden;
+
+      @media screen and (width >= $breakpoint-large) {
+        .p-content-card--6-cols & {
+          margin-top: -0.45rem !important;
+        }
+      }
+    }
+
+    &__footer-outer {
+      align-items: center;
+      align-self: stretch;
+      display: flex;
+      height: 2.25rem; /* Fixed height: 36px */
+      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 & {
+          padding: 0 0 var(--spacing-vertical-small, $sp-small) 0;
+        }
+      }
+    }
+
+    &__footer-inner {
+      align-items: center;
+      display: flex;
+      gap: $sp-small; /* 8px */
+      height: 1.75rem; /* 28px */
+      mask-image: linear-gradient(to right, black 85%, transparent 100%);
+      -ms-overflow-style: none;
+      overflow-x: auto;
+      pointer-events: auto;
+      position: relative;
+      scrollbar-width: none;
+      width: 100%;
+      z-index: 2;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      > * {
+        flex-shrink: 0;
+        white-space: nowrap;
+      }
+
+      .p-chip--information {
+        margin: 0 1.5625rem 0 0; /* 25px -> 1.5625rem */
+        vertical-align: baseline;
+      }
+
+      .u-has-icon {
+        align-items: center;
+        display: flex;
+        gap: $sp-x-small; /* 4px */
+
+        .p-content-card__icon[class*='p-icon--'],
+        .p-content-card__small {
+          margin: 0;
+        }
+
+        .p-content-card__small {
+          line-height: normal !important;
+        }
+      }
+    }
+
+    &__image {
+      aspect-ratio: 16/9;
+      display: block;
+      flex-shrink: 0;
+      height: 9.984375rem; /* 159.75px */
+      object-fit: cover;
+
+      @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 */
+        }
+      }
+
+      @media screen and (width >= $breakpoint-large) {
+        .p-content-card--6-cols & {
+          height: 9.984375rem; /* 159.75px */
+        }
+      }
+    }
+
+    &__image-wrapper {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-vertical-image-container, 0.625rem); /* 10px -> 0.625rem */
+      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 & {
+          align-self: stretch;
+          flex: 0 0 auto;
+        }
+      }
+    }
+
+    &__author-and-date {
+      align-items: flex-start;
+      align-self: stretch;
+      display: flex;
+
+      > :first-child {
+        margin-bottom: 0 !important;
+      }
+
+      @media screen and ($breakpoint-small <= width < $breakpoint-large) {
+        .p-content-card--2-cols &,
+        .p-content-card--6-cols & {
+          display: none;
+        }
+      }
+
+      @media screen and (width >= $breakpoint-large) {
+        .p-content-card--6-cols & {
+          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 */
+        }
+      }
+    }
+
+    &: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);
+        }
+      }
+    }
+  }
+}

package/scss/_patterns_icons.scss

@@ -31,6 +31,7 @@
   @include vf-p-icon-spinner;
   @include vf-p-icon-show;
   @include vf-p-icon-hide;
+  @include vf-p-icon-circle-of-friends;
 
   // social icons
   @include vf-p-icon-facebook;
@@ -2090,4 +2091,13 @@
   }
 }
 
-// **Base and Pattern mixins accurate as of February 2026**
+// ICONS ADDED IN MARCH 2026
+
+@mixin vf-p-icon-circle-of-friends {
+  .p-icon--circle-of-friends {
+    @extend %icon;
+    @include vf-icon-circle-of-friends-themed;
+  }
+}
+
+// **Base and Pattern mixins accurate as of March 2026**

package/scss/_settings_font.scss

@@ -15,6 +15,7 @@ $base-font-sizes: (
 // TODO removeme? This variable is not used in Vanilla - worth seeing if it's used downstream.
 $font-weight-thin: 300 !default;
 $font-weight-regular-text: 400 !default;
+$font-weight-medium: 500 !default;
 $font-weight-bold: 550 !default;
 $font-weight-display-heading: 100 !default;
 

package/scss/_vanilla.scss

@@ -12,6 +12,7 @@
 @import 'patterns_card';
 @import 'patterns_chip';
 @import 'patterns_code-snippet';
+@import 'patterns_content-card';
 @import 'patterns_contextual-menu';
 @import 'patterns_cta';
 @import 'patterns_data-spotlight';
@@ -115,6 +116,7 @@
   @include vf-p-card;
   @include vf-p-chip;
   @include vf-p-code-snippet;
+  @include vf-p-content-card;
   @include vf-p-contextual-menu;
   @include vf-p-cta-block;
   @include vf-p-data-spotlight;
@@ -132,6 +134,7 @@
   @include vf-p-section;
   @include vf-p-form-password-toggle;
   @include vf-p-icons;
+  @include vf-p-icon-topic;
   @include vf-p-image;
   @include vf-p-links;
   @include vf-p-list-tree;

package/templates/_macros/vf_card.jinja

@@ -0,0 +1,101 @@
+{#
+  All Params
+  columns: Grid column span for the card. Options are 2, 4, 6. Default is 2.
+  heading: H4 title text. Truncated at 3 lines. Required.
+  link: Link to referenced item. Makes the entire card clickable. Required.
+  image: Dictionary containing 'src' and 'alt' for the 16:9 image. Required for col-6.
+  author: Optional string for the author's name. Hidden if no image is provided.
+  date: Optional string for the publication date. Hidden if no image is provided.
+  footer: Dictionary containing 'resource_type' (icon and text) and 'content_type' (read-only chip).
+  description: Optional text that slides up on hover, truncating at 4 lines.
+
+  Variants:
+  col-2: 2-column width card layout (Vertical)
+    Params: columns (2), heading (req), link (req), image (opt), author (opt, hidden if no image), date (opt, hidden if no image), footer (opt), description (opt)
+  
+  col-4: 4-column width card layout (Horizontal)
+    Params: columns (4), heading (req), link (req), image (opt), footer (opt), description (opt)
+  
+  col-6: 6-column width card layout (Horizontal)
+    Params: columns (6), heading (req), link (req), image (req), author (opt), date (opt), footer (opt), description (opt)
+#}
+
+{%- 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 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 -%}
+
+    {%- 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>
+                
+                {%- 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> 
+                        {%- endif -%}
+                    </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 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.content_type %}
+                        <span class="p-chip--information is-readonly">{{ footer.content_type}}</span>
+                    {%- endif -%}
+                </div>
+            </div>
+        </div>
+        {%- endif -%}
+    </div>
+</div>
+{%- endmacro -%}

package/templates/_macros/vf_cta-section.jinja

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