shortcut styles

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

@@ -225,4 +225,44 @@
     right: 10px;
     top: 10px;
   }
+
+  .shortcuts-panel {
+    &__title {
+      @include font-size(18px, 22px);
+      @include font-weight($bold);
+      //border-bottom: 1px solid var(--grayscale-medium-dark);
+      color: var(--grayscale-black);
+      font-family: var(--main-font-family);
+      letter-spacing: -0.56px;
+      margin-bottom: 18px;
+      text-transform: uppercase;
+    }
+    &__shortcut-item {
+      border-bottom: 1px solid var(--grayscale-medium-dark);
+      &__first {
+        border-top: 1px solid var(--grayscale-medium-dark);
+      }
+
+      a {
+        @include font-size(16px, 22px);
+        @include font-weight($semibold);
+        color: var(--grayscale-black);
+        display: flex;
+        flex-direction: row;
+        font-family: var(--main-font-family);
+        letter-spacing: -0.5px;
+        padding: 19px 0;
+        text-decoration: none;
+      }
+
+      span.shortcut-item__icon {
+        position: absolute;
+        right: 0;
+
+        svg {
+          padding: 4px;
+        }
+      }
+    }
+  }
 }

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

@@ -144,6 +144,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}>
@@ -170,11 +171,15 @@ export class HyDesktopMenuLinks {
                             </ul>
                             {link.shortcuts.length > 0 && (
                               <div class="shortcuts-panel">
-                                <span class="shortcut-panel__title">{'Shortcuts'}</span>
-                                {link.shortcuts.map((shortcut_item) => {
+                                <div class="shortcuts-panel__title">{'Shortcuts'}</div>
+                                {link.shortcuts.map((shortcut_item, index) => {
                                   let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
+                                  let shortcutClass = [
+                                    'shortcuts-panel__shortcut-item',
+                                    index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
+                                  ].join(' ');
                                   return (
-                                    <div class="shortcut-item">
+                                    <div class={shortcutClass}>
                                       <a
                                         aria-current={shortcut_item.shortcut_aria_label}
                                         href={shortcut_item.shortcut_url}
@@ -183,6 +188,9 @@ export class HyDesktopMenuLinks {
                                         aria-label={shortcut_item.shortcut_aria_label}
                                       >
                                         <span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
+                                        <span class="shortcut-item__icon">
+                                          <hy-icon icon={'hy-icon-arrow-right'} size={24} />
+                                        </span>
                                       </a>
                                     </div>
                                   );