diff --git a/package.json b/package.json
index b71a575a7fb639c4087449cb47a79dd2d02916c0..2ecbc083455c01a45aa9ef8812beeb78214b0a3d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "description": "Helsinki University Design System library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/src/components.d.ts b/src/components.d.ts
index 40953f94d873d8aa019c8331688976b186f0f8ca..cf8d89ed61767b0984feb4f157eae5f9978a6d6d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -278,6 +278,7 @@ export namespace Components {
     variant: CtaLinkButtonVariants;
   }
   interface HyCtaLink {
+    headerstyle: string;
     isExternal: boolean;
     linkContent: string;
     scLabel?: string;
@@ -1591,6 +1592,7 @@ declare namespace LocalJSX {
     variant?: CtaLinkButtonVariants;
   }
   interface HyCtaLink {
+    headerstyle?: string;
     isExternal?: boolean;
     linkContent?: string;
     scLabel?: string;
diff --git a/src/components/adjacent-image-text/adjacent-image-text.scss b/src/components/adjacent-image-text/adjacent-image-text.scss
index 6133efb2144a8920a42771c0da56d9783dc0583d..6e7ecf0d777da6d612fada40ff26bc6057e81062 100644
--- a/src/components/adjacent-image-text/adjacent-image-text.scss
+++ b/src/components/adjacent-image-text/adjacent-image-text.scss
@@ -96,6 +96,17 @@ $margin-narrow: 32px;
       -o-border-image: none;
     }
 
+    &__links-wrapper {
+      padding-left: 1rem;
+      @include breakpoint($narrow) {
+        padding-left: 50px;
+      }
+      @include breakpoint($wide) {
+        margin: 0 0 0 14%;
+        padding: 0;
+      }
+    }
+
     &__info-wrapper {
       padding-left: 0;
       padding-right: 0;
diff --git a/src/components/button/readme.md b/src/components/button/readme.md
index b8df5006ea713d7e44726237e33cfb78f453b40b..7928b9cec4b2d92c2aef0fd67c6b1897b65d46f4 100644
--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -139,10 +139,6 @@ Well, it's a button.
 
 ## Dependencies
 
-### Used by
-
-- [hy-footer-info](../footer/hy-footer-info)
-
 ### Depends on
 
 - [hy-icon](../icon)
@@ -152,7 +148,6 @@ Well, it's a button.
 ```mermaid
 graph TD;
   hy-button --> hy-icon
-  hy-footer-info --> hy-button
   style hy-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/courses/hy-content-list-item/hy-content-list-item.scss b/src/components/courses/hy-content-list-item/hy-content-list-item.scss
index 42cb4698d58773630cb6cc28ec4832adfa93da21..6d335d6f9fd9512b6ba149b3d3464bb15919cd8a 100644
--- a/src/components/courses/hy-content-list-item/hy-content-list-item.scss
+++ b/src/components/courses/hy-content-list-item/hy-content-list-item.scss
@@ -83,6 +83,7 @@
     @include font-weight($bold);
     letter-spacing: -0.6px;
     margin-bottom: 16px;
+    word-break: break-word;
   }
 
   &--metadata {
diff --git a/src/components/cta-button/readme.md b/src/components/cta-button/readme.md
index 912fbf5b3a87d9ac215450c0713cd4e69948ec25..0c397171d2028da6ef277638ad9d879a65c2d266 100644
--- a/src/components/cta-button/readme.md
+++ b/src/components/cta-button/readme.md
@@ -18,6 +18,7 @@
 ### Used by
 
 - [hy-banner](../hy-banner)
+- [hy-footer-info](../footer/hy-footer-info)
 - [hy-hero](../hy-hero)
 
 ### Depends on
@@ -30,6 +31,7 @@
 graph TD;
   hy-cta-button --> hy-icon
   hy-banner --> hy-cta-button
+  hy-footer-info --> hy-cta-button
   hy-hero --> hy-cta-button
   style hy-cta-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/src/components/cta-link/cta-link.scss b/src/components/cta-link/cta-link.scss
index a505ced3377d48118b0d49dfa73e1078847aa577..9c2194e3bf233241759f0fe666763a0552e90124 100644
--- a/src/components/cta-link/cta-link.scss
+++ b/src/components/cta-link/cta-link.scss
@@ -7,25 +7,40 @@
 }
 
 .hy-cta-link {
+  @include font-weight($semibold);
+  align-items: center;
   background-color: transparent;
   color: var(--brand-main);
   cursor: pointer;
   display: flex;
   font-family: var(--main-font-family);
-  font-weight: 600;
   height: 100%;
   position: relative;
   text-decoration: none;
 
   &.default {
+    @include font-size(14px, 16px);
     align-items: right;
-    font-size: 20px;
-    letter-spacing: -0.67px;
-    line-height: 20px;
+    letter-spacing: -0.26px;
+
+    @include breakpoint($narrow) {
+      @include font-size(16px, 18px);
+      letter-spacing: -0.3px;
+    }
+    @include breakpoint($xlarge) {
+      @include font-size(18px, 20px);
+      letter-spacing: -0.34px;
+    }
+    &__large {
+      @include breakpoint($extrawide) {
+        @include font-size(18px, 20px);
+        letter-spacing: -0.34px;
+      }
+    }
 
     .text {
       padding: 14px 0;
-      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      text-align: right;
     }
     .link-icon {
       margin-left: 16px;
@@ -50,22 +65,20 @@
   }
 
   &.link-list {
+    @include font-size(14px, 16px);
     align-items: center;
-    font-size: 15px;
     justify-content: center;
-    letter-spacing: -0.5px;
-    line-height: 20px;
+    letter-spacing: -0.26px;
 
     @include breakpoint($narrow) {
-      font-size: 16px;
-      letter-spacing: -0.53px;
+      @include font-size(16px, 18px);
+      letter-spacing: -0.3px;
     }
 
     .text {
       background-color: var(--grayscale-background-box);
       margin-left: -36px;
       padding: 10px 10px 10px 48px;
-      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
 
     .hy-icon-wrapper {
diff --git a/src/components/cta-link/cta-link.tsx b/src/components/cta-link/cta-link.tsx
index e8b98dd0ab7a241bf33b6ba0eeb0aa137523532d..975342796b40e05d81988649466376cc2405a613 100644
--- a/src/components/cta-link/cta-link.tsx
+++ b/src/components/cta-link/cta-link.tsx
@@ -1,4 +1,4 @@
-import {Component, ComponentInterface, Prop, h} from '@stencil/core';
+import {Component, ComponentInterface, Prop, h, Element} from '@stencil/core';
 import {CtaLinkVariants} from '../../utils/utils';
 
 @Component({
@@ -7,14 +7,25 @@ import {CtaLinkVariants} from '../../utils/utils';
   shadow: true,
 })
 export class CtaLink implements ComponentInterface {
+  @Element() el: HTMLElement;
   @Prop() variant: CtaLinkVariants = CtaLinkVariants.default;
   @Prop() linkContent: string = '';
   @Prop() url?: string;
   @Prop() scLabel?: string;
   @Prop() isExternal: boolean = false;
+  @Prop() headerstyle: string = 'default';
+
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+  }
 
   render() {
-    const classAttributes = ['hy-cta-link', this.variant].join(' ');
+    const classAttributes = ['hy-cta-link', this.variant, `${this.variant}__${this.headerstyle}`].join(' ');
 
     const containerClassAttributes = ['hy-cta-link-container'].join(' ');
 
@@ -35,7 +46,7 @@ export class CtaLink implements ComponentInterface {
           <span class={textClassAttributes}>{this.linkContent.length === 0 ? <slot /> : this.linkContent}</span>
           {this.variant == CtaLinkVariants.default && (
             <span class={iconClassAttributes}>
-              <hy-icon icon={'hy-icon-arrow-right'} size={48} />
+              <hy-icon icon={'hy-icon-arrow-right'} size={40} />
             </span>
           )}
         </a>
diff --git a/src/components/cta-link/readme.md b/src/components/cta-link/readme.md
index d1305dfc1673718a65c7e80d2c7c30eb71e6fb60..e4b4958996d93048a6ae795751ca9961da3b75db 100644
--- a/src/components/cta-link/readme.md
+++ b/src/components/cta-link/readme.md
@@ -6,6 +6,7 @@
 
 | Property      | Attribute      | Description | Type                                                  | Default                   |
 | ------------- | -------------- | ----------- | ----------------------------------------------------- | ------------------------- |
+| `headerstyle` | `headerstyle`  |             | `string`                                              | `'default'`               |
 | `isExternal`  | `is-external`  |             | `boolean`                                             | `false`                   |
 | `linkContent` | `link-content` |             | `string`                                              | `''`                      |
 | `scLabel`     | `sc-label`     |             | `string`                                              | `undefined`               |
diff --git a/src/components/footer/hy-footer-info/hy-footer-info.scss b/src/components/footer/hy-footer-info/hy-footer-info.scss
index ff49176a503fe3e5b321d02e29d86dd013113641..cbddb39369c77e9839cb040d9b733cade4250d66 100644
--- a/src/components/footer/hy-footer-info/hy-footer-info.scss
+++ b/src/components/footer/hy-footer-info/hy-footer-info.scss
@@ -62,21 +62,26 @@
   }
 
   &__links {
+    align-content: space-around;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     max-height: auto;
+    overflow: hidden;
+
     width: 100%;
 
     @include breakpoint($narrow) {
-      max-height: 430px;
+      max-height: 555px;
       width: 100%;
     }
-
     @include breakpoint($wide) {
-      max-height: 430px;
+      max-height: 530px;
       width: 65.56%;
     }
+    @include breakpoint($overwide) {
+      max-height: 460px;
+    }
   }
 
   .hy-accordion__content--inner-wrapper {
diff --git a/src/components/footer/hy-footer-info/hy-footer-info.tsx b/src/components/footer/hy-footer-info/hy-footer-info.tsx
index ee4be9e346c4d12b720cc93e6765feed4671c297..062512217601d6935b677b183eb28cc9298bd6d9 100644
--- a/src/components/footer/hy-footer-info/hy-footer-info.tsx
+++ b/src/components/footer/hy-footer-info/hy-footer-info.tsx
@@ -8,7 +8,7 @@ export interface FooterInfoLinks {
 
 import {Component, ComponentInterface, Element, Watch, Host, State, Prop, h} from '@stencil/core';
 import ResizeObserver from 'resize-observer-polyfill';
-import {HeadingVarians, FooterLinkItemColor, FooterLinkVariants} from '../../../utils/utils';
+import {HeadingVarians, FooterLinkItemColor, FooterLinkVariants, CtaLinkButtonVariants} from '../../../utils/utils';
 
 @Component({
   tag: 'hy-footer-info',
@@ -77,9 +77,13 @@ export class HyFooterInfo implements ComponentInterface {
           <hy-heading heading={HeadingVarians.h2}>{this.textTitle}</hy-heading>
           <div class="hy-footer-info__ingress">{this.textDescription}</div>
           {this.linkUrl && (
-            <hy-button variant="secondary" icon-right="hy-icon-arrow-right" url={this.linkUrl} size={'large'}>
-              {this.linkText}
-            </hy-button>
+            <hy-cta-button
+              link-content={this.linkText}
+              sc-label={this.linkText}
+              url={this.linkUrl}
+              is-external="false"
+              variant={CtaLinkButtonVariants.onWhiteBkgd}
+            />
           )}
         </div>
         {this.isMobile ? (
diff --git a/src/components/footer/hy-footer-info/readme.md b/src/components/footer/hy-footer-info/readme.md
index bd941092c893254f3e2086d3552ae38628eca947..36cf5db089b20a21c78ba246dcc1cc66624e0d91 100644
--- a/src/components/footer/hy-footer-info/readme.md
+++ b/src/components/footer/hy-footer-info/readme.md
@@ -17,7 +17,7 @@
 ### Depends on
 
 - [hy-heading](../../heading)
-- [hy-button](../../button)
+- [hy-cta-button](../../cta-button)
 - [hy-accordion-container](../../accordion-container)
 - [hy-accordion-item](../../accordion-item)
 - [hy-footer-link-item](../hy-footer-link-item)
@@ -27,12 +27,12 @@
 ```mermaid
 graph TD;
   hy-footer-info --> hy-heading
-  hy-footer-info --> hy-button
+  hy-footer-info --> hy-cta-button
   hy-footer-info --> hy-accordion-container
   hy-footer-info --> hy-accordion-item
   hy-footer-info --> hy-footer-link-item
   hy-heading --> hy-box
-  hy-button --> hy-icon
+  hy-cta-button --> hy-icon
   hy-accordion-container --> hy-box
   hy-accordion-item --> hy-icon
   hy-footer-link-item --> hy-icon
diff --git a/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss b/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
index c549328f5a113da9bd666666f586a1665c331b2c..873f9a259f029cf2a8e14afcb6942fd27582e4c5 100644
--- a/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
+++ b/src/components/footer/hy-footer-link-item/hy-footer-link-item.scss
@@ -11,10 +11,12 @@ hy-footer-link-item:not([main-link]) {
 }
 
 hy-footer-link-item[main-link] {
+  hyphens: auto;
+  min-width: 200px;
   width: 100%;
 
   @include breakpoint($narrow) {
-    max-width: 30%;
+    max-width: 50%;
   }
 }
 
diff --git a/src/components/hy-crisis-banner/hy-crisis-banner.scss b/src/components/hy-crisis-banner/hy-crisis-banner.scss
index 29d375deed40ffcddc9f4668099851860bfb432d..e43f9a0f54926e745c39fd67ae96942d69fa8d59 100644
--- a/src/components/hy-crisis-banner/hy-crisis-banner.scss
+++ b/src/components/hy-crisis-banner/hy-crisis-banner.scss
@@ -81,39 +81,27 @@
 
 .hy-crisis-banner__title {
   @include font-size(14px, 16px);
+  @include font-weight($bold);
   color: var(--grayscale-black);
   font-family: var(--main-font-family);
-  font-weight: 600;
-  letter-spacing: -0.07px;
-  margin: 0;
-
-  @include breakpoint($narrow) {
-    @include font-size(16px, 20px);
-    letter-spacing: -0.08px;
-  }
+  letter-spacing: -0.35px;
+  margin: 0 0 2px 0;
 
-  @include breakpoint($wide) {
-    @include font-size(20px, 26px);
-    letter-spacing: -0.1px;
+  @include breakpoint($xlarge) {
+    @include font-size(16px, 18px);
+    letter-spacing: -0.4px;
   }
 }
 
 .hy-crisis-banner__description {
-  @include font-size(14px, 16px);
-  color: var(--grayscale-black);
+  @include font-size(12px, 14px);
+  color: var(--grayscale-dark);
   font-family: var(--main-font-family);
-  font-weight: 600;
-  letter-spacing: -0.07px;
+  letter-spacing: -0.35px;
   margin: 0;
 
   @include breakpoint($narrow) {
-    @include font-size(16px, 20px);
-    letter-spacing: -0.08px;
-  }
-
-  @include breakpoint($wide) {
-    @include font-size(20px, 26px);
-    letter-spacing: -0.1px;
+    @include font-size(14px, 16px);
   }
 
   p {
@@ -126,34 +114,31 @@
 }
 
 .hy-crisis-banner__link {
-  @include font-size(14px, 19px);
+  @include font-size(14px, 16px);
+  @include font-weight($semibold);
   align-items: center;
   color: var(--brand-main-light);
   display: inline-flex;
   font-family: var(--main-font-family);
-  font-weight: 600;
-  letter-spacing: -0.07px;
-  margin-left: auto;
-  margin-top: 12px;
+  letter-spacing: -0.5px;
+  margin: 12px 0 0;
+  overflow: hidden;
   text-decoration: none;
 
   @include breakpoint($narrow) {
-    @include font-size(16px, 22px);
     flex-shrink: 0;
-    letter-spacing: -0.08px;
     margin-left: 24px;
+    margin-right: 32px;
     margin-top: 0;
     text-align: right;
   }
 
-  @include breakpoint($wide) {
-    @include font-size(20px, 32px);
-    letter-spacing: -0.1px;
-  }
-
   @include breakpoint($extrawide) {
     margin-left: 32px;
   }
+  @include breakpoint($xlarge) {
+    @include font-size(16px, 18px);
+  }
 
   &:hover,
   &:focus {
@@ -180,14 +165,14 @@
   svg {
     fill: var(--brand-main-light);
     height: 12px;
-    width: 11px;
+    width: 12px;
 
     @include breakpoint($narrow) {
       height: 14px;
-      width: 13px;
+      width: 14px;
     }
 
-    @include breakpoint($wide) {
+    @include breakpoint($xlarge) {
       height: 16px;
       width: 16px;
     }
diff --git a/src/components/hy-key-highlight/hy-key-highlight.scss b/src/components/hy-key-highlight/hy-key-highlight.scss
index 77495ab34a6f3589cd9a2babb19f6d279153c973..c556c96de0d0255f81a9b94d3a528b2169279852 100644
--- a/src/components/hy-key-highlight/hy-key-highlight.scss
+++ b/src/components/hy-key-highlight/hy-key-highlight.scss
@@ -38,6 +38,7 @@
     padding: 0 5px;
     position: relative;
     text-transform: uppercase;
+    word-break: break-word;
   }
 
   &__description {
diff --git a/src/components/hy-person-card/hy-person-card.tsx b/src/components/hy-person-card/hy-person-card.tsx
index 6b15636f4bb873151f73787a94fca330917693e7..862a1a23d36f12119f949156a4402ac34f359259 100644
--- a/src/components/hy-person-card/hy-person-card.tsx
+++ b/src/components/hy-person-card/hy-person-card.tsx
@@ -24,7 +24,7 @@ export class HyPersonCard {
   private _fullName: string;
   private _initials: string;
 
-  componentWillLoad() {
+  componentWillRender() {
     this._fullName = this.firstName && this.lastName ? `${this.firstName} ${this.lastName}` : '';
     this._initials =
       this.imageUrl && this.firstName && this.lastName ? '' : `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`;
diff --git a/src/components/hy-shortcuts/hy-shortcuts.scss b/src/components/hy-shortcuts/hy-shortcuts.scss
index fe29c93f429acce086d13143ea8f4d165fa7c36e..8bd13ac94c703b52d55244655a0651c3a2150a8c 100644
--- a/src/components/hy-shortcuts/hy-shortcuts.scss
+++ b/src/components/hy-shortcuts/hy-shortcuts.scss
@@ -77,6 +77,7 @@
       min-height: 70px;
       position: relative;
       text-decoration: none;
+      word-break: break-word;
 
       @include breakpoint($narrow) {
         // tablet
diff --git a/src/components/hy-tabs/hy-tabs.scss b/src/components/hy-tabs/hy-tabs.scss
index abf43e10c3f6e0b0037eca2d556d05f0cd0a1040..b0753195e0bdfbbecab87ad5aa7d5b9021e26492 100644
--- a/src/components/hy-tabs/hy-tabs.scss
+++ b/src/components/hy-tabs/hy-tabs.scss
@@ -109,6 +109,13 @@
     padding: 8px;
     position: relative;
     white-space: normal;
+    word-break: break-word;
+
+    @supports (overflow-wrap: anywhere) {
+      overflow-wrap: anywhere;
+    }
+
+    overflow-wrap: break-word;
 
     @supports (overflow-wrap: anywhere) {
       overflow-wrap: anywhere;
diff --git a/src/components/link-box/link-box.scss b/src/components/link-box/link-box.scss
index 943caffd74d66b30ad88b0d2f89539ba07573bc5..e82e7997a8a5762ecd8475a4db0787f91c4f0aea 100644
--- a/src/components/link-box/link-box.scss
+++ b/src/components/link-box/link-box.scss
@@ -148,6 +148,8 @@
         // Margin if there is no image above the title
         margin-top: 20px;
         // Margin if there is an image above the title
+        word-break: break-word;
+
         &__image {
           margin-top: 16px;
         }
@@ -247,6 +249,8 @@
         // Margin if there is no image above the title
         margin-top: 24px;
         // Margin if there is an image above the title
+        word-break: break-word;
+
         &__image {
           margin-top: 20px;
         }
diff --git a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
index 94411ad5fd6305fe7d4a80a43a8e58192f8ceff5..261cb1f223bfe0727bb0ccb154cdafc97e7183d3 100644
--- a/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
+++ b/src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
@@ -29,6 +29,7 @@
     hyphens: auto;
     min-height: 48px;
     padding: 0;
+    word-break: break-word;
 
     @include breakpoint($xlarge) {
       @include font-size(16px, 22px);
diff --git a/src/components/process-flow-box/process-flow-box.scss b/src/components/process-flow-box/process-flow-box.scss
index ba54bfe02806503c4c35ff75d53d136331e3e83a..d05afe10b52c1ad7784c2104d74d6991dc9619a3 100644
--- a/src/components/process-flow-box/process-flow-box.scss
+++ b/src/components/process-flow-box/process-flow-box.scss
@@ -97,6 +97,7 @@
     padding: 19px 17px;
     position: absolute;
     text-align: center;
+    word-break: break-word;
     z-index: 11;
 
     @include breakpoint($narrow) {
@@ -173,6 +174,7 @@
     hyphens: auto;
     margin-bottom: 16px;
     margin-top: 0;
+    word-break: break-word;
   }
 
   &__description {
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index c48320bbb1a9bac2ce2f5e516ca62db7aeb44849..4b4f13975e7bede3cdd2d701a3a476e228fd8bba 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -18,14 +18,23 @@
     transition-property: transform;
     will-change: transform;
   }
+
   &--sticky-visible {
     left: 0;
     position: fixed;
     right: 0;
+    top: 0;
     transform: translateY(0) translateZ(0);
-    //width: 100%;
-    width: inherit; //??
+
+    &.has-toolbar {
+      top: 39px;
+
+      &--large {
+        top: 79px;
+      }
+    }
   }
+
   &--sticky-hidden {
     top: 0;
   }
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index d38a503eff5d7ae815777a233de73b15f41e4108..8d3945e83607d9ef49b01065aed2fa321a486ac1 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -141,6 +141,8 @@ export class SiteHeader {
       return;
     }
 
+    const bodyElementClasses = document.querySelector('body').classList;
+
     let hySiteHeader = this.el.shadowRoot.querySelector('.hy-site-header') as HTMLElement;
     // If current position > last position AND scrolled past navbar...
     if (st > this.lastScrollTop && st > this.navbarHeight) {
@@ -148,12 +150,14 @@ export class SiteHeader {
       hySiteHeader.classList.add('hy-site-header--sticky-active');
       hySiteHeader.classList.add('hy-site-header--sticky-hidden');
       hySiteHeader.classList.remove('hy-site-header--sticky-visible');
+      hySiteHeader.classList.remove('has-toolbar', 'has-toolbar--large');
     } else {
       // Scroll Up
       if (st < this.el.offsetTop + this.navbarHeight) {
         hySiteHeader.classList.remove('hy-site-header--sticky-active');
         hySiteHeader.classList.remove('hy-site-header--sticky-visible');
         hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
+        hySiteHeader.classList.remove('has-toolbar', 'has-toolbar--large');
 
         // Close desktop menu panel if it's open.
         this.headerScrollUp.emit();
@@ -161,6 +165,14 @@ export class SiteHeader {
         hySiteHeader.classList.add('hy-site-header--sticky-active');
         hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
         hySiteHeader.classList.add('hy-site-header--sticky-visible');
+
+        if (bodyElementClasses.contains('toolbar-horizontal')) {
+          hySiteHeader.classList.add('has-toolbar');
+
+          if (bodyElementClasses.contains('toolbar-tray-open')) {
+            hySiteHeader.classList.add('has-toolbar--large');
+          }
+        }
       }
     }
     this.lastScrollTop = st;
diff --git a/src/index.html b/src/index.html
index 52ca5226d3aeed892e240a0aed848d34c577e27f..d5a1980823be32a8a9e09a1082e1f140093193f0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -182,7 +182,7 @@
             variant="big"
             data-items='[{"heading":"ALUMNI&shy;SÄHKÖPOSTIOSOITE","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit orci, ultricies id fermentum vel, porta et eros."},
             {"heading":"Unisport etu&shy;asiakashintaan","description":"Key Highlight description text"},
-            {"heading":"LUE YLIOPISTO-LEHTI VERKOSSA","description":"Key Highlight description text"}]'
+            {"heading":"Kansain&shy;välinen ja moni&shy;kulttuurinen","description":"Key Highlight description text"}]'
           >
           </hy-key-highlight-group>
           <hy-table-container>