desktop menu first level, description

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -90,6 +90,7 @@
           align-items: center;
           color: var(--brand-main-nearly-black);
           display: flex;
+          flex-direction: row;
           font-family: var(--main-font-family);
           text-decoration: none;
           width: 100%;
@@ -111,7 +112,9 @@
         a {
           @include breakpoint($extrawide) {
             @include font-size(24px, 32px);
+            align-items: flex-start;
             background-color: var(--grayscale-background-box);
+            flex-direction: column;
             letter-spacing: -0.75px;
             margin-bottom: 4px;
             padding-left: 32px;
@@ -131,6 +134,14 @@
             border: none;
             margin-left: 14px;
           }
+          .hy-menu-item__description {
+            @include font-size(16px, 24px);
+            @include font-weight($semibold);
+            color: var(--grayscale-dark);
+            letter-spacing: 0;
+            margin-left: 14px;
+            margin-bottom: 28px;
+          }
 
           span.heading-icon-first {
             position: absolute;
@@ -154,6 +165,8 @@
         a {
           @include breakpoint($extrawide) {
             @include font-size(15px, 22px);
+            align-items: center;
+            flex-direction: row;
             letter-spacing: -0.47px;
             padding-left: 24px;
             padding-right: 24px;

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

 export interface DesktopLinks {
   label: string;
   url: string;
+  description: string;
   menuLinkId: string;
   items: Array<DesktopLinks>;
 }
@@ -122,6 +123,7 @@ export class HyDesktopMenuLinks {
                             <hy-icon icon={'hy-icon-arrow-right'} size={40} />
                           </span>
                           <span class="hy-menu-item__label">{link.label}</span>
+                          <span class="hy-menu-item__description">{link.description}</span>
                         </a>
                         {link.items && (
                           <ul class="second" menu-link-id={link.menuLinkId}>