Merge remote-tracking branch 'origin/3.0.x' into feature/ISTWCMS-5234-ebremner-hero

source/_data/design-tokens.artifact.yml

@@ -212,7 +212,7 @@ gesso:
       background: "#0071BC"
       text: "#fff"
     table:
-      border: "#757575"
+      border: "#ccc"
       background: "#fff"
       background-head: "#eee"
       background-foot: "#eee"
@@ -250,20 +250,20 @@ gesso:
         stack: georgia, "droid serif", "Times New Roman", Times, serif
       secondary:
         name: Secondary
-        stack: BureauGrot, impact, "avenir next condensed heavy", "Droid Sans",
-          sans-serif;
+        stack: BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid
+          Sans", sans-serif;
       book:
         name: Book
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy",
+          "Droid Sans", sans-serif'
       condensed:
         name: Condensed
-        stack: BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans",
-          sans-serif
+        stack: BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed
+          heavy", "Droid Sans", sans-serif
       condensedbook:
         name: Condensed-Book
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
       system:
         name: System  Typ1451-Regular
         stack: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -330,38 +330,38 @@ gesso:
         font-size: 41.056px
         font-weight: 400
       h1:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 41.056px
         font-weight: 400
         line-height: 1.1
       h2:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 28.832px
         font-weight: 400
         line-height: 1.1
       h3:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 22.784px
         font-weight: 400
         line-height: 1.1
       h4:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 20.256px
         font-weight: 400
         line-height: 1.1
       h5:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 18px
         font-weight: 400
         line-height: 1.1
       h6:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 16px
         font-weight: 400
         line-height: 1.1

source/_meta/_00-head.mustache

@@ -4,7 +4,13 @@
     <title>{{ title }}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width" />
-
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap"
+          media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
     <link rel="stylesheet" href="../../../../css/style.css?{{ cacheBuster }}" media="all" />
     <link rel="stylesheet" href="../../../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
 

source/_meta/_00-head.twig

@@ -7,8 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>{{ page_title }} | {{ site_name }}</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
     <link rel="stylesheet" href="../../../../css/styles.css?{{ cacheBuster }}" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css?{{ cacheBuster }}" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css?{{ cacheBuster }}" media="all">

source/_meta/_02-basic-head.twig

@@ -7,8 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>{{ page_title }} | {{ site_name }}</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
     <link rel="stylesheet" href="../../../css/styles.css?{{ cacheBuster }}" media="all">
     <script src="../../../js/libraries/modernizr.min.js?v=3.3.1"></script>
     <link rel="stylesheet" href="../../../css/pattern-lab.css?{{ cacheBuster }}" media="all">

source/_patterns/00-config/01-mixins/_mixins.uw.scss

