vanilla-framework 4.26.1 → 4.28.0

package/scss/_settings_font.scss

@@ -11,10 +11,20 @@ $base-font-sizes: (
   base: 1rem,
   large: $font-size-largescreen,
 ) !default;
-$font-weight-display-heading: 100 !default;
+
+// 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-bold: 550 !default;
+$font-weight-display-heading: 100 !default;
+
+// Heading levels - allow overriding of weights for headings
+$font-weight-h1: $font-weight-bold !default;
+$font-weight-h2: 180 !default;
+$font-weight-h3: $font-weight-bold !default;
+$font-weight-h4: 275 !default;
+$font-weight-h5: $font-weight-bold !default;
+$font-weight-h6: $font-weight-regular-text !default;
 
 // Ubuntu Font metrics
 $baseline-position: 0.932em !default; // HHead Ascent from the font file's metrics. Viewable in Fontforge Font Information>OS/2

package/scss/_settings_grid.scss

@@ -6,8 +6,12 @@ $grid-max-width: 80rem !default;
 $grid-columns-small: 4 !default;
 $grid-columns-medium: 6 !default;
 $grid-columns: 12 !default;
+// legacy grid only
 $threshold-4-6-col: $breakpoint-small !default;
 $threshold-6-12-col: $breakpoint-large !default;
+// New grid thresholds
+$threshold-4-small-4-med-col: $breakpoint-small !default;
+$threshold-4-8-col: $breakpoint-large !default;
 
 $grid-column-prefix: 'col-' !default;
 $grid-small-col-prefix: '#{$grid-column-prefix}small-' !default;

package/scss/_settings_spacing.scss

@@ -7,59 +7,343 @@ $sp-unit-ratio: 0.5 !default;
 // Baseline grid settings
 $sp-unit: 1rem * $sp-unit-ratio !default;
 
+// Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
+
+$spv--x-small: $sp-unit * 0.5 !default;
+$spv--small: $sp-unit !default;
+$spv--medium: $sp-unit * 1.5 !default;
+$spv--large: $sp-unit * 2;
+$spv--x-large: $sp-unit * 3 !default;
+$spv--strip-shallow: $sp-unit * 3 !default;
+$spv--strip-regular: $sp-unit * 8 !default;
+$spv--strip-deep: $sp-unit * 16 !default;
+
+$sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
+$sph--small: $sp-unit !default;
+$sph--large: $sp-unit * 2 !default;
+$sph--x-large: $sp-unit * 3 !default;
+
+// Typography settings - per-level configuration maps
+// Each settings map contains: nudge, line-height, font-size, sp-after, and sp-before (font-weight handled separately)
+
+$settings-text-display: (
+  nudge: 0.35rem,
+  line-height: 11 * $sp-unit,
+  font-size: 5,
+  sp-after: $spv--x-large,
+  sp-before: 0,
+) !default;
+
+$settings-text-display-mobile: (
+  nudge: 0.25rem,
+  line-height: 9 * $sp-unit,
+  font-size: 4,
+  sp-after: $spv--x-large,
+  sp-before: 0,
+) !default;
+
+$settings-text-h1: (
+  nudge: 0.55rem,
+  line-height: 6 * $sp-unit,
+  font-size: 2.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h1-large: (
+  nudge: 0.55rem,
+  line-height: 6 * $sp-unit,
+  font-size: 2.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h1-mobile: (
+  nudge: 0.55rem,
+  line-height: 5 * $sp-unit,
+  font-size: 2,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h2: (
+  nudge: 0.55rem,
+  line-height: 6 * $sp-unit,
+  font-size: 2.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h2-large: (
+  nudge: 0.55rem,
+  line-height: 6 * $sp-unit,
+  font-size: 2.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h2-mobile: (
+  nudge: 0.55rem,
+  line-height: 5 * $sp-unit,
+  font-size: 2,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h3: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h3-large: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h3-mobile: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h4: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h4-large: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h4-mobile: (
+  nudge: 0.45rem,
+  line-height: 4 * $sp-unit,
+  font-size: 1.5,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h5: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h5-large: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h5-mobile: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h6: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h6-large: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-h6-mobile: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-p: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $spv--x-large,
+  sp-before: 0,
+) !default;
+
+$settings-text-small: (
+  nudge: 0.05rem,
+  line-height: 2.5 * $sp-unit,
+  font-size: 0.875,
+  sp-after: $spv--large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-small-dense: (
+  nudge: 0.05rem,
+  line-height: 2.5 * $sp-unit,
+  font-size: 0.875,
+  sp-after: $spv--large,
+  sp-before: $spv--x-large,
+) !default;
+
+$settings-text-x-small: (
+  nudge: 0.25rem,
+  line-height: 2 * $sp-unit,
+  font-size: 0.75,
+  sp-after: $spv--large,
+  sp-before: 0,
+) !default;
+
+$settings-text-default: (
+  nudge: 0.375rem,
+  line-height: 3 * $sp-unit,
+  font-size: 1,
+  sp-after: $sp-unit,
+  sp-before: 0,
+) !default;
+
+// Legacy maps for backwards compatibility
 $font-sizes: (
-  display: 5,
-  display-mobile: 4,
-  h1: 2.5,
-  h1-mobile: 2,
-  h2: 2.5,
-  h2-mobile: 2,
-  h3: 1.5,
-  h3-mobile: 1.5,
-  h4: 1.5,
-  h4-mobile: 1.5,
-  default: 1,
-  small: 0.875,
-  x-small: 0.75,
+  display: map-get($settings-text-display, font-size),
+  display-mobile: map-get($settings-text-display-mobile, font-size),
+  h1: map-get($settings-text-h1, font-size),
+  h1-large: map-get($settings-text-h1-large, font-size),
+  h1-mobile: map-get($settings-text-h1-mobile, font-size),
+  h2: map-get($settings-text-h2, font-size),
+  h2-large: map-get($settings-text-h2-large, font-size),
+  h2-mobile: map-get($settings-text-h2-mobile, font-size),
+  h3: map-get($settings-text-h3, font-size),
+  h3-large: map-get($settings-text-h3-large, font-size),
+  h3-mobile: map-get($settings-text-h3-mobile, font-size),
+  h4: map-get($settings-text-h4, font-size),
+  h4-large: map-get($settings-text-h4-large, font-size),
+  h4-mobile: map-get($settings-text-h4-mobile, font-size),
+  h5: map-get($settings-text-h5, font-size),
+  h5-large: map-get($settings-text-h5-large, font-size),
+  h5-mobile: map-get($settings-text-h5-mobile, font-size),
+  h6: map-get($settings-text-h6, font-size),
+  h6-large: map-get($settings-text-h6-large, font-size),
+  h6-mobile: map-get($settings-text-h6-mobile, font-size),
+  default: map-get($settings-text-default, font-size),
+  small: map-get($settings-text-small, font-size),
+  x-small: map-get($settings-text-x-small, font-size),
 ) !default;
 
 $line-heights: (
-  display: 11 * $sp-unit,
-  display-mobile: 9 * $sp-unit,
-  h1: 6 * $sp-unit,
-  h1-mobile: 5 * $sp-unit,
-  h2: 6 * $sp-unit,
-  h2-mobile: 5 * $sp-unit,
-  h3: 4 * $sp-unit,
-  h3-mobile: 4 * $sp-unit,
-  h4: 4 * $sp-unit,
-  h4-mobile: 4 * $sp-unit,
-  default-text: 3 * $sp-unit,
-  small: 2.5 * $sp-unit,
-  x-small: 2 * $sp-unit,
+  display: map-get($settings-text-display, line-height),
+  display-mobile: map-get($settings-text-display-mobile, line-height),
+  h1: map-get($settings-text-h1, line-height),
+  h1-large: map-get($settings-text-h1-large, line-height),
+  h1-mobile: map-get($settings-text-h1-mobile, line-height),
+  h2: map-get($settings-text-h2, line-height),
+  h2-large: map-get($settings-text-h2-large, line-height),
+  h2-mobile: map-get($settings-text-h2-mobile, line-height),
+  h3: map-get($settings-text-h3, line-height),
+  h3-large: map-get($settings-text-h3-large, line-height),
+  h3-mobile: map-get($settings-text-h3-mobile, line-height),
+  h4: map-get($settings-text-h4, line-height),
+  h4-large: map-get($settings-text-h4-large, line-height),
+  h4-mobile: map-get($settings-text-h4-mobile, line-height),
+  h5: map-get($settings-text-h5, line-height),
+  h5-large: map-get($settings-text-h5-large, line-height),
+  h5-mobile: map-get($settings-text-h5-mobile, line-height),
+  h6: map-get($settings-text-h6, line-height),
+  h6-large: map-get($settings-text-h6-large, line-height),
+  h6-mobile: map-get($settings-text-h6-mobile, line-height),
+  default-text: map-get($settings-text-default, line-height),
+  small: map-get($settings-text-small, line-height),
+  x-small: map-get($settings-text-x-small, line-height),
 ) !default;
 
 // baseline nudges for type scale ratio of (16/14)^2
 $nudges: (
-  display: 0.35rem,
-  display-mobile: 0.25rem,
-  h1-large: 0.55rem,
-  h1-mobile: 0.55rem,
-  h1: 0.55rem,
-  h2: 0.55rem,
-  h2-mobile: 0.55rem,
-  h3: 0.45rem,
-  h3-mobile: 0.45rem,
-  h4-large: 0.45rem,
-  h4: 0.45rem,
-  h4-mobile: 0.45rem,
-  h5: 0.375rem,
-  h6: 0.375em,
-  h6-large: 0.375rem,
-  p: 0.375rem,
+  display: map-get($settings-text-display, nudge),
+  display-mobile: map-get($settings-text-display-mobile, nudge),
+  h1-large: map-get($settings-text-h1, nudge),
+  // fallback to h1 nudge
+  h1-mobile: map-get($settings-text-h1-mobile, nudge),
+  h1: map-get($settings-text-h1, nudge),
+  h2: map-get($settings-text-h2, nudge),
+  h2-mobile: map-get($settings-text-h2-mobile, nudge),
+  h2-large: map-get($settings-text-h2, nudge),
+  // fallback to h2 nudge
+  h3: map-get($settings-text-h3, nudge),
+  h3-mobile: map-get($settings-text-h3-mobile, nudge),
+  h3-large: map-get($settings-text-h3, nudge),
+  // fallback to h3 nudge
+  h4-large: map-get($settings-text-h4, nudge),
+  // fallback to h4 nudge
+  h4: map-get($settings-text-h4, nudge),
+  h4-mobile: map-get($settings-text-h4-mobile, nudge),
+  h5: map-get($settings-text-h5, nudge),
+  h5-large: map-get($settings-text-h5, nudge),
+  // fallback to h5 nudge
+  h5-mobile: map-get($settings-text-h5-mobile, nudge),
+  h6: map-get($settings-text-h6, nudge),
+  h6-mobile: map-get($settings-text-h6-mobile, nudge),
+  h6-large: map-get($settings-text-h6, nudge),
+  // fallback to h6 nudge
+  p: map-get($settings-text-p, nudge),
+  default: map-get($settings-text-default, nudge),
+  // not currently used in Vanilla, kept for backwards compatibility
   p-ubuntumono: 0.45rem,
-  small: 0.05rem,
-  x-small: 0.25rem,
+  // fallback
+  small: map-get($settings-text-small, nudge),
+  x-small: map-get($settings-text-x-small, nudge),
+) !default;
+
+$sp-after: (
+  display: map-get($settings-text-display, sp-after),
+  display-mobile: map-get($settings-text-display-mobile, sp-after),
+  h1: map-get($settings-text-h1, sp-after),
+  h1-large: map-get($settings-text-h1-large, sp-after),
+  h1-mobile: map-get($settings-text-h1-mobile, sp-after),
+  h2: map-get($settings-text-h2, sp-after),
+  h2-large: map-get($settings-text-h2-large, sp-after),
+  h2-mobile: map-get($settings-text-h2-mobile, sp-after),
+  h3: map-get($settings-text-h3, sp-after),
+  h3-large: map-get($settings-text-h3-large, sp-after),
+  h3-mobile: map-get($settings-text-h3-mobile, sp-after),
+  h4: map-get($settings-text-h4, sp-after),
+  h4-large: map-get($settings-text-h4-large, sp-after),
+  h4-mobile: map-get($settings-text-h4-mobile, sp-after),
+  h5: map-get($settings-text-h5, sp-after),
+  h5-large: map-get($settings-text-h5-large, sp-after),
+  h5-mobile: map-get($settings-text-h5-mobile, sp-after),
+  h6: map-get($settings-text-h6, sp-after),
+  h6-large: map-get($settings-text-h6-large, sp-after),
+  h6-mobile: map-get($settings-text-h6-mobile, sp-after),
+  p: map-get($settings-text-p, sp-after),
+  p-small-caps: map-get($settings-text-small, sp-after),
+  p-dense: map-get($settings-text-small, sp-after),
+  default-text: map-get($settings-text-default, sp-after),
+  small: map-get($settings-text-small, sp-after),
+  small--dense: map-get($settings-text-small, sp-after),
+  x-small: map-get($settings-text-x-small, sp-after),
 ) !default;
 
 // Correct baseline drift due to browser rounding. (Visible in text > 1000 lines)
@@ -77,45 +361,8 @@ $browser-rounding-compensations: (
   small: 0,
 ) !default;
 
-// Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
-
-$spv--x-small: $sp-unit * 0.5 !default;
-$spv--small: $sp-unit !default;
-$spv--medium: $sp-unit * 1.5 !default;
-$spv--large: $sp-unit * 2;
-$spv--x-large: $sp-unit * 3 !default;
-$spv--strip-shallow: $sp-unit * 3 !default;
-$spv--strip-regular: $sp-unit * 8 !default;
-$spv--strip-deep: $sp-unit * 16 !default;
-
-$sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
-$sph--small: $sp-unit !default;
-$sph--large: $sp-unit * 2 !default;
-$sph--x-large: $sp-unit * 3 !default;
-
-// Space after text elements
-$sp-after: (
-  display: $spv--x-large,
-  display-mobile: $spv--x-large,
-  h1: $spv--x-large,
-  h1-mobile: $spv--x-large,
-  h2: $spv--x-large,
-  h2-mobile: $spv--x-large,
-  h3: $spv--x-large,
-  h3-mobile: $spv--x-large,
-  h4: $spv--x-large,
-  h4-mobile: $spv--x-large,
-  p: $spv--x-large,
-  p-small-caps: $spv--large,
-  p-dense: $spv--large,
-  default-text: $sp-unit,
-  small: $spv--large,
-  small--dense: $spv--large,
-  x-small: $spv--large,
-) !default;
-
 // commonly occuring calculations available as variables
-$spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
+$spv-nudge: map-get($settings-text-p, nudge) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
 
 // form input spacing variables

package/scss/_utilities_content-align.scss

@@ -69,10 +69,10 @@
   }
 
   .u-align-text--small-to-default {
-    padding-top: map-get($nudges, small) + $sp-unit;
+    padding-top: map-get($settings-text-small, nudge) + $sp-unit;
   }
 
   .u-align-text--x-small-to-default {
-    padding-top: map-get($nudges, x-small) + $sp-unit;
+    padding-top: map-get($settings-text-x-small, nudge) + $sp-unit;
   }
 }

package/templates/_macros/vf_equal-heights.jinja

@@ -3,6 +3,7 @@
   - title_text (string) (required): The text to be displayed as the heading
   - subtitle_text (string) (optional): The text to be displayed as the subtitle
   - subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5.
+  - highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default.
   - image_aspect_ratio_small (string) (optional): The aspect ratio for item images on small screens. Defaults to "square". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "square".
   - image_aspect_ratio_medium (string) (optional): The aspect ratio for item images on medium screens. Defaults to "square". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "square".
   - image_aspect_ratio_large (string) (optional): The aspect ratio for item images on large screens. Defaults to "2-3". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "2-3".
@@ -12,6 +13,7 @@
   title_text,
   subtitle_text="",
   subtitle_heading_level=5,
+  highlight_images=false,
   image_aspect_ratio_small="square",
   image_aspect_ratio_medium="square",
   image_aspect_ratio_large="2-3",
@@ -67,7 +69,7 @@
               {#- Image item (required) -#}
               <div class="p-equal-height-row__item">
                 <div
-                  class="p-image-container--{{ image_aspect_ratio_small }}-on-small p-image-container--{{ image_aspect_ratio_medium }}-on-medium p-image-container--{{ image_aspect_ratio_large }}-on-large is-cover">
+                  class="p-image-container--{{ image_aspect_ratio_small }}-on-small p-image-container--{{ image_aspect_ratio_medium }}-on-medium p-image-container--{{ image_aspect_ratio_large }}-on-large is-cover{% if highlight_images %} is-highlighted{% endif %}" >
                   {#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
                   {{- image | safe -}}
                 </div>

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

@@ -103,21 +103,21 @@
   {%- endmacro -%}
 
   <div class="p-section">
-    <div class="row--50-50-on-large">
+    <div class="grid-row--50-50-on-large">
       <hr>
       {% if not is_flipped -%}
-        <div class="col">
+        <div class="grid-col">
           {{- _text_column_contents(list_items) -}}
         </div>
-        <div class="col">
+        <div class="grid-col">
           {{- _image_column_contents() -}}
         </div>
       {%- else -%}
         {#- For flipped layout, place the image contents in the first column and the text in the second column -#}
-        <div class="col">
+        <div class="grid-col">
           {{- _image_column_contents() -}}
         </div>
-        <div class="col">
+        <div class="grid-col">
           {{- _text_column_contents(list_items) -}}
         </div>
       {%- endif -%}

package/templates/_macros/vf_text-spotlight.jinja

@@ -8,11 +8,11 @@
   {% set has_list = list_items | length >= 2 and list_items | length <= 7 %}
   <section class="p-section">
     <hr class="p-rule is-fixed-width" />
-    <div class="row--25-75-on-large">
-      <div class="col">
+    <div class="grid-row--25-75-on-large">
+      <div class="grid-col">
         <h2 class="p-text--small-caps">{{ title_text }}</h2>
       </div>
-      <div class="col">
+      <div class="grid-col">
         {%- if has_list -%}
           {%- for list_item in list_items -%}
             <p class="p-heading--2">{{- list_item -}}</p>

package/templates/_macros/vf_tiered-list.jinja

@@ -27,18 +27,18 @@
             {{ title_content }}
           </div>
 
-          <div class="row">
-            <div class="col-6 col-start-large-7">
+          <div class="grid-row">
+            <div class="grid-col-4 grid-col-start-large-5">
               {{ description_content }}
             </div>
           </div>
         {%- else -%}
-          <div class="row">
-            <div class="col-6">
+          <div class="grid-row--50-50-on-large">
+            <div class="grid-col">
               {{ title_content }}
             </div>
 
-            <div class="col-6">
+            <div class="grid-col">
               {{ description_content }}
             </div>
           </div>
@@ -69,34 +69,34 @@
           {%- if is_list_full_width_on_tablet == true %}
             {#- Skip the first HR -#}
             {%- if number != 1 %}
-              <div class="row">
-                <div class="col-9 col-start-large-4">
+              <div class="grid-row">
+                <div class="grid-col-6 grid-col-start-large-3">
                   <hr class="is-muted">
                 </div>
               </div>
             {%- endif -%}
 
-            <div class="row">
-              <div class="col-3 col-start-large-4">{{ list_item_title_content }}</div>
+            <div class="grid-row">
+              <div class="grid-col-2 grid-col-start-large-3">{{ list_item_title_content }}</div>
 
-              <div class="col-6">{{ list_item_description_content }}</div>
+              <div class="grid-col-4">{{ list_item_description_content }}</div>
             </div>
           {%- else %}
             {#- Skip the first HR -#}
             {%- if number != 1 %}
-              <div class="row">
-                <div class="col-9 col-start-large-4">
+              <div class="grid-row">
+                <div class="grid-col-6 grid-col-start-large-3">
                   <hr class="is-muted">
                 </div>
               </div>
             {%- endif -%}
 
-            <div class="row">
-              <div class="col-medium-3 col-3 col-start-large-4">
+            <div class="grid-row">
+              <div class="grid-col-medium-2 grid-col-2 grid-col-start-large-3">
                 {{ list_item_title_content }}
               </div>
 
-              <div class="col-medium-3 col-6">
+              <div class="grid-col-medium-2 grid-col-4">
                 {{ list_item_description_content }}
               </div>
             </div>
@@ -108,9 +108,9 @@
     {%- endif -%}
 
     {% if has_cta == true -%}
-      <div class="row">
+      <div class="grid-row">
         <hr class="p-rule--muted">
-        <div class="col-6 col-start-large-7">
+        <div class="grid-col-4 grid-col-start-large-5">
           <p>
             {{ cta_content }}
           </p>