@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

package/src/components/bs5/card/card.scss

@@ -3,19 +3,7 @@
 
 // Source CSS variables: var(--variable-name)  /node_modules/bootstrap/css/components/_card.css
 
-// Video overlay icons
-$video-icon-color: $qld-dark-text;
-$video-play-icon: url("data:image/svg+xml,<svg width='32' height='21' viewBox='0 0 32 21' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M30.7656 1.96875C30.2188 1.69531 29.5078 1.69531 28.9609 2.07812L23.3281 6.01562C22.9453 6.28906 22.8359 6.83594 23.1094 7.27344C23.3828 7.65625 23.9297 7.71094 24.3672 7.4375L30 3.5V17.5L24.3672 13.5625C23.9297 13.2891 23.3828 13.3984 23.1094 13.7812C22.8359 14.2188 22.9453 14.7656 23.3281 15.0391L28.9609 18.9766C29.2891 19.1953 29.6172 19.25 30 19.25C30.2734 19.25 30.5469 19.1953 30.7656 19.0859C31.3672 18.7578 31.75 18.1562 31.75 17.5V3.5C31.75 2.84375 31.3672 2.29688 30.7656 1.96875ZM17.75 0H3.75C1.78125 0 0.25 1.58594 0.25 3.5V17.5C0.25 19.4688 1.78125 21 3.75 21H17.75C19.6641 21 21.25 19.4688 21.25 17.5V3.5C21.25 1.58594 19.6641 0 17.75 0ZM19.5 17.5C19.5 18.4844 18.6797 19.25 17.75 19.25H3.75C2.76562 19.25 2 18.4844 2 17.5V3.5C2 2.57031 2.76562 1.75 3.75 1.75H17.75C18.6797 1.75 19.5 2.57031 19.5 3.5V17.5Z' fill='#{$video-icon-color}' /></svg>");
-$video-play-icon-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='#{$video-icon-color}' d='M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z'/></svg>");
-$video-clock-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='#{$video-icon-color}'><path d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z' /></svg>"); // Material Symbols 'Schedule'
-
-$video-icon-color-dark: $qld-dark-action-text;
-$video-play-icon-dark: url("data:image/svg+xml,<svg width='32' height='21' viewBox='0 0 32 21' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M30.7656 1.96875C30.2188 1.69531 29.5078 1.69531 28.9609 2.07812L23.3281 6.01562C22.9453 6.28906 22.8359 6.83594 23.1094 7.27344C23.3828 7.65625 23.9297 7.71094 24.3672 7.4375L30 3.5V17.5L24.3672 13.5625C23.9297 13.2891 23.3828 13.3984 23.1094 13.7812C22.8359 14.2188 22.9453 14.7656 23.3281 15.0391L28.9609 18.9766C29.2891 19.1953 29.6172 19.25 30 19.25C30.2734 19.25 30.5469 19.1953 30.7656 19.0859C31.3672 18.7578 31.75 18.1562 31.75 17.5V3.5C31.75 2.84375 31.3672 2.29688 30.7656 1.96875ZM17.75 0H3.75C1.78125 0 0.25 1.58594 0.25 3.5V17.5C0.25 19.4688 1.78125 21 3.75 21H17.75C19.6641 21 21.25 19.4688 21.25 17.5V3.5C21.25 1.58594 19.6641 0 17.75 0ZM19.5 17.5C19.5 18.4844 18.6797 19.25 17.75 19.25H3.75C2.76562 19.25 2 18.4844 2 17.5V3.5C2 2.57031 2.76562 1.75 3.75 1.75H17.75C18.6797 1.75 19.5 2.57031 19.5 3.5V17.5Z' fill='#{$video-icon-color-dark}' /></svg>");
-$video-play-icon-hover-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='#{$video-icon-color-dark}' d='M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z'/></svg>");
-$video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='#{$video-icon-color-dark}'><path d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z' /></svg>"); // Material Symbols 'Schedule'
-
 .card {
-  --arrow-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0518 8.1205L6.63557 16.4361C6.44609 16.6153 6.22435 16.7076 5.97036 16.7128C5.71637 16.7183 5.49185 16.6234 5.2968 16.4282C5.1015 16.233 5.00259 16.0122 5.00006 15.7658C4.99728 15.5194 5.0948 15.2985 5.29263 15.1033L15.1755 5.35051C15.2995 5.22843 15.4286 5.13943 15.563 5.08351C15.6976 5.02784 15.8454 5 16.0066 5C16.168 5 16.3155 5.02784 16.449 5.08351C16.5826 5.13943 16.7114 5.22843 16.8353 5.35051L26.7183 15.1033C26.9012 15.2838 26.995 15.5003 26.9998 15.7527C27.0046 16.0053 26.9108 16.2305 26.7183 16.4282C26.5176 16.6234 26.2919 16.7211 26.0409 16.7211C25.7899 16.7211 25.5687 16.6234 25.3772 16.4282L16.9591 8.1205V26.0589C16.9591 26.3303 16.8687 26.555 16.6881 26.733C16.5077 26.911 16.2802 27 16.0054 27C15.7305 27 15.5028 26.911 15.3224 26.733C15.142 26.555 15.0518 26.3303 15.0518 26.0589V8.1205Z' fill='%23131212'/%3E%3C/svg%3E%0A");
   --#{$prefix}card-bg: var(--#{$prefix}default-background);
   --#{$prefix}card-color: var(--#{$prefix}text-grey);
   --#{$prefix}card-title-color: var(--#{$prefix}light-text-heading);
@@ -29,8 +17,8 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
   --#{$prefix}card-border-width: #{$card-border-width};
   --#{$prefix}card-border-color: var(--#{$prefix}light-border-alt);
   --#{$prefix}card-border-radius: 0.75rem;
-  --#{$prefix}card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),
-    0px 2px 6px 2px rgba(0, 0, 0, 0.15); // level 2 shadow
+  --#{$prefix}card-box-shadow:
+    0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15); // level 2 shadow
   --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
   --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
   --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
