vanilla-framework 4.51.0 → 4.55.0

package/package.json

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

package/scss/_layouts_full-width.scss

@@ -19,11 +19,10 @@
     }
 
     .l-full-width__sidebar {
-      background: $colors--theme--background-alt;
-
       // height of top navigation, as padding applied to .p-navigation__link + line-heigh of the anchor text inside
       $navigation-top-height: $spv--large * 2 + map-get($settings-text-default, line-height);
 
+      background: $colors--theme--background-alt;
       height: calc(100% - $navigation-top-height); // height of document reduced by height of top nav
       min-height: calc(100dvh - $navigation-top-height);
       position: absolute;

package/scss/_patterns_content-card.scss

@@ -10,10 +10,14 @@
         Modifier for a 4-column width horizontal layout. Applied ONLY to the parent .p-content-card.
       "&.p-content-card--cols-6":
         Modifier for a 6-column width horizontal layout. Applied ONLY to the parent .p-content-card.
+      "&.p-content-card--cols-8":
+        Modifier for an 8-column (full-width) layout with 50/50 content and image split on desktop. Applied ONLY to the parent .p-content-card. Image is required.
+      "&.p-content-card--image-top":
+        Modifier that forces the image to appear above the content on all breakpoints and all column variants, overriding the default horizontal and grid layouts.
       "&.has-image":
         State class applied to the parent when the card includes an image.
       "&.has-desc":
-        State class applied to the parent when the card includes a description that appears on hover.
+        State class applied to the parent when the card includes a description. For col-2/4/6 the description slides up on hover; for col-8 it is always visible below the heading.
     Links:
       .p-content-card__overlay-link:
         Invisible absolute link spanning the entire card to make it clickable.
@@ -78,9 +82,10 @@ $card-author-padding-bottom: $sp-small;
 
 $card-fallback-spacing-large: $sp-x-large;
 $card-fallback-image-gap: $sp-small + $sp-xx-small;
+$card-height-8col: 22rem;
 
 @mixin mq-min($breakpoint) {
-  @media screen and (width >= $breakpoint) {
+  @media screen and (width >=$breakpoint) {
     @content;
   }
 }
@@ -92,7 +97,7 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
 }
 
 @mixin mq-between($min, $max) {
-  @media screen and ($min <= width < $max) {
+  @media screen and ($min <=width < $max) {
     @content;
   }
 }
@@ -111,18 +116,24 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
 
     /* 2-Column Spanning */
     &--2 {
-      grid-column: 1 / -1; /* Mobile */
+      grid-column: 1 / -1;
+
+      /* Mobile */
       @include mq-between($breakpoint-small, $breakpoint-large) {
-        grid-column: span 2; /* Medium */
+        grid-column: span 2;
+        /* Medium */
       }
+
       @include mq-min($breakpoint-large) {
-        grid-column: span 2; /* Desktop */
+        grid-column: span 2;
+        /* Desktop */
       }
     }
 
     /* 4-Column Spanning */
     &--4 {
       grid-column: 1 / -1;
+
       @include mq-min($breakpoint-large) {
         grid-column: span 4;
       }
@@ -131,10 +142,16 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
     /* 6-Column Spanning */
     &--6 {
       grid-column: 1 / -1;
+
       @include mq-min($breakpoint-large) {
         grid-column: span 6;
       }
     }
+
+    /* 8-Column Spanning (full width) */
+    &--8 {
+      grid-column: 1 / -1;
+    }
   }
 
   /* =========================================
@@ -168,7 +185,8 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
       &:not(:has(.p-content-card__footer-outer)) {
         height: auto;
         min-height: 0;
-        padding-bottom: var(--spacing-vertical-large, $sp-medium); /* Keeps spacing balanced */
+        padding-bottom: var(--spacing-vertical-large, $sp-medium);
+        /* Keeps spacing balanced */
       }
     }
 
@@ -221,6 +239,16 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
       }
     }
 
+    /* 8-Column: Desktop horizontal grid layout */
+    @include mq-min($breakpoint-large) {
+      &.p-content-card--cols-8.has-image {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        min-height: $card-height-8col;
+        padding: 0;
+      }
+    }
+
     &__overlay-link {
       inset: 0;
       position: absolute;
@@ -242,6 +270,18 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
         line-clamp: 2;
       }
 
+      .p-content-card--cols-8 & {
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+      }
+
+      @include mq-between($breakpoint-small, $breakpoint-large) {
+        .p-content-card--cols-8 & {
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+        }
+      }
+
       &:hover,
       &:focus,
       &:active,
@@ -268,7 +308,6 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
       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;
@@ -283,11 +322,25 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
         max-height: 3em;
       }
 
+      .p-content-card--cols-8 & {
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+        max-height: 4.5em;
+      }
+
       @include mq-min($breakpoint-large) {
         .p-content-card--cols-6 & {
           margin-top: $card-nudge-negative !important;
         }
       }
+
+      @include mq-between($breakpoint-small, $breakpoint-large) {
+        .p-content-card--cols-8 & {
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          max-height: 3em;
+        }
+      }
     }
 
     &__content {
@@ -298,6 +351,12 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
       justify-content: space-between;
       min-width: 0;
       width: 100%;
+
+      @include mq-min($breakpoint-large) {
+        .p-content-card--cols-8 & {
+          grid-column: 1;
+        }
+      }
     }
 
     &__body {
@@ -315,6 +374,20 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
           padding: 0;
         }
       }
+
+      .p-content-card--cols-8 & {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        padding: 0 $sp-medium;
+      }
+
+      @include mq-min($breakpoint-large) {
+        .p-content-card--cols-8 & {
+          align-self: stretch;
+          padding: $sp-medium $sp-medium 0 $sp-medium;
+        }
+      }
     }
 
     &__primary-content,