@@ -58,14 +58,14 @@ $test-color-12: #f00;
   width: 100vw;
 }
 @mixin uw-full-width-reset {
-  left: 0;
+  left: inherit;
   margin-left: -1rem;
-  margin-right: -1rem;
-  max-width: 100%;
-  padding: 0;
+  margin-right: -2rem;
+  max-width: inherit;
+  padding:inherit;
   position: relative;
-  right:  0;
-  width: 100%;
+  right:  inherit;
+  width: inherit;
 }
 @mixin uw-contained-width-reset() {
   margin-left:inherit;

source/_patterns/00-config/_design-tokens.artifact.scss

@@ -254,7 +254,7 @@ $gesso: (
       text: #fff,
     ),
     table: (
-      border: #757575,
+      border: #ccc,
       background: #fff,
       background-head: #eee,
       background-foot: #eee,
@@ -300,19 +300,19 @@ $gesso: (
       ),
       secondary: (
         name: Secondary,
-        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
+        stack: 'BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
       ),
       book: (
         name: Book,
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
       ),
       condensed: (
         name: Condensed,
-        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: 'BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
       ),
       condensedbook: (
         name: Condensed-Book,
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
       ),
       system: (
         name: 'System  Typ1451-Regular',
@@ -386,37 +386,37 @@ $gesso: (
         font-weight: 400,
       ),
       h1: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 41.056px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h2: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 28.832px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h3: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 22.784px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h4: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 20.256px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h5: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 18px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h6: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 16px,
         font-weight: 400,
         line-height: 1.1,

source/_patterns/00-config/config.design-tokens.yml

@@ -212,7 +212,7 @@ gesso:
       background: brand.blue.base
       text: grayscale.white
     table:
-      border: grayscale.gray-5
+      border: grayscale.gray-3
       background: grayscale.white
       background-head: grayscale.gray-2
       background-foot: grayscale.gray-2
@@ -250,16 +250,16 @@ gesso:
         stack: 'georgia, "droid serif", "Times New Roman", Times, serif'
       secondary:
         name: Secondary
-        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
+        stack: 'BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
       book:
         name: Book
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
       condensed:
         name: Condensed
-        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: 'BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
       condensedbook:
         name: Condensed-Book
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
       system:
         name: System  Typ1451-Regular
         stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'

source/_patterns/01-global/02-typography/typography.twig

+{# Due to barlow being a fallback font from google this allows the fonts to be displayed in pattern lab #}
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;500&display=swap');
+</style>
 {% for webfont in webfonts %}
   <div class="pattern-lab-font">
     <h3 class="pattern-lab-font__family" style="{{ webfont.style }}">{{ webfont.family_name }}</h3>

source/_patterns/01-global/02-typography/typography.yml

@@ -32,6 +32,28 @@ webfonts:
       font_name: 'georgia'
       font_weight: '700'
       font_style: 'normal'
+-
+  family_name: 'Barlow'
+  style: 'font-family: Barlow, sans-serif;'
+  font:
+    -
+      font_preview_character: 'Aa'
+      font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+      font_preview_style: 'font-family: Barlow; font-weight: 400; font-style: normal;'
+      font_name: 'Barlow'
+      font_weight: 'normal'
+      font_style: 'normal'
+-
+  family_name: 'Barlow Condensed'
+  style: 'font-family:"Barlow Condensed", sans-serif;'
+  font:
+    -
+      font_preview_character: 'Aa'
+      font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+      font_preview_style: "font-family: 'Barlow Condensed'; font-weight: 500; font-style: normal;"
+      font_name: 'Barlow Condensed'
+      font_weight: 'medium'
+      font_style: 'normal'
 -
   family_name: 'BureauGrot'
   style: 'font-family: "BureauGrot", serif;'
@@ -204,7 +226,8 @@ webfonts:
     -
       font_preview_character: 'Aa'
       font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
-      font_preview_style: "font-family: fdsu-rwd; font-weight: 400; font-style: normal;"
+      font_preview_style: 'font-family: fdsu-rwd; font-weight: 400; font-style: normal;'
       font_name: 'fdsu-rwd'
       font_weight: 'normal'
       font_style: 'normal'
+

source/_patterns/02-base/02-html-elements/24-table/_table.scss

@@ -2,26 +2,24 @@
 // Table styles.
 
 caption {
-  margin-bottom: rem(gesso-spacing(xxs));
+  font-size: gesso-base-font-size();
+  font-style:italic;
+  padding: gesso-spacing(xs);
 }
 
-// col {}
-
-// colgroup {}
-
 table {
   border-collapse: collapse;
   border-spacing: 0;
-  margin-bottom: rem(gesso-spacing(xs));
-  min-width: 100%;
-}
+  margin: rem(gesso-spacing(xs)) 0;
+  max-width: 100%;
+  width: 100%;
 
-// tbody {}
+}
 
 td {
   background-color: gesso-color(table, background);
   border: 1px solid gesso-color(table, border);
-  padding: rem(gesso-spacing(sm));
+  padding: gesso-spacing(xs);
 }
 
 tfoot {
@@ -32,10 +30,14 @@ tfoot {
 }
 
 th {
-  background-color: gesso-color(table, background);
+  background-color: gesso-color(table, background-head);
   border: 1px solid gesso-color(table, border);
-  padding: rem(gesso-spacing(sm));
+  font-style:italic;
+  padding: gesso-spacing(xs);
   text-align: left;
+  &[scope="row"] {
+    background-color: gesso-color(table, background-head);
+  }
 }
 
 thead {

source/_patterns/02-base/02-html-elements/25-forms/_forms.scss

@@ -96,7 +96,9 @@ label,
   font-family: $form-label-font-family;
   font-size: gesso-font-size(2);
   font-weight:  gesso-font-weight(regular);
-  margin-bottom: rem(gesso-spacing(xs));
+  form &{
+    margin-bottom: rem(gesso-spacing(xs));
+  }
   abbr {
     display: inline;
     font-size: gesso-font-size(1);

source/_patterns/03-layouts/node/_node.scss

@@ -6,9 +6,6 @@ $sidebar-gap: $grid-gap;
   }
   &__sidebar{
     display:none;
-    *{
-      padding-right:0.25rem;
-    }
   }
   // Reset the grid to become flexed when we have sidebar.
   &.uw-node__with-sidebar{
@@ -25,25 +22,30 @@ $sidebar-gap: $grid-gap;
         margin:0 auto;
       }
       .uw-full-width{
-
         width:100vw;
 
       }
       @include medium {
         flex-direction: row;
         gap:$sidebar-gap;
+
         .layout{
+          padding-right:0;
           width: clamp(320px, 868px, calc(100vw - 347px));
         }
         .uw-contained-width{
+          padding-right:0;
           width: clamp(320px, 868px, calc(100vw - 347px));
         }
         /* Match the width of WCMS2's narrow: 496px */
         .uw-contained-width--narrow{
+          padding-right:0;
           width: clamp(320px, 496px, calc(100vw - 347px));
+
         }
         /* Match the width of WCMS2's wide: 753px */
         .uw-contained-width--wide{
+          padding-right:0;
           width: clamp(320px, 753px, calc(100vw -  347px));
         }
       }
@@ -51,27 +53,33 @@ $sidebar-gap: $grid-gap;
     .uw-node__sidebar{
       // Turn on sidebar with display.
       display:block;
+      padding:0 1rem;
       width:100%;
+
+      .layout{
+        padding:0;
+      }
       @include medium {
-        padding: 1rem 0;
+        padding:0;
         width: $sidebar-width;
         .layout{
           width:inherit;
         }
       }
-
     }
   }
 }
 // Class appears when full width content loads with sidebar on page
 .uw-section-has-full-width.uw-node__with-sidebar {
   .uw-node__grid {
+    justify-content: space-between;
     .uw-node__node{
       width:100%;
       @include medium {
+        padding-right:0;
         width: calc(100vw - 347px);
       }
-    }
+   }
     .uw-full-width{
       max-width:inherit;
       padding:0;
@@ -79,8 +87,8 @@ $sidebar-gap: $grid-gap;
     }
   }
   .uw-node__sidebar{
-    padding: 0
+    @include medium{
+      padding: 0
+    }
   }
-
-
 }

source/_patterns/04-components/card/_card.scss

@@ -135,6 +135,9 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 .card__content {
   margin-bottom: rem(gesso-spacing(md));
   width: 100%;
+  &:empty{
+    margin-bottom:0;
+  }
 }
 
 .card__media {

source/_patterns/04-components/card/card--node/_card--node.scss

@@ -31,4 +31,47 @@
       padding: 0;
     }
   }
+// CSS for specific node card presentations layers
+  &--contact {
+    display:grid;
+    gap:$grid-gap;
+    .card__content{
+     .layout {padding:0;}
+    }
+    @include medium {
+      display: grid;
+      gap: 2rem;
+      grid-template-columns: 10rem 1fr;
+    }
+
+    .card__image {
+      grid-column: 1 / 3;
+      grid-row: 1 / 10;
+      @include medium {
+        grid-column: 1 / 2;
+      }
+    }
+
+    .card__header,
+    .card__body,
+    .card__footer {
+      grid-column: 1 / 3;
+      @include medium {
+        grid-column: 2 / 3;
+      }
+      padding: 0;
+    }
+
+    .uw-node__without-image & {
+      @include medium {
+        grid-template-columns: 100%;
+      }
+
+      .card__header,
+      .card__body,
+      .card__footer {
+        grid-column: 1 / 2;
+      }
+    }
+  }
 }