@@ -41,37 +29,34 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
   --#{$prefix}card-group-margin: #{$card-group-margin};
   --#{$prefix}card-link-color: var(--#{$prefix}light-link);
   --#{$prefix}card-date-color: var(--#{$prefix}dark-grey-muted);
-  --#{$prefix}card-footer-border: var(--#{$prefix}light-grey);
+  --#{$prefix}card-footer-border: var(--#{$prefix}light-border);
   --#{$prefix}card-img-border-radius: 0px 0px 6.0882800609%/10.8108108108% 0px; // from QHDS website
   --#{$prefix}card-img-overlay-color: var(--#{$prefix}dark-background);
   --#{$prefix}link-hover-colour: var(--#{$prefix}light-action-primary-hover);
   --#{$prefix}link-hover-text-colour: var(--#{$prefix}dark-link);
-
   // Icon variables
   --#{$prefix}card-icon-color: var(--#{$prefix}light-action-secondary);
-  --#{$prefix}card-icon-color-hover: var(--#{$prefix}light-action-secondary-hover);
-  --#{$prefix}card-icon-background-color: var(--#{$prefix}default-background-shade);
-
+  --#{$prefix}card-icon-color-hover: var(
+    --#{$prefix}light-action-secondary-hover
+  );
+  --#{$prefix}card-icon-background-color: var(
+    --#{$prefix}default-background-shade
+  );
   // Side positioned icon as default
   --#{$prefix}card-icon-height: 4rem;
   --#{$prefix}card-icon-width: 4rem;
   --#{$prefix}card-icon-font-size: 2.25rem;
   --#{$prefix}card-icon-line-height: 4rem;
