vanilla-framework 4.48.0 → 4.50.0

package/package.json

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

package/scss/_base_icon-definitions.scss

@@ -1649,3 +1649,174 @@
 @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));
 }
+
+// ICONS ADDED IN APRIL 2026 v4.49.0
+
+// devtools
+@function vf-icon-devtools-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%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M10.414 3.469 14.04 8l-3.625 4.531 1.172.938L15.96 8l-4.375-5.469zM.04 8l4.374 5.469 1.172-.938L1.96 8l3.625-4.531-1.172-.938z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-devtools($color: $colors--light-theme--icon) {
+  background-image: vf-icon-devtools-url($color);
+}
+
+@mixin vf-icon-devtools-themed {
+  @include vf-themed-icon($light-value: vf-icon-devtools-url($colors--light-theme--icon), $dark-value: vf-icon-devtools-url($colors--dark-theme--icon));
+}
+
+// devtools-off
+@function vf-icon-devtools-off-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%3Cpath fill='#{vf-url-friendly-color($color)}'  d='m14.78 2.28-1.886 1.886L15.96 8l-4.375 5.469-1.172-.938L14.04 8l-2.213-2.767L2.28 14.78l-1.06-1.06 12.5-12.5zM5.586 3.469 1.96 8l1.323 1.654-1.067 1.068L.039 8l4.375-5.469z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-devtools-off($color: $colors--light-theme--icon) {
+  background-image: vf-icon-devtools-off-url($color);
+}
+
+@mixin vf-icon-devtools-off-themed {
+  @include vf-themed-icon($light-value: vf-icon-devtools-off-url($colors--light-theme--icon), $dark-value: vf-icon-devtools-off-url($colors--dark-theme--icon));
+}
+
+// keyboard
+@function vf-icon-keyboard-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%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M5.5 10a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5zM12.5 7.5a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM10.25 7.5a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM8 7.5a.5.5 0 0 0-.5.5v.5A.5.5 0 0 0 8 9h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM5.5 7.5A.5.5 0 0 0 5 8v.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM3 7.5a.5.5 0 0 0-.5.5v.5A.5.5 0 0 0 3 9h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM12.5 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-.5A.5.5 0 0 0 13 5zM10.25 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5zM8 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5A.5.5 0 0 0 9 6v-.5a.5.5 0 0 0-.5-.5zM5.5 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 .5-.5v-.5A.5.5 0 0 0 6 5zM3 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5A.5.5 0 0 0 4 6v-.5a.5.5 0 0 0-.5-.5z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 10.5h-13v-9h13z' clip-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-keyboard($color: $colors--light-theme--icon) {
+  background-image: vf-icon-keyboard-url($color);
+}
+
+@mixin vf-icon-keyboard-themed {
+  @include vf-themed-icon($light-value: vf-icon-keyboard-url($colors--light-theme--icon), $dark-value: vf-icon-keyboard-url($colors--dark-theme--icon));
+}
+
+// keyboard-off
+@function vf-icon-keyboard-off-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='M12.5 7.5a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5z'/%3E%3Cpath fill-rule='evenodd' d='m.97 14.47 1.06 1.06L3.56 14H14.5a1.5 1.5 0 0 0 1.5-1.5v-9a1.5 1.5 0 0 0-.682-1.258l.712-.712L14.97.47zM14.5 3.5v9H5.06l1-1h4.44a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5H7.56l2.27-2.27a.5.5 0 0 0-.08.27v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5h-.5c-.099 0-.19.03-.269.08L12 5.56V6a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-.5A.5.5 0 0 0 13 5h-.44l1.5-1.5z' clip-rule='evenodd'/%3E%3Cpath d='M1.5 2A1.5 1.5 0 0 0 0 3.5v9c0 .27.072.523.197.742L1.5 11.94V3.5h8.44l1.5-1.5z'/%3E%3Cpath d='M3 7.5a.5.5 0 0 0-.5.5v.5A.5.5 0 0 0 3 9h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM5.5 7.5A.5.5 0 0 0 5 8v.44l.94-.94zM5.5 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 .5-.5v-.5A.5.5 0 0 0 6 5zM3 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5A.5.5 0 0 0 4 6v-.5a.5.5 0 0 0-.5-.5zM8 5a.5.5 0 0 0-.5.5v.44L8.44 5z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M16 0H0v16h16z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-keyboard-off($color: $colors--light-theme--icon) {
+  background-image: vf-icon-keyboard-off-url($color);
+}
+
+@mixin vf-icon-keyboard-off-themed {
+  @include vf-themed-icon($light-value: vf-icon-keyboard-off-url($colors--light-theme--icon), $dark-value: vf-icon-keyboard-off-url($colors--dark-theme--icon));
+}
+
+// resize
+@function vf-icon-resize-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%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M2.5 15H1v-1.5h1.5zM5.375 15h-1.75v-1.5h1.75zM8.875 15h-1.75v-1.5h1.75z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M5.75 2.5H3.56l9.94 9.94v-2.19H15V15h-4.75v-1.5h2.19L2.5 3.56v2.19H1V1h4.75zM2.5 12.375H1v-1.75h1.5z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M2.5 8.875H1v-1.75h1.5zM15 8.875h-1.5v-1.75H15zM15 5.375h-1.5v-1.75H15zM8.875 2.5h-1.75V1h1.75zM12.375 2.5h-1.75V1h1.75zM15 2.5h-1.5V1H15z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-resize($color: $colors--light-theme--icon) {
+  background-image: vf-icon-resize-url($color);
+}
+
+@mixin vf-icon-resize-themed {
+  @include vf-themed-icon($light-value: vf-icon-resize-url($colors--light-theme--icon), $dark-value: vf-icon-resize-url($colors--dark-theme--icon));
+}
+
+// resize-off
+@function vf-icon-resize-off-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='m16.03 1.53-2.095 2.095H15v1.75h-1.5V4.061L9.31 8.25l4.19 4.19v-2.19H15V15h-4.75v-1.5h2.19L8.25 9.31 4.06 13.5h1.315V15h-1.75v-1.065L2.03 15.53.97 14.47l14-14z'/%3E%3Cpath d='M8.875 15h-1.75v-1.5h1.75zM2.5 10.94l-1.436 1.435H1v-1.75h1.5zM2.5 8.875H1v-1.75h1.5zM15 8.875h-1.5v-1.75H15zM5.75 2.5H3.56l3.69 3.69-1.06 1.06L2.5 3.56v2.19H1V1h4.75zM8.875 2.5h-1.75V1h1.75zM12.375 1.064 10.94 2.5h-.315V1h1.75z'/%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-resize-off($color: $colors--light-theme--icon) {
+  background-image: vf-icon-resize-off-url($color);
+}
+
+@mixin vf-icon-resize-off-themed {
+  @include vf-themed-icon($light-value: vf-icon-resize-off-url($colors--light-theme--icon), $dark-value: vf-icon-resize-off-url($colors--dark-theme--icon));
+}
+
+// rotate-left
+@function vf-icon-rotate-left-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%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M3.682 5.56a1.5 1.5 0 0 1 2.12 0l4.951 4.95a1.5 1.5 0 0 1 0 2.122l-2.121 2.12a1.5 1.5 0 0 1-2.008.103l-.113-.102-4.95-4.95a1.5 1.5 0 0 1 0-2.121zm-1.06 3.182 4.95 4.95 2.12-2.12-4.95-4.95z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M10.03 1.53 8.81 2.75H10a4.75 4.75 0 0 1 4.75 4.75v2h-1.5v-2A3.25 3.25 0 0 0 10 4.25H8.81l1.22 1.22-1.06 1.06L5.94 3.5 8.97.47z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-rotate-left($color: $colors--light-theme--icon) {
+  background-image: vf-icon-rotate-left-url($color);
+}
+
+@mixin vf-icon-rotate-left-themed {
+  @include vf-themed-icon($light-value: vf-icon-rotate-left-url($colors--light-theme--icon), $dark-value: vf-icon-rotate-left-url($colors--dark-theme--icon));
+}
+
+// rotate-right
+@function vf-icon-rotate-right-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%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M12.318 5.56a1.5 1.5 0 0 0-2.12 0l-4.951 4.95a1.5 1.5 0 0 0 0 2.122l2.121 2.12a1.5 1.5 0 0 0 2.008.103l.113-.102 4.95-4.95a1.5 1.5 0 0 0 0-2.121zm1.06 3.182-4.95 4.95-2.12-2.12 4.95-4.95z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='m5.97 1.53 1.22 1.22H6A4.75 4.75 0 0 0 1.25 7.5v2h1.5v-2A3.25 3.25 0 0 1 6 4.25h1.19L5.97 5.47l1.06 1.06 3.03-3.03L7.03.47z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-rotate-right($color: $colors--light-theme--icon) {
+  background-image: vf-icon-rotate-right-url($color);
+}
+
+@mixin vf-icon-rotate-right-themed {
+  @include vf-themed-icon($light-value: vf-icon-rotate-right-url($colors--light-theme--icon), $dark-value: vf-icon-rotate-right-url($colors--dark-theme--icon));
+}
+
+// screen-record-start
+@function vf-icon-screen-record-start-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%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M13.5 10.25v3.25h-3.25V15h3.25a1.5 1.5 0 0 0 1.5-1.5v-3.25zM1 13.5A1.5 1.5 0 0 0 2.5 15h3.25v-1.5H2.5v-3.25H1zM8 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M8 3.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9M8 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M10.25 2.5h3.25v3.25H15V2.5A1.5 1.5 0 0 0 13.5 1h-3.25zM2.5 1A1.5 1.5 0 0 0 1 2.5v3.25h1.5V2.5h3.25V1z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-screen-record-start($color: $colors--light-theme--icon) {
+  background-image: vf-icon-screen-record-start-url($color);
+}
+
+@mixin vf-icon-screen-record-start-themed {
+  @include vf-themed-icon($light-value: vf-icon-screen-record-start-url($colors--light-theme--icon), $dark-value: vf-icon-screen-record-start-url($colors--dark-theme--icon));
+}
+
+// screen-record-stop
+@function vf-icon-screen-record-stop-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%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M13.5 13.5h-3.25V15h3.25a1.5 1.5 0 0 0 1.5-1.5v-3.25h-1.5zM1 13.5A1.5 1.5 0 0 0 2.5 15h3.25v-1.5H2.5v-3.25H1z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M5.5 4A1.5 1.5 0 0 0 4 5.5v5a1.5 1.5 0 0 0 1.347 1.492L5.5 12h5a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 10.5 4zm5 1.5v5h-5v-5z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M10.25 2.5h3.25v3.25H15V2.5A1.5 1.5 0 0 0 13.5 1h-3.25zM2.5 1A1.5 1.5 0 0 0 1 2.5v3.25h1.5V2.5h3.25V1z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-screen-record-stop($color: $colors--light-theme--icon) {
+  background-image: vf-icon-screen-record-stop-url($color);
+}
+
+@mixin vf-icon-screen-record-stop-themed {
+  @include vf-themed-icon($light-value: vf-icon-screen-record-stop-url($colors--light-theme--icon), $dark-value: vf-icon-screen-record-stop-url($colors--dark-theme--icon));
+}
+
+// screenshot
+@function vf-icon-screenshot-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%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M13.5 10.25v3.25h-3.25V15h3.5c.69 0 1.25-.56 1.25-1.25v-3.5zM1 13.75c0 .69.56 1.25 1.25 1.25h3.5v-1.5H2.5v-3.25H1zM8 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M6.854 3.5a.88.88 0 0 0-.773.455L5.5 5H5a1.5 1.5 0 0 0-1.5 1.5V10A1.5 1.5 0 0 0 5 11.5h6a1.5 1.5 0 0 0 1.5-1.5V6.5A1.5 1.5 0 0 0 11 5h-.5l-.58-1.045a.89.89 0 0 0-.774-.455zm2.763 3H11V10H5V6.5h1.382L7.216 5h1.568z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M10.25 2.5h3.25v3.25H15v-3.5C15 1.56 14.44 1 13.75 1h-3.5zM2.25 1C1.56 1 1 1.56 1 2.25v3.5h1.5V2.5h3.25V1z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-screenshot($color: $colors--light-theme--icon) {
+  background-image: vf-icon-screenshot-url($color);
+}
+
+@mixin vf-icon-screenshot-themed {
+  @include vf-themed-icon($light-value: vf-icon-screenshot-url($colors--light-theme--icon), $dark-value: vf-icon-screenshot-url($colors--dark-theme--icon));
+}
+
+// volume-down
+@function vf-icon-volume-down-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%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M6.342 2.451C6.988 1.886 8 2.345 8 3.204v9.592c0 .859-1.012 1.318-1.658.753l-2.913-2.55H1.5A1.5 1.5 0 0 1 0 9.5v-3A1.5 1.5 0 0 1 1.5 5h1.929zM3.992 6.5H1.5v3h2.492L6.5 11.694v-7.39z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M16 8.75h-6v-1.5h6z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-volume-down($color: $colors--light-theme--icon) {
+  background-image: vf-icon-volume-down-url($color);
+}
+
+@mixin vf-icon-volume-down-themed {
+  @include vf-themed-icon($light-value: vf-icon-volume-down-url($colors--light-theme--icon), $dark-value: vf-icon-volume-down-url($colors--dark-theme--icon));
+}
+
+// volume-up
+@function vf-icon-volume-up-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%3Cpath fill='#{vf-url-friendly-color($color)}'  fill-rule='evenodd' d='M6.342 2.451C6.988 1.886 8 2.345 8 3.204v9.592c0 .859-1.012 1.318-1.658.753l-2.913-2.55H1.5A1.5 1.5 0 0 1 0 9.5v-3A1.5 1.5 0 0 1 1.5 5h1.929zM3.992 6.5H1.5v3h2.492L6.5 11.694v-7.39z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M13.745 7.25H16v1.5h-2.255v2.255h-1.5V8.75H10v-1.5h2.245V5.005h1.5z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-volume-up($color: $colors--light-theme--icon) {
+  background-image: vf-icon-volume-up-url($color);
+}
+
+@mixin vf-icon-volume-up-themed {
+  @include vf-themed-icon($light-value: vf-icon-volume-up-url($colors--light-theme--icon), $dark-value: vf-icon-volume-up-url($colors--dark-theme--icon));
+}

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_icons.scss