source/_patterns/04-components/card/card--node/card--node.twig

-{% if node.hero_image and node.hero_image.img_element %}
+{% if node.hero_image and node.hero_image.img_element or node.image %}
   {% set node_image_class =  'with-image' %}
 {% else %}
   {% set node_image_class =  'without-image' %}
 {% endif %}
 
+{% set modifier_classes = 'node--' ~ node.bundle %}
+
 <div class="uw-node__{{ node_image_class }}">
   {% include '@components/card/card.twig' with {
     'url': node.url,
@@ -11,7 +13,7 @@
     'show_hover': '',
     'header': node.header,
     'media': node.media,
-    'listing_image': node.listing_image,
+    'image': node.image,
     'content': node.content,
     'footer': node.footer,
     'tags': node.tags,

source/_patterns/04-components/card/card--teaser/card--teaser.twig

@@ -4,11 +4,14 @@
   {% set show_hover = 'true' %}
 {% endif %}
 
+{% set modifier_classes = 'teaser--' ~ teaser.bundle %}
+
 {% include '@components/card/card.twig' with {
+  'modifier_classes': modifier_classes,
   'type': type,
   'url': teaser.url,
   'header': teaser.header,
-  'listing_image': teaser.listing_image,
+  'image': teaser.image,
   'content': teaser.content,
   'footer': teaser.footer,
   'tags': teaser.tags,

source/_patterns/04-components/card/card-elements/_contact-for.twig

 <div class="card__contact-for">
-  {% embed '@components/details/details.twig' %}
+  {% embed '@components/details/details.twig' with {
+    'is_open': TRUE,
+  }%}
     {% block details_summary %}
       Contact for
     {% endblock %}

source/_patterns/04-components/card/card-elements/_contact-info.twig

 <div class="card__contact-info">
-  {% embed '@components/details/details.twig' %}
+  {% embed '@components/details/details.twig'  with {
+    'is_open': TRUE,
+  }%}
     {% block details_summary %}
       Contact Information
     {% endblock %}

source/_patterns/04-components/card/card-elements/_content.twig

-<div class="card__content">
-  {{ content }}
-</div>
+<div class="card__content">{{ content }}</div>

source/_patterns/04-components/card/card-elements/_footer-elements.twig

-{% if footer.additional_info %}
-  {% include '@components/card/card-elements/_additional-info.twig' with {
-    'additional_info': footer.additional_info
-  } %}
-{% endif %}
 
 {% if footer.service_information %}
   {% include '@components/card/card-elements/_service-information.twig' with {
@@ -28,6 +23,18 @@
   } %}
 {% endif %}
 
+{% if footer.contact_for %}
+  {% include '@components/card/card-elements/_contact-for.twig' with {
+    'contact_for': footer.contact_for
+  } %}
+{% endif %}
+
+{% if footer.groups %}
+  {% include '@components/card/card-elements/_groups.twig' with {
+    'groups': footer.groups.groups
+  } %}
+{% endif %}
+
 {% if footer.links %}
   {% include '@components/card/card-elements/_links.twig' with {
     'links': footer.links
@@ -40,15 +47,9 @@
   }%}
 {% endif %}
 
-{% if footer.contact_for %}
-  {% include '@components/card/card-elements/_contact-for.twig' with {
-    'contact_for': footer.contact_for
-  } %}
-{% endif %}
-
-{% if footer.groups %}
-  {% include '@components/card/card-elements/_groups.twig' with {
-    'groups': footer.groups.groups
+{% if footer.additional_info %}
+  {% include '@components/card/card-elements/_additional-info.twig' with {
+    'additional_info': footer.additional_info
   } %}
 {% endif %}