ISTWCMS-5801: adding things for subtitle

src/patterns/04-components/site-name/_site-name.scss

@@ -3,29 +3,46 @@
 @use '../../01-core' as *;
 
 $site-name-font-size: var(--font-size-5);
+$site-slogan-font-size: var(--font-size-2);
 
 .uw-site-name {
-  a{
+  a {
     color: var(--uw-black);
     &:hover{
       text-decoration: underline;
     }
   }
-  &__wrapper{
+
+  &__wrapper {
     padding: 0 var(--size-1);
     @media(min-width: $screen-md) {
       @include uw-contained-width();
     }
   }
-  &__link{
+
+  &__link {
     display: inline-block;
     letter-spacing: inherit;
     text-decoration: none;
     text-transform: uppercase;
   }
-  &__text{
+
+  &__text {
     font-size: $site-name-font-size;
     margin: 0;
     padding: var(--size-1) 0;
   }
+
+  &__subtitle {
+    display: block;
+    font-family: var(--font-condensedbook);
+    font-size: var(--font-size-0);
+
+    @media(min-width: $screen-md) {
+      font-size: $site-slogan-font-size;
+    }
+
+    margin: 0;
+    padding: 0 0 0.5rem;
+  }
 }

src/patterns/04-components/site-name/site-name.twig

@@ -2,6 +2,11 @@
   <div class="uw-site-name__wrapper">
     <a class="uw-site-name__link" href="{{ home_link }}" title="{{ site_name}} {{ 'Home'|t }}" rel="home">
       <h1 class="uw-site-name__text">{{ site_name }}</h1>
+      {% if subtitle %}
+        {% include '@components/site-slogan/site-slogan.twig' with {
+          'subtitle': subtitle,
+        } %}
+      {% endif %}
     </a>
   </div>
 </div>

src/patterns/04-components/site-slogan/_site-slogan.scss

+// @file
+// Styles for Site slogan.
+
+// .site-slogan {}

src/patterns/04-components/site-slogan/site-slogan.md

+---
+el: .site-slogan
+title: Site Slogan
+---
+
+__Variables:__
+* site_slogan: [string] Text of the site slogan.

src/patterns/04-components/site-slogan/site-slogan.twig

+<h2 class="uw-site-name__subtitle">{{ subtitle }}</h2>