@@ -2100,4 +2100,97 @@
   }
 }
 
-// **Base and Pattern mixins accurate as of March 2026**
+// ICONS ADDED IN APRIL 2026
+
+@mixin vf-p-icon-devtools {
+  .p-icon--devtools {
+    @extend %icon;
+    @include vf-icon-devtools-themed;
+  }
+}
+
+@mixin vf-p-icon-devtools-off {
+  .p-icon--devtools-off {
+    @extend %icon;
+    @include vf-icon-devtools-off-themed;
+  }
+}
+
+@mixin vf-p-icon-keyboard {
+  .p-icon--keyboard {
+    @extend %icon;
+    @include vf-icon-keyboard-themed;
+  }
+}
+
+@mixin vf-p-icon-keyboard-off {
+  .p-icon--keyboard-off {
+    @extend %icon;
+    @include vf-icon-keyboard-off-themed;
+  }
+}
+
+@mixin vf-p-icon-resize {
+  .p-icon--resize {
+    @extend %icon;
+    @include vf-icon-resize-themed;
+  }
+}
+
+@mixin vf-p-icon-resize-off {
+  .p-icon--resize-off {
+    @extend %icon;
+    @include vf-icon-resize-off-themed;
+  }
+}
+
+@mixin vf-p-icon-rotate-left {
+  .p-icon--rotate-left {
+    @extend %icon;
+    @include vf-icon-rotate-left-themed;
+  }
+}
+
+@mixin vf-p-icon-rotate-right {
+  .p-icon--rotate-right {
+    @extend %icon;
+    @include vf-icon-rotate-right-themed;
+  }
+}
+
+@mixin vf-p-icon-screen-record-start {
+  .p-icon--screen-record-start {
+    @extend %icon;
+    @include vf-icon-screen-record-start-themed;
+  }
+}
+
+@mixin vf-p-icon-screen-record-stop {
+  .p-icon--screen-record-stop {
+    @extend %icon;
+    @include vf-icon-screen-record-stop-themed;
+  }
+}
+
+@mixin vf-p-icon-screenshot {
+  .p-icon--screenshot {
+    @extend %icon;
+    @include vf-icon-screenshot-themed;
+  }
+}
+
+@mixin vf-p-icon-volume-down {
+  .p-icon--volume-down {
+    @extend %icon;
+    @include vf-icon-volume-down-themed;
+  }
+}
+
+@mixin vf-p-icon-volume-up {
+  .p-icon--volume-up {
+    @extend %icon;
+    @include vf-icon-volume-up-themed;
+  }
+}
+
+// **Base and Pattern mixins accurate as of April 2026**

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 -%}