Addidtional css to allow for semantic flow of content when no javascript is in browser

css/styles.css

@@ -4410,9 +4410,18 @@ fieldset,
 .uw-tabs {
   margin: 16px auto;
   width: 100%; }
+  .uw-tabs .hide-js {
+    display: none; }
+    html:not(.js) .uw-tabs .hide-js {
+      border-bottom: 2px solid #eee;
+      display: block;
+      margin-bottom: 8px;
+      padding-bottom: 8px; }
 
 .uw-tab {
   display: flex; }
+  html:not(.js) .uw-tab {
+    display: none; }
 
 .uw-tablinks {
   border-bottom: 0.4rem solid #fff;
@@ -4430,11 +4439,13 @@ fieldset,
 .uw-tabcontent[role="tabpanel"] {
   display: flex;
   flex-flow: row wrap;
-  padding-top: 1rem; }
+  padding-top: 24px; }
   .uw-tabcontent[role="tabpanel"][hidden] {
-    background: #cd5c5c;
     display: none; }
 
+html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
+  display: flex; }
+
 .uw-tabcontent[role="tabpanel"] .card {
   width: 100%; }
   @media (min-width: 40.06rem) {

source/_patterns/04-components/multi-type-list/_multi-type-list.scss

 .uw-tabs{
   margin:gesso-spacing(sm) auto;
   width: 100%;
+  .hide-js{
+    display:none;
+    html:not(.js) &{
+      border-bottom:2px solid $button-background-color-hover;
+      display:block;
+      margin-bottom: gesso-spacing(xs);
+      padding-bottom: gesso-spacing(xs);
+    }
+  }
 }
 //buttons wrapper
+
 .uw-tab {
   display:flex;
-
+  html:not(.js) &{
+    display:none;
+  }
 }
 //button
 .uw-tablinks {
@@ -28,16 +40,20 @@
 .uw-tabcontent[role="tabpanel"] {
   display:flex;
   flex-flow: row wrap;
-  padding-top:1rem;
+  padding-top: gesso-spacing(md);
 
   &[hidden] {
-    background: #cd5c5c;
     display:none;
   }
 
 }
+html:not(.js) .uw-tabcontent[role="tabpanel"][hidden]{
+
+    display: flex;
+}
+
 .uw-tabcontent[role="tabpanel"] .card{
-   width:100%;
+  width:100%;
   @include small{
     flex-grow: 1;
     width: 45%;
@@ -49,4 +65,4 @@
 // lineup the top of the date with the title in blog teaser
 .uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title{
   margin-top:0;
-}
\ No newline at end of file
+}

source/_patterns/04-components/multi-type-list/multi-type-list.twig

@@ -9,12 +9,12 @@
     {% endfor %}
   </div>
 {% for type, list in lists %}
-
+  <h2 class="hide-js"> {{ type }}</h2>
   <div id="{{ type }}" class="uw-tabcontent" role="tabpanel" tabindex="0" aria-labelledby="tab-{{ loop.index }}" {% if loop.index > 1 %} hidden {%  endif %} >
-
     {% for content in list %}
 
       {% if type == 'Blog' %}
+
         {% include '@components/teaser/teaser--blog/teaser--blog.twig' with {
           'title': content.title,
           'url': content.url,