-
   // Video styled card
   .video-overlay {
     --#{$prefix}video-nav-bg: var(--#{$prefix}light-action-primary);
     --#{$prefix}video-nav-bg-rgb: 9, 84, 159;
     --#{$prefix}video-nav-bg-hover: var(--#{$prefix}light-action-primary-hover);
     --#{$prefix}video-nav-bg-hover-rgb: 0, 62, 125;
-    --#{$prefix}video-nav-bg-opacity: .9;
+    --#{$prefix}video-nav-bg-opacity: 0.9;
     --#{$prefix}video-nav-color: var(--#{$prefix}dark-text);
-    --#{$prefix}video-play-icon: #{escape-svg($video-play-icon)};
-    --#{$prefix}video-play-icon-hover: #{escape-svg($video-play-icon-hover)};
-    --#{$prefix}video-play-icon-size: 2rem;
-    --#{$prefix}video-nav-color: var(--#{$prefix}dark-text);
-    --#{$prefix}video-clock-icon: #{escape-svg($video-clock-icon)};
     --#{$prefix}video-clock-icon-size: 1.25rem;
+    --#{$prefix}video-play-icon-color: var(--#{$prefix}dark-text);
   }
   .icon-top {
     --#{$prefix}card-icon-height: 8rem;
@@ -80,33 +65,34 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     --#{$prefix}card-icon-line-height: 8rem;
   }
   &.card-no-action {
-    .qld-icon  {
+    .qld-icon {
       background-color: var(--#{$prefix}card-title-color);
     }
-    
   }
   &.default {
     .card-icon-background {
       background-color: var(--#{$prefix}neutral-lightest);
     }
   }
-  &.card-single-action{
-    .qld-icon  {
+  &.card-single-action {
+    .qld-icon {
       background-color: var(--#{$prefix}light-action-secondary);
     }
-    &.card-dark, &.card-dark-alt {
+    &.card-dark,
+    &.card-dark-alt {
       .qld-icon {
-        background-color: var(--#{$prefix}dark-action-secondary);   
+        background-color: var(--#{$prefix}dark-action-secondary);
       }
     }
   }
   &.card-multi-action {
-    .qld-icon  {
+    .qld-icon {
       background-color: var(--#{$prefix}light-action-secondary);
     }
-    &.card-dark, &.card-dark-alt {
+    &.card-dark,
+    &.card-dark-alt {
       .qld-icon {
-        background-color: var(--#{$prefix}dark-action-secondary);   
+        background-color: var(--#{$prefix}dark-action-secondary);
       }
     }
   }
@@ -118,26 +104,33 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
       .card-title {
         margin-bottom: 0;
       }
-      .icon-arrow {
+      .qld-icon {
         margin: 0;
+        mask-size: 2rem;
+        transform: translateX(0rem);
+        transition: transform 0.25s ease-in-out;
       }
     }
   }
-
   // Colour variants
   &-light,
   &-default {
     --#{$prefix}card-bg: var(--#{$prefix}light-background);
-    --#{$prefix}card-footer-border: var(--#{$prefix}light-border);
-    --#{$prefix}card-icon-background-color: var(--#{$prefix}light-background-shade);
+    --#{$prefix}card-icon-background-color: var(
+      --#{$prefix}light-background-shade
+    );
     --#{$prefix}card-arrow-color: var(--#{$prefix}light-action-secondary);
     &:hover {
-      --#{$prefix}card-arrow-color: var(--#{$prefix}light-action-secondary-hover);
+      --#{$prefix}card-arrow-color: var(
+        --#{$prefix}light-action-secondary-hover
+      );
     }
   }
   &-default {
     --#{$prefix}card-bg: var(--#{$prefix}default-background);
-    --#{$prefix}card-icon-background-color: var(--#{$prefix}default-background-shade);
+    --#{$prefix}card-icon-background-color: var(
+      --#{$prefix}default-background-shade
+    );
   }
   &-light {
     --#{$prefix}card-footer-border: var(--#{$prefix}light-border);
@@ -145,10 +138,14 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
   &-alt {
     --#{$prefix}card-bg: var(--#{$prefix}light-alt-background);
     --#{$prefix}card-footer-border: var(--#{$prefix}soft-grey);
-    --#{$prefix}card-icon-background-color: var(--#{$prefix}light-alt-background-shade);
+    --#{$prefix}card-icon-background-color: var(
+      --#{$prefix}light-alt-background-shade
+    );
     --#{$prefix}card-arrow-color: var(--#{$prefix}light-action-secondary);
     &:hover {
-      --#{$prefix}card-arrow-color: var(--#{$prefix}light-action-secondary-hover);
+      --#{$prefix}card-arrow-color: var(
+        --#{$prefix}light-action-secondary-hover
+      );
     }
   }
   &-dark,
@@ -162,7 +159,9 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     --#{$prefix}link-hover-colour: var(--#{$prefix}dark-action-primary-hover);
     --#{$prefix}link-hover-text-colour: var(--#{$prefix}text-darkest);
     &:hover {
-      --#{$prefix}card-arrow-color: var(--#{$prefix}dark-action-secondary-hover);
+      --#{$prefix}card-arrow-color: var(
+        --#{$prefix}dark-action-secondary-hover
+      );
     }
     &:not(.card-no-action) {
       --#{$prefix}card-icon-color: var(--#{$prefix}dark-action-secondary);
@@ -170,28 +169,32 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     .video-overlay {
       --#{$prefix}video-nav-bg: var(--#{$prefix}dark-action-primary);
       --#{$prefix}video-nav-bg-rgb: 120, 186, 0;
-      --#{$prefix}video-nav-bg-hover: var(--#{$prefix}dark-action-primary-hover);
+      --#{$prefix}video-nav-bg-hover: var(
+        --#{$prefix}dark-action-primary-hover
+      );
       --#{$prefix}video-nav-bg-hover-rgb: 173, 211, 63;
       --#{$prefix}video-nav-color: var(--#{$prefix}dark-action-text);
-      --#{$prefix}video-play-icon: #{escape-svg($video-play-icon-dark)};
-      --#{$prefix}video-play-icon-hover: #{escape-svg($video-play-icon-hover-dark)};
-      --#{$prefix}video-clock-icon: #{escape-svg($video-clock-icon-dark)};
+      --#{$prefix}video-play-icon-color: var(--#{$prefix}text-darkest);
     }
   }
   &-dark {
     --#{$prefix}card-bg: var(--#{$prefix}dark-background);
-    --#{$prefix}card-icon-background-color: var(--#{$prefix}dark-background-shade);
+    --#{$prefix}card-icon-background-color: var(
+      --#{$prefix}dark-background-shade
+    );
     --#{$prefix}card-icon-color: var(--#{$prefix}dark-text-heading);
     --#{$prefix}card-footer-border: var(--#{$prefix}dark-border);
   }
   &-dark-alt {
     --#{$prefix}card-bg: var(--#{$prefix}dark-blue);
-    --#{$prefix}card-icon-background-color: var(--#{$prefix}dark-alt-background-shade);
+    --#{$prefix}card-icon-background-color: var(
+      --#{$prefix}dark-alt-background-shade
+    );
     --#{$prefix}card-icon-color: var(--#{$prefix}dark-text-heading);
     --#{$prefix}card-footer-border: var(--#{$prefix}dark-alt-border);
   }
   &.icon-top {
-    position: relative;;
+    position: relative;
   }
   &.icon-top .card-icon-background {
     width: 8rem;
@@ -227,7 +230,6 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     border-radius: 0;
   }
 }
-
 @include media-breakpoint-up(md) {
   .card {
     --#{$prefix}card-spacer-x: 1.25rem;
@@ -236,21 +238,21 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     --#{$prefix}card-line-height: 1.5rem;
   }
 }
-
 @include media-breakpoint-up(lg) {
   .card {
     --#{$prefix}card-spacer-x: 1.5rem;
     --#{$prefix}card-spacer-y: 1.5rem;
     --#{$prefix}card-title-font-size: 1.5rem;
     --#{$prefix}card-title-line-height: 2rem;
-    --#{$prefix}card-box-shadow: 7px 6px 13px rgba(0, 0, 0, 0.02), 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 13px 20px rgba(0, 0, 0, 0.1); // Level 4 shadow
+    --#{$prefix}card-box-shadow:
+      7px 6px 13px rgba(0, 0, 0, 0.02), 0px 2px 5px rgba(0, 0, 0, 0.1),
+      0px 13px 20px rgba(0, 0, 0, 0.1); // Level 4 shadow
     &-feature {
       --#{$prefix}card-title-font-size: 2rem;
       --#{$prefix}card-title-line-height: 2.5rem;
     }
   }
 }
-
 // Component styles
 .card {
   font-size: var(--#{$prefix}card-font-size);
@@ -278,7 +280,7 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
   .card-body li {
     margin-top: 0.5rem;
   }
-  .card-text> :last-child {
+  .card-text > :last-child {
     margin-bottom: 0;
   }
   &-single-action,
@@ -296,16 +298,22 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
         opacity: 0.1;
       }
       .video-nav {
-        background-color: rgba(var(--#{$prefix}video-nav-bg-hover-rgb), var(--#{$prefix}video-nav-bg-opacity));
         .video-watch {
-          background-color: var(--#{$prefix}video-nav-bg-hover);
-          text-decoration: underline;
-          text-underline-offset: var(--qld-link-underline-offset);
-          text-decoration-thickness: var(--qld-link-underline-thickness);
-          .icon {
-            background-image: var(--#{$prefix}video-play-icon-hover);
+          background-color: rgb(var(--#{$prefix}video-nav-bg-hover-rgb));
+          span {
+            text-decoration: underline !important;
+            text-underline-offset: var(--qld-link-underline-offset);
+            text-decoration-thickness: var(--qld-link-underline-thickness);
+            text-shadow: 0.6px 0 0 currentColor;
           }
         }
+        .video-duration {
+          text-shadow: 0.6px 0 0 currentColor;
+          background-color: rgba(
+            var(--#{$prefix}video-nav-bg-hover-rgb),
+            var(--#{$prefix}video-nav-bg-opacity)
+          );
+        }
       }
       .icon-arrow {
         margin-left: 0.25rem;
@@ -339,7 +347,7 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
       background-color: var(--#{$prefix}card-img-overlay-color);
       opacity: 0;
     }
-    [class^=card-img] {
+    [class^="card-img"] {
       background-image: var(--card-image);
       background-position: center center;
       background-repeat: no-repeat;
@@ -351,18 +359,34 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
         content: "";
         position: absolute;
         inset: -1px;
-        border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+        border: var(--#{$prefix}card-border-width) solid
+          var(--#{$prefix}card-border-color);
         border-radius: var(--#{$prefix}card-img-border-radius);
       }
     }
     .video-overlay {
+      background-color: transparent;
       z-index: 1;
       .video-nav,
       .video-watch {
         transition: none;
       }
-      .icon {
-        background-position: center;
+      .video-watch {
+        background-color: rgb(var(--#{$prefix}video-nav-bg-rgb));
+      }
+      .video-duration {
+        background-color: rgba(var(--#{$prefix}video-nav-bg-rgb), 0.5);
+      }
+      .video-duration,
+      .video-watch {
+        padding: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        height: 100%;
+        .qld-icon {
+          background-color: var(--#{$prefix}video-play-icon-color);
+        }
       }
     }
   }
@@ -372,7 +396,10 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     flex-wrap: wrap;
     align-items: center;
     .card-body {
-      width: calc(100% - var(--#{$prefix}card-icon-width) - (2 * var(--#{$prefix}card-spacer-x)));
+      width: calc(
+        100% - var(--#{$prefix}card-icon-width) -
+          (2 * var(--#{$prefix}card-spacer-x))
+      );
       &:not(:last-child) {
         padding-bottom: var(--#{$prefix}card-spacer-y);
       }
@@ -380,37 +407,12 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     .card-title {
       padding-right: 1rem;
     }
-    &:hover {
-      .icon-arrow {
-        transform: translateX(0.25rem);
-      }
-    }
   }
   &.card-arrow {
-    .card-body{
-      position: relative;
-      .card-title {
-        padding-right: 3rem;
-        a:before {
-          content: '';
-          position: absolute;
-          right: 1.5rem;
-          top: calc(50% - 16px);
-          transition: right .25s ease-in-out;
-          mask-image: var(--arrow-icon);
-          mask-size: contain;
-          mask-position: center;
-          width: 2rem;
-          height: 2rem;
-          background-color: var(--#{$prefix}card-arrow-color);
-          transform: rotate(90deg);
-        }
-      }
-      &:hover .card-title{
-        a:before {
-          right: 1.25rem;
-          transition: .25s ease-in-out;
-        }
+    &:hover {
+      .qld-icon {
+        transform: translateX(0.25rem);
+        transition: transform 0.25s ease-in-out;
       }
     }
   }
@@ -429,7 +431,8 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     background: none;
     border-top: 0;
     position: relative;
-    padding: 0 var(--#{$prefix}card-spacer-x) var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+    padding: 0 var(--#{$prefix}card-spacer-x) var(--#{$prefix}card-spacer-y)
+      var(--#{$prefix}card-spacer-x);
     width: 100%;
     flex: 0 1 auto;
     &:before {
@@ -440,7 +443,6 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
       height: 1px;
       background: var(--#{$prefix}card-footer-border);
     }
-
     /////////////////////////////////////////////
     // Override default spacing on tag component
     .tag-list {
@@ -478,7 +480,6 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     }
   }
 }
-
 @include media-breakpoint-up(md) {
   .card {
     &-feature {
@@ -499,7 +500,6 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     }
   }
 }
-
 @include media-breakpoint-up(lg) {
   .card {
     box-shadow: none;
@@ -520,7 +520,7 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
     }
     &.card-multi-action.card-feature {
       .card-body {
-        padding: 2rem;  
+        padding: 2rem;
         padding-block-end: 0;
       }
       .card-footer {
@@ -529,4 +529,4 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
       }
     }
   }
-}
+}

package/src/components/bs5/containerLayout/containerLayout.hbs

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
+
+  <link rel="stylesheet" href="/assets/css/qld.bootstrap.css">
+  <script type="text/javascript" async src="/assets/js/bootstrap.min.js"></script>
+  <script type="text/javascript" async src="/assets/js/qld.bootstrap.min.js"></script>
+
+</head>
+
+<body>
+
+  <div class="{{wrapperClasses}} {{join debugClasses }}">
+
+    {{> globalAlert globalAlert }}
+    {{> header header}}
+    {{> navbar navbar}}
+    
+    <main id="content">
+
+        <!-- breadcrumbs-->
+        {{#if breadcrumbsData }}
+        <div class="alt px-0">
+            <div class="container">
+              {{> breadcrumbs breadcrumbsData }}        
+            </div>
+        </div>
+        {{/if}}
+
+        <!-- Content Wrapper -->
+        <div class="container mt-40 mt-lg-64">
+          <div class="row">
+          
+          <!-- Side Navigation -->
+          {{#if sidenavData }}
+          <div class="col-12 col-lg-3 order-last order-lg-first mt-5 mt-lg-0">
+          {{> sidenav sidenavData }}
+          </div>
+          {{/if}}
+
+
+          <!-- Content body -->
+          <div class="col-12 col-lg-8">
+
+            <!-- Content has an additional 2rem padding-x -->  
+            <div class="qld-content-body px-32">
+
+              {{!-- Main content area --}}
+              <h1>{{title}}</h1>
+
+              {{#if abstract}}
+              <div class="qld-abstract">
+                {{{ abstract }}}
+              </div>
+              {{/if}}
+
+              {{> inpagenav inpageNavData }}
+
+              <h2 id="section-one">Section heading</h2>
+              <p>This is the main content inside the wrapper.</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam impedit repudiandae nulla recusandae soluta officia possimus, nostrum nisi fuga laboriosam provident, est molestiae alias blanditiis explicabo consequuntur ullam expedita! Ab.</p>
+
+
+              <h3>Content heading</h3>
+              <p>This is the main content inside the wrapper.</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
+
+
+              <h2 id="section-two">Section heading</h2>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>  
+
+
+              <section class="emphasis light">
+                <h2>Section heading (h2)</h2>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
+              </section>
+
+            </div><!-- // content-body -->
+          </div><!-- // content-body-column -->
+
+          </div>
+
+          <!-- Content Footer -->
+          {{>contentFooter contentFooterData }}
+        </div>
+
+
+        
+    {{> footer footer}}
+
+  </div>
+
+
+
+</body>
+</html>

package/src/components/bs5/containerLayout/containerLayout.stories.js

@@ -0,0 +1,83 @@
+import Handlebars from "handlebars";
+import template from "./containerLayout.hbs?raw";
+
+//Mockup Data for each component
+import masterbrand_variant from "../header/header.variant.masterBrand.data.json";
+import menu_state from "../navbar/navbar.variant.menuState.data.json";
+import globalAlertData from "../globalAlert/globalAlert.data.json";
+import tableData from "../table/table.data.json";
+import inpageNavData from "../inpagenav/inpagenav.data.json";
+import breadcrumbsData from "../breadcrumbs/breadcrumbs.data.json";
+import sidenavData from "../sidenav/sidenav.data.json";
+import contentFooterData from "../contentFooter/contentFooter.data.json";
+import backToTopData from "../backToTop/backToTop.data.json";
+import footerData from "../footer/footer.data.json";
+
+// Disable feedback form in footer
+footerData.feedbackFormDisabled = true;
+
+const defaultData = {
+  title: "Page Title",
+  backToTop: backToTopData,
+  header: masterbrand_variant,
+  navbar: menu_state,
+  table: tableData,
+  breadcrumbsData: breadcrumbsData.default,
+  sidenavData: sidenavData,
+  inpageNavData: inpageNavData,
+  globalAlert: globalAlertData.warning,
+  contentFooterData: contentFooterData,
+  footer: footerData,
+
+  //Add optional wrapper classes on template (direct child of body)
+  wrapperClasses: "",
+
+  // .debug-container, .debug-row, .debug-col
+  // available in storybook control
+  debugClasses: [],
+};
+
+export default {
+  title: "5. Templates/Container Widths",
+  render: (args) => {
+    return new Handlebars.compile(template)(args);
+  },
+  args: defaultData,
+  argTypes: {
+    // Disable all controls by default
+    cdn: { table: { disable: true } },
+    title: { table: { disable: true } },
+    backToTop: { table: { disable: true } },
+    header: { table: { disable: true } },
+    navbar: { table: { disable: true } },
+    table: { table: { disable: true } },
+    breadcrumbsData: { table: { disable: true } },
+    sidenavData: { table: { disable: true } },
+    inpageNavData: { table: { disable: true } },
+    globalAlert: { table: { disable: true } },
+    footer: { table: { disable: true } },
+    // Enable only the wrapper classes debugger flag
+    wrapperClasses: "",
+    debugClasses: {
+      control: { type: "check" }, // <-- use "check" for checkbox list
+      options: ["debug-container", "debug-row", "debug-col"],
+      name: "Debug Grid",
+      description: "Visualise the grid",
+    },
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      controls: {},
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+/**
+ * Default story
+ *
+ */
+export const ExamplePageLayout = {
+  args: {},
+};

package/src/components/bs5/footer/Footer.js

@@ -1,7 +1,7 @@
 import Component from "../../../js/QGDSComponent.js";
 
 import template from "./footer.hbs?raw";
-import templateForgov from "./footerForgov.hbs?raw";
+/* import templateForgov from "./footerForgov.hbs?raw"; */
 
 export class Footer {
   constructor(data = {}) {
@@ -9,8 +9,8 @@ export class Footer {
   }
 }
 
-export class FooterForgov {
+/* export class FooterForgov {
   constructor(data = {}) {
     return new Component(templateForgov, data);
   }
-}
+} */

package/src/components/bs5/footer/Footer.mdx

@@ -1,9 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as FooterStories from "./footer.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as FooterStories from "./footer.stories";
+import defaultdata from "./footer.data.json";
 
 <Meta of={FooterStories} />
 
 # Footer
+
 <Canvas>
   <Story of={FooterStories.Default} />
 </Canvas>
@@ -13,3 +15,7 @@ import * as FooterStories from "./footer.stories"
 - [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5728-106979&mode=design&t=2A547O8zdXmQCwY7-0)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5728-106979&mode=design&t=2A547O8zdXmQCwY7-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/footer)
+
+## Example Component data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />