diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss index 7321fd04f1a87123152fe04e05d5858689ae5be3..2113b48f62ccb0b7b09f374578cbf2004d060e78 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss +++ b/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; diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx index fa226114de97b2ea62346197891e64a29f7afd5a..dfbdf8615f10280316ed84142e0c0f2872ec917d 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx @@ -1,6 +1,7 @@ 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}>