@@ -335,6 +408,13 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
     &__hover-content {
       opacity: 0;
       transform: translateY(150px);
+
+      .p-content-card--cols-8 & {
+        flex: 1;
+        min-height: 0;
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
 
     &__description {
@@ -350,6 +430,19 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
         line-clamp: 2;
       }
 
+      .p-content-card--cols-8 & {
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+      }
+
+      @include mq-max($breakpoint-large) {
+        .p-content-card--cols-8 & {
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          margin-bottom: 1rem;
+        }
+      }
+
       @include mq-min($breakpoint-large) {
         .p-content-card--cols-6 & {
           margin-top: $card-nudge-negative !important;
@@ -359,9 +452,13 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
 
     &__footer-container {
       /* Structural grouping element.
-        Because the parent (.p-content-card__content) uses flexbox space-between, 
+        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.
       */
+
+      .p-content-card--cols-8 & {
+        width: 100%;
+      }
     }
 
     &__footer-outer {
@@ -444,6 +541,11 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
         .p-content-card--cols-6 & {
           height: $card-image-height-horizontal-large;
         }
+
+        .p-content-card--cols-8 & {
+          aspect-ratio: auto;
+          height: 100%;
+        }
       }
     }
 
@@ -457,6 +559,17 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
 
       width: 100%;
 
+      @include mq-min($breakpoint-large) {
+        .p-content-card--cols-8 & {
+          grid-column: 2;
+          grid-row: 1 / -1;
+          height: 100%;
+          padding: 0.5rem;
+          padding-bottom: 0;
+          width: 100%;
+        }
+      }
+
       @include mq-min($breakpoint-small) {
         .p-content-card--cols-4 &,
         .p-content-card--cols-6 & {
@@ -465,6 +578,12 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
           width: $card-image-width;
         }
       }
+
+      @include mq-max($breakpoint-large) {
+        .p-content-card--cols-8 & {
+          padding: 0rem 0.5rem 1rem 0.5rem;
+        }
+      }
     }
 
     &__author-and-date {
@@ -508,14 +627,14 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
     }
 
     @include mq-min($breakpoint-large) {
-      &.has-desc:hover .p-content-card__primary-content,
-      &.has-desc:focus-within .p-content-card__primary-content {
+      &.has-desc:not(.p-content-card--cols-8):hover .p-content-card__primary-content,
+      &.has-desc:not(.p-content-card--cols-8):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 {
+      &.has-desc:not(.p-content-card--cols-8):hover .p-content-card__hover-content,
+      &.has-desc:not(.p-content-card--cols-8):focus-within .p-content-card__hover-content {
         opacity: 1;
         transform: translateY(0);
       }
@@ -525,5 +644,77 @@ $card-fallback-image-gap: $sp-small + $sp-xx-small;
       outline: 3px solid var(--color-focus, #0066cc);
       outline-offset: 2px;
     }
+
+    /* Forces image above content on all breakpoints,
+       overriding horizontal and grid layouts.*/
+    @include mq-min($breakpoint-small) {
+      &.p-content-card--image-top.p-content-card--cols-4,
+      &.p-content-card--image-top.p-content-card--cols-6 {
+        flex-direction: column;
+        height: auto;
+        min-height: $card-height-vertical;
+        padding: 0;
+        padding-top: var(--spacing-vertical-large, $sp-medium);
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4 .p-content-card__image-wrapper,
+      &.p-content-card--image-top.p-content-card--cols-6 .p-content-card__image-wrapper {
+        flex: unset;
+        width: 100%;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4 .p-content-card__image,
+      &.p-content-card--image-top.p-content-card--cols-6 .p-content-card__image {
+        height: auto;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4 .p-content-card__body,
+      &.p-content-card--image-top.p-content-card--cols-6 .p-content-card__body {
+        padding: 0 $sp-medium;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4 .p-content-card__footer-outer,
+      &.p-content-card--image-top.p-content-card--cols-6 .p-content-card__footer-outer {
+        padding: 0 $sp-medium var(--spacing-vertical-small, $sp-small) $sp-medium;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4:not(.has-image),
+      &.p-content-card--image-top.p-content-card--cols-6:not(.has-image) {
+        height: $card-height-default;
+        min-height: $card-height-default;
+      }
+    }
+
+    @include mq-min($breakpoint-large) {
+      &.p-content-card--image-top.p-content-card--cols-6 {
+        height: auto;
+        min-height: $card-height-vertical;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-8.has-image {
+        display: flex;
+        flex-direction: column;
+        min-height: $card-height-8col;
+        padding-top: 0;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-8.has-image .p-content-card__image-wrapper {
+        grid-column: unset;
+        grid-row: unset;
+        height: auto;
+        padding: 0;
+        padding-bottom: var(--spacing-vertical-large, $sp-medium);
+        width: 100%;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-8.has-image .p-content-card__image {
+        aspect-ratio: 16/9;
+        height: auto;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-8.has-image .p-content-card__content {
+        grid-column: unset;
+      }
+    }
   }
 }

package/scss/_patterns_lists.scss

@@ -262,6 +262,9 @@ $list-step-bullet-margin: $sph--x-large;
 
       display: grid;
 
+      // --columns is set in the container queries above
+      grid-template-columns: repeat(var(--columns), 1fr);
+
       @container (width >= #{$horizontal-list-section-medium-content-width}) {
         grid-gap: 0 map-get($grid-gutter-widths, default);
       }
@@ -282,9 +285,6 @@ $list-step-bullet-margin: $sph--x-large;
         }
       }
 
-      // --columns is set in the container queries above
-      grid-template-columns: repeat(var(--columns), 1fr);
-
       .p-list__item {
         @extend %vf-list-item;
         @include vf-list-item-icon-divisor-offset;

package/scss/_patterns_suru.scss

@@ -82,13 +82,13 @@
     // same as %section-padding--default
     padding-bottom: $spv--strip-regular * 0.5;
 
+    // padding top based on p-section--hero
+    padding-top: $spv--large;
+
     @media (min-width: $breakpoint-large) {
       padding-bottom: $spv--strip-regular;
     }
 
-    // padding top based on p-section--hero
-    padding-top: $spv--large;
-
     // on large screens, same as %section-padding--shallow
     @media (min-width: $breakpoint-large) {
       padding-top: $spv--x-large;

package/templates/_macros/vf_card.jinja

@@ -1,36 +1,43 @@
 {#
   All Params
-  columns: Grid column span for the card. Options are 2, 4, 6. Default is 2.
+  columns: Grid column span for the card. Options are 2, 4, 6, 8. 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.
+  image: Dictionary containing 'src' and 'alt' for the 16:9 image. Required for col-6 and col-8.
   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.
+  description: Optional text. For col-2/4/6 slides up on hover (4 lines; 2 for col-6). For col-8 always visible below the heading (3 lines desktop/tablet, 2 lines mobile).
 
   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)
+
+  col-8: 8-column (full-width) card layout (50/50 horizontal on desktop, vertical stack on mobile/tablet)
+    Heading uses h4 with p-heading--1 styling. Image appears on the right on desktop, above heading on mobile/tablet.
+    Params: columns (8), 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) -%}
+{%- macro vf_card(columns="2", link=None, heading=None, image=None, author=None, date=None, footer=None, description=None, stacked_image=False) -%}
 
 {%- 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 '' -%}
+{%- set heading_extra_class = 'p-heading--1 ' if col_str == '8' else '' -%}
+{%- set stacked_image_class = 'p-content-card--image-top' if stacked_image else '' -%}
+{%- set content_types = [footer.content_type] if footer.content_type is string else footer.content_type -%}
 
 <div class="p-content-card-wrapper p-content-card-wrapper--{{ col_str }}">
-    
-    <div class="p-content-card {{ layout }} {{ img_class }} {{ has_desc }}">
-        
+
+    <div class="p-content-card {{ layout }} {{ img_class }} {{ has_desc }} {{ stacked_image_class }}">
+
         {%- if link -%}
             <a href="{{ link }}" class="p-content-card__overlay-link" tabindex="-1" aria-hidden="true"></a>
         {%- endif -%}
@@ -43,16 +50,16 @@
 
         <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">
+                    <h4 class="{{ heading_extra_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>
@@ -72,7 +79,7 @@
                 {%- endif -%}
 
             </div>
-            
+
             {%- if footer -%}
             <div class="p-content-card__footer-container">
                 <hr class="p-rule--muted">
@@ -86,7 +93,9 @@
                         {%- endif -%}
 
                         {%- if footer.content_type %}
-                            <span class="p-chip--information is-readonly">{{ footer.content_type }}</span>
+                            {%- for type in content_types -%}
+                                <span class="p-chip--information u-no-margin--right is-readonly">{{ type }}</span>
+                            {%- endfor -%}
                         {%- endif -%}
                     </div>
                 </div>
@@ -95,4 +104,5 @@
         </div>
     </div>
 </div>
+
 {%- endmacro -%}

package/templates/_macros/vf_equal-heights.jinja

@@ -66,6 +66,15 @@
     {%- if has_two_top_cols -%}
       </div>
     {%- endif -%}
+    {%- if has_cta -%}
+      <div class="grid-row">
+        <div class="grid-col-4 grid-col-medium-2 grid-col-start-large-5">
+          <p>
+            {{- cta_content -}}
+          </p>
+        </div>
+      </div>
+    {%- endif -%}
     </div>
 
     <div class="grid-row">
@@ -80,15 +89,5 @@
         ) }}
       </div>
     </div>
-    {%- if has_cta -%}
-      <div class="grid-row">
-        <hr class="p-rule--muted">
-        <div class="grid-col-4 grid-col-medium-2 grid-col-start-large-5 grid-col-start-medium-3">
-          <p>
-            {{- cta_content -}}
-          </p>
-        </div>
-      </div>
-    {%- endif -%}
   </div>
 {%- endmacro -%}

package/templates/_macros/vf_tiered-list.jinja

@@ -4,16 +4,20 @@
 # is_list_full_width_on_tablet: whether list title/description each have their
 #   own row on tablet vs. 50/50 split between title/description
 # padding: Type of padding to apply. Options are "deep", "shallow", "default". Default is "default".
+# top_rule_variant: Variant of the horizontal rule rendered at the top of the pattern.
+#   Options are "default", "muted", "highlighted", "none". Default is "default".
 # Slots
 # title: top-level title element
 # description: top-level description element
 # list_item_title_[1-25]: title element of each child list item
 # list_item_description_[1-25]: description element of each child list item
 # cta: CTA block element
+{% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}
 {% macro vf_tiered_list(
   padding="default",
   is_description_full_width_on_desktop=true,
-  is_list_full_width_on_tablet=true) -%}
+  is_list_full_width_on_tablet=true,
+  top_rule_variant="default") -%}
   {%- set title_content = caller('title') -%}
   {%- set description_content = caller('description') -%}
   {%- set has_description = description_content|trim|length > 0 -%}
@@ -30,7 +34,7 @@
   {%- endif -%}
 
   <div class="{{ padding_classes }} u-fixed-width">
-    <hr class="p-rule">
+    {{ vf_section_top_rule(top_rule_variant) }}
     <div class="p-section--shallow">
       {% if has_description == true -%}
         {%- if is_description_full_width_on_desktop == true -%}
@@ -54,6 +58,15 @@
             </div>
           </div>
         {%- endif -%}
+        {% if has_cta == true -%}
+          <div class="grid-row">
+            <div class="grid-col-4 grid-col-start-large-5">
+              <p>
+                {{ cta_content }}
+              </p>
+            </div>
+          </div>
+        {%- endif %}
       {%- else -%}
         <div class="u-fixed-width">
           {{ title_content }}
@@ -65,9 +78,6 @@
       When there is a CTA, we use shallow spacing to space the list away from the CTA.
       When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space.
     -#}
-    {%- if has_cta -%}
-      <div class="p-section--shallow">
-      {%- endif -%}
       {%- for number in range(1, 25) -%}
         {%- set list_item_title_content = caller('list_item_title_' + number|string) -%}
         {%- set has_title_content = list_item_title_content|trim|length > 0 -%}
@@ -114,19 +124,5 @@
           {%- endif -%}
         {%- endif -%}
       {% endfor %}
-      {%- if has_cta -%}
-      </div>
-    {%- endif -%}
-
-    {% if has_cta == true -%}
-      <div class="grid-row">
-        <hr class="p-rule--muted">
-        <div class="grid-col-4 grid-col-start-large-5">
-          <p>
-            {{ cta_content }}
-          </p>
-        </div>
-      </div>
-    {%- endif %}
   </div>
 {%- endmacro %}

package/templates/static/js/example.js

@@ -67,7 +67,7 @@
       // if it's a demo, use local build.css for better QA, otherwise use latest published Vanilla
       /demos\.haus$/.test(window.location.host)
         ? `${window.location.origin}/static/build/css/build.css`
-        : 'https://assets.ubuntu.com/v1/vanilla_framework_version_' + VANILLA_VERSION.replaceAll('.', '_') + '_min.css',
+        : 'https://assets.ubuntu.com/v1/vanilla_framework_version_' + VANILLA_VERSION + '.min.css',
       // link to example stylesheet (to set margin on body)
       'https://assets.ubuntu.com/v1/4653d9ba-example.css',
     ],