diff --git a/src/components.d.ts b/src/components.d.ts
index e3f7fb4a3c57cae77811cd701bc919f36d0af33a..8fc0c614712ce6ad824e996948622bc6a8f52b26 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -67,6 +67,7 @@ export namespace Components {
     variant: 'primary' | 'warn' | 'success' | 'disabled';
   }
   interface HyBanner {
+    headerstyle: string;
     scLabel?: string;
     textDescription: string;
     textTitle?: string;
@@ -183,6 +184,7 @@ export namespace Components {
     variant: ButtonVariants;
   }
   interface HyCtaButton {
+    headerstyle: string;
     isExternal: boolean;
     linkContent: string;
     scLabel?: string;
@@ -355,6 +357,7 @@ export namespace Components {
     variant: LinkVariants;
   }
   interface HyLinkBox {
+    headerstyle: string;
     imageAlt: string;
     imageUrl: string;
     isExternal: boolean;
@@ -438,6 +441,7 @@ export namespace Components {
   }
   interface HyParagraphText {
     headerstyle: string;
+    placement: string;
     variant: string;
   }
   interface HyProcess {
@@ -454,6 +458,7 @@ export namespace Components {
     variant: ProcessFlowBoxVariants;
   }
   interface HyProminentImage {
+    headerstyle: string;
     imageUrl?: string;
     textTitle?: string;
   }
@@ -503,6 +508,7 @@ export namespace Components {
     size: number;
   }
   interface HyTabs {
+    headerstyle: string;
     tabId?: string;
     tabListLabel: string;
   }
@@ -517,6 +523,69 @@ export namespace Components {
     logoLabel?: string;
     logoUrl?: string;
   }
+  interface HyVideo {
+    /**
+     * Context label
+     */
+    contextLabel: string;
+    /**
+     * Should context label be visible
+     */
+    contextLabelVisible: boolean;
+    /**
+     * Date added date as string
+     */
+    dateAdded: string;
+    /**
+     * Label for date added
+     */
+    dateAddedLabel: string;
+    /**
+     * Duration number
+     */
+    duration: string;
+    /**
+     * Label for duration number
+     */
+    durationLabel: string;
+    headerstyle: string;
+    /**
+     * Use horizontal layout where metadata is on side
+     */
+    horizontal: boolean;
+    /**
+     * Url to video, used with preview image
+     */
+    linkToVideo: string;
+    /**
+     * Label for play button if preview image is provided
+     */
+    playButtonLabel: string;
+    /**
+     * Should play button be visible
+     */
+    playButtonVisible: boolean;
+    /**
+     * Preview image url
+     */
+    previewImageUrl: string;
+    /**
+     * Video description
+     */
+    videoDescription: string;
+    /**
+     * Video title
+     */
+    videoTitle: string;
+    /**
+     * Views count number
+     */
+    views: string;
+    /**
+     * Label for views number
+     */
+    viewsLabel: string;
+  }
 }
 declare global {
   interface HTMLColorBoxElement extends Components.ColorBox, HTMLStencilElement {}
@@ -829,6 +898,11 @@ declare global {
     prototype: HTMLHyUserLoginFormElement;
     new (): HTMLHyUserLoginFormElement;
   };
+  interface HTMLHyVideoElement extends Components.HyVideo, HTMLStencilElement {}
+  var HTMLHyVideoElement: {
+    prototype: HTMLHyVideoElement;
+    new (): HTMLHyVideoElement;
+  };
   interface HTMLElementTagNameMap {
     'color-box': HTMLColorBoxElement;
     'hy-accordion-container': HTMLHyAccordionContainerElement;
@@ -892,6 +966,7 @@ declare global {
     'hy-tiny-text': HTMLHyTinyTextElement;
     'hy-two-columns': HTMLHyTwoColumnsElement;
     'hy-user-login-form': HTMLHyUserLoginFormElement;
+    'hy-video': HTMLHyVideoElement;
   }
 }
 declare namespace LocalJSX {
@@ -920,6 +995,7 @@ declare namespace LocalJSX {
     variant?: 'primary' | 'warn' | 'success' | 'disabled';
   }
   interface HyBanner {
+    headerstyle?: string;
     scLabel?: string;
     textDescription?: string;
     textTitle?: string;
@@ -1036,6 +1112,7 @@ declare namespace LocalJSX {
     variant?: ButtonVariants;
   }
   interface HyCtaButton {
+    headerstyle?: string;
     isExternal?: boolean;
     linkContent?: string;
     scLabel?: string;
@@ -1208,6 +1285,7 @@ declare namespace LocalJSX {
     variant?: LinkVariants;
   }
   interface HyLinkBox {
+    headerstyle?: string;
     imageAlt?: string;
     imageUrl?: string;
     isExternal?: boolean;
@@ -1297,6 +1375,7 @@ declare namespace LocalJSX {
   }
   interface HyParagraphText {
     headerstyle?: string;
+    placement?: string;
     variant?: string;
   }
   interface HyProcess {
@@ -1313,6 +1392,7 @@ declare namespace LocalJSX {
     variant?: ProcessFlowBoxVariants;
   }
   interface HyProminentImage {
+    headerstyle?: string;
     imageUrl?: string;
     textTitle?: string;
   }
@@ -1362,6 +1442,7 @@ declare namespace LocalJSX {
     size?: number;
   }
   interface HyTabs {
+    headerstyle?: string;
     tabId?: string;
     tabListLabel?: string;
   }
@@ -1376,6 +1457,69 @@ declare namespace LocalJSX {
     logoLabel?: string;
     logoUrl?: string;
   }
+  interface HyVideo {
+    /**
+     * Context label
+     */
+    contextLabel?: string;
+    /**
+     * Should context label be visible
+     */
+    contextLabelVisible?: boolean;
+    /**
+     * Date added date as string
+     */
+    dateAdded?: string;
+    /**
+     * Label for date added
+     */
+    dateAddedLabel?: string;
+    /**
+     * Duration number
+     */
+    duration?: string;
+    /**
+     * Label for duration number
+     */
+    durationLabel?: string;
+    headerstyle?: string;
+    /**
+     * Use horizontal layout where metadata is on side
+     */
+    horizontal?: boolean;
+    /**
+     * Url to video, used with preview image
+     */
+    linkToVideo?: string;
+    /**
+     * Label for play button if preview image is provided
+     */
+    playButtonLabel?: string;
+    /**
+     * Should play button be visible
+     */
+    playButtonVisible?: boolean;
+    /**
+     * Preview image url
+     */
+    previewImageUrl?: string;
+    /**
+     * Video description
+     */
+    videoDescription?: string;
+    /**
+     * Video title
+     */
+    videoTitle?: string;
+    /**
+     * Views count number
+     */
+    views?: string;
+    /**
+     * Label for views number
+     */
+    viewsLabel?: string;
+  }
   interface IntrinsicElements {
     'color-box': ColorBox;
     'hy-accordion-container': HyAccordionContainer;
@@ -1439,6 +1583,7 @@ declare namespace LocalJSX {
     'hy-tiny-text': HyTinyText;
     'hy-two-columns': HyTwoColumns;
     'hy-user-login-form': HyUserLoginForm;
+    'hy-video': HyVideo;
   }
 }
 export {LocalJSX as JSX};
@@ -1511,6 +1656,7 @@ declare module '@stencil/core' {
       'hy-tiny-text': LocalJSX.HyTinyText & JSXBase.HTMLAttributes<HTMLHyTinyTextElement>;
       'hy-two-columns': LocalJSX.HyTwoColumns & JSXBase.HTMLAttributes<HTMLHyTwoColumnsElement>;
       'hy-user-login-form': LocalJSX.HyUserLoginForm & JSXBase.HTMLAttributes<HTMLHyUserLoginFormElement>;
+      'hy-video': LocalJSX.HyVideo & JSXBase.HTMLAttributes<HTMLHyVideoElement>;
     }
   }
 }
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index 615791f387b987fb4ecf05b4a104fb71fcf9905d..3ad458625556370f64208122a4cc0bb6ce2a619f 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -37,6 +37,7 @@
     }
   }
   .hy-accordion__button {
+    @include font-size(22px, 28px);
     align-items: center;
     border: none;
     background-color: var(--grayscale-background-box);
@@ -44,13 +45,11 @@
     display: flex;
     flex-direction: row;
     font-family: var(--main-font-family);
-    font-size: 26px;
-    line-height: 32px;
-    letter-spacing: -0.82px;
-    font-weight: 600;
+    font-weight: bold;
     height: 100%;
     justify-content: flex-start;
-    padding: 0.75rem 1.75rem 0.75rem 1.25rem;
+    letter-spacing: -0.7px;
+    padding: 1.125rem 1rem 1.125rem 1rem;
     transition: all 0.35s ease-in;
     width: 100%;
 
@@ -58,10 +57,10 @@
       cursor: pointer;
     }
 
-    @include breakpoint($medium) {
-      font-size: 26px;
-      letter-spacing: -0.82px;
-      line-height: 32px;
+    @include breakpoint($narrow) {
+      @include font-size(26px, 32px);
+      letter-spacing: -0.8px;
+      padding: 1rem 2rem 1rem 1.25rem;
     }
 
     &[aria-expanded='true'] {
@@ -70,11 +69,20 @@
   }
 
   .hy-accordion--heading__icon {
-    margin-right: 0.95rem;
+    margin-right: 0.5rem;
     z-index: 0;
 
+    @include breakpoint($narrow) {
+      margin-right: 1rem;
+    }
+
     svg {
       fill: var(--brand-main);
+
+      @include breakpoint($narrow) {
+        height: 24px;
+        width: 24px;
+      }
     }
   }
 }
@@ -89,4 +97,10 @@
   &--inner-wrapper {
     display: block;
   }
+
+  hy-box {
+    @include breakpoint($narrow) {
+      padding: 0 2rem;
+    }
+  }
 }
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index a2491da369bfcca1b7a7af5484805a516a710d9d..fada4423e84338eef399d0263bab2fa2630478ab 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -3,7 +3,7 @@ import {Component, Listen, Prop, State, Element, h} from '@stencil/core';
 @Component({
   tag: 'hy-accordion-item',
   styleUrl: 'accordion-item.scss',
-  shadow: false
+  shadow: false,
 })
 export class AccordionItem {
   @Element() el: HTMLElement;
@@ -208,7 +208,7 @@ export class AccordionItem {
           aria-hidden="true"
           style={{display: 'none'}}
         >
-          <hy-box pt="1.5" pb="3" pl="2" pr="2">
+          <hy-box pt="0" pb="0" pl="0.75" pr="0.75">
             <div class="hy-accordion__content--inner-wrapper">
               <slot></slot>
             </div>
diff --git a/src/components/cta-button/cta-button.scss b/src/components/cta-button/cta-button.scss
index 317e7c29a9e1941b28eb268acee0c8ed25077b37..8e12b0b104c9982e1d910c6a17115122a0eaf6c0 100644
--- a/src/components/cta-button/cta-button.scss
+++ b/src/components/cta-button/cta-button.scss
@@ -24,31 +24,115 @@
     justify-content: center;
     height: 100%;
     max-width: 278px;
-    width: 278px;
+
+    padding: 14px 12px;
+    @include breakpoint($narrow) {
+      padding: 15px 16px;
+    }
+    @include breakpoint($extrawide) {
+      // with sidebar on page
+      padding: 15px 16px;
+    }
+    @include breakpoint($overwide) {
+      // with sidebar on page
+      padding: 17px 16px;
+    }
 
     .text {
+      @include font-size(16px, 16px); //button small
       color: var(--grayscale-white);
-      font-size: 18px;
-      letter-spacing: -0.6px;
-      line-height: 20px;
-      margin: 18px 0 18px 14px;
+
+      @include breakpoint($narrow) {
+        @include font-size(18px, 18px); //button medium
+      }
+      @include breakpoint($extrawide) {
+        // with sidebar on page
+        @include font-size(18px, 18px); //button medium
+      }
+      @include breakpoint($overwide) {
+        // with sidebar on page
+        @include font-size(20px, 20px); //button large
+      }
     }
+
     .link-icon {
-      margin-left: 12px;
+      margin-left: 8px; //button small
+
+      @include breakpoint($narrow) {
+        margin-left: 10px; //button medium
+      }
+      @include breakpoint($extrawide) {
+        margin-left: 10px; //button medium
+      }
+      @include breakpoint($overwide) {
+        margin-left: 12px; //button large
+      }
 
       svg {
         background-color: var(--brand-main-light);
         fill: var(--grayscale-white);
-        padding: 15.91px 16px 16.09px 0;
+        height: 16px;
+        width: 16px;
+
+        @include breakpoint($narrow) {
+          //button medium
+          height: 18px;
+          width: 18px;
+        }
+        @include breakpoint($extrawide) {
+          //button medium
+          height: 18px;
+          width: 18px;
+        }
+        @include breakpoint($overwide) {
+          //button large
+          height: 22px;
+          width: 22px;
+        }
       }
     }
   }
 
   &.blue-background {
-    border: 4px solid var(--grayscale-white);
+    border: 3px solid var(--grayscale-white);
+    @include breakpoint($overwide) {
+      border: 4px solid var(--grayscale-white);
+    }
   }
 
   &.white-background {
     border: none;
   }
 }
+
+.hy-cta-button.large {
+  @include breakpoint($extrawide) {
+    padding: 17px 16px;
+  }
+
+  .text {
+    @include breakpoint($extrawide) {
+      @include font-size(20px, 20px); //button large
+    }
+  }
+
+  .link-icon {
+    @include breakpoint($extrawide) {
+      margin-left: 12px; //button large
+    }
+
+    svg {
+      @include breakpoint($extrawide) {
+        //button large
+        height: 22px;
+        width: 22px;
+      }
+    }
+  }
+
+  &.blue-background {
+    @include breakpoint($extrawide) {
+      border: 4px solid var(--grayscale-white);
+    }
+  }
+}
diff --git a/src/components/cta-button/cta-button.tsx b/src/components/cta-button/cta-button.tsx
index e73564a76bade2de9c42f8db3c5bf4faf49388be..89a6eed38ec0066796ef33b6a599e78ae1755bc8 100644
--- a/src/components/cta-button/cta-button.tsx
+++ b/src/components/cta-button/cta-button.tsx
@@ -1,10 +1,10 @@
-import {Component, ComponentInterface, Prop, h} from '@stencil/core';
+import {Component, ComponentInterface, Element, Prop, h} from '@stencil/core';
 import {CtaLinkButtonVariants} from '../../utils/utils';
 
 @Component({
   tag: 'hy-cta-button',
   styleUrl: 'cta-button.scss',
-  shadow: true
+  shadow: true,
 })
 export class CtaButton implements ComponentInterface {
   @Prop() variant: CtaLinkButtonVariants = CtaLinkButtonVariants.onBlueBkgd;
@@ -12,9 +12,20 @@ export class CtaButton implements ComponentInterface {
   @Prop() url?: string;
   @Prop() scLabel?: string;
   @Prop() isExternal: boolean = false;
+  @Prop() headerstyle: string = 'common';
+  @Element() el: HTMLElement;
+
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+  }
 
   render() {
-    const classAttributes = ['hy-cta-button', this.variant].join(' ');
+    const classAttributes = ['hy-cta-button', this.variant, this.headerstyle].join(' ');
 
     const containerClassAttributes = ['hy-cta-button-container'].join(' ');
 
diff --git a/src/components/cta-button/readme.md b/src/components/cta-button/readme.md
index 906059b95632927aaa237a2020e1e31847d3cb30..fcf2aa95391fc52c9a31d9eb2da0165986cc0ea9 100644
--- a/src/components/cta-button/readme.md
+++ b/src/components/cta-button/readme.md
@@ -6,6 +6,7 @@
 
 | Property      | Attribute      | Description | Type                                                                                                     | Default                            |
 | ------------- | -------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| `headerstyle` | `headerstyle`  |             | `string`                                                                                                 | `'common'`                         |
 | `isExternal`  | `is-external`  |             | `boolean`                                                                                                | `false`                            |
 | `linkContent` | `link-content` |             | `string`                                                                                                 | `''`                               |
 | `scLabel`     | `sc-label`     |             | `string`                                                                                                 | `undefined`                        |
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
index e02907796fa7ceb404ea60a4123de3a376c3315f..7e1092499b438f55ac541242b200f3ed4869804f 100644
--- a/src/components/heading/readme.md
+++ b/src/components/heading/readme.md
@@ -104,6 +104,7 @@ Provide heading attribute for the component to choose what type of heading to us
 - [hy-introduction](../hy-introduction)
 - [hy-large-process-flow](../hy-large-process-flow)
 - [hy-shortcuts](../hy-shortcuts)
+- [hy-video](../hy-video)
 
 ### Graph
 
@@ -115,6 +116,7 @@ graph TD;
   hy-introduction --> hy-heading
   hy-large-process-flow --> hy-heading
   hy-shortcuts --> hy-heading
+  hy-video --> hy-heading
   style hy-heading fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/hy-banner/hy-banner.scss b/src/components/hy-banner/hy-banner.scss
index 2b74bef4ad0e84f6725bfd8e0b53dc6bbc17b402..d6571f8be39c039e69f20d50d175d0404506ac0e 100644
--- a/src/components/hy-banner/hy-banner.scss
+++ b/src/components/hy-banner/hy-banner.scss
@@ -6,50 +6,48 @@
   background-color: var(--brand-main-light);
   padding: 28px 0 24px 0;
 
-  // >480px
   @include breakpoint($narrow) {
     padding: 40px 0 32px 0;
   }
-
-  // >960px
   @include breakpoint($wide) {
     padding: 48px 0 40px 0;
   }
-
-  // >1200px
   @include breakpoint($extrawide) {
-    padding: 64px 0 48px 0;
+    padding: 48px 0 40px 0;
+  }
+  @include breakpoint($overwide) {
+    //padding: 64px 0 48px 0;
+    padding: 64px 32px 48px 32px;
   }
 
   &__info-container {
     &__title {
+      @include font-size(24px, 24px);
       color: var(--grayscale-white);
       font-family: var(--main-font-family);
-      font-size: 24px;
       font-weight: 600;
       letter-spacing: -0.8px;
-      line-height: 24px;
       margin-bottom: 16px;
       text-transform: uppercase;
 
       @include breakpoint($narrow) {
-        font-size: 32px;
+        @include font-size(32px, 32px);
         letter-spacing: -1.07px;
-        line-height: 32px;
         margin-bottom: 24px;
+        max-width: 92%;
       }
 
       @include breakpoint($extrawide) {
-        font-size: 36px;
-        letter-spacing: -1.2px;
-        line-height: 36px;
+        @include font-size(32px, 32px);
+        letter-spacing: -1.07px;
+        margin-bottom: 24px;
+        max-width: 92%;
       }
 
       @include breakpoint($overwide) {
-        font-size: 40px;
-        letter-spacing: -1.33px;
-        line-height: 40px;
-        margin-bottom: 32px;
+        @include font-size(36px, 36px);
+        letter-spacing: -1.2px;
+        max-width: 83%;
       }
     }
 
@@ -63,23 +61,52 @@
       margin-bottom: 24px;
 
       @include breakpoint($narrow) {
-        font-size: 16px;
+        @include font-size(16px, 24px);
         letter-spacing: -0.08px;
-        line-height: 24px;
         margin-bottom: 28px;
+        max-width: 92%;
       }
 
       @include breakpoint($wide) {
         margin-bottom: 32px;
       }
 
-      @include breakpoint($extrawide) {
-        font-size: 18px;
+      @include breakpoint($overwide) {
+        @include font-size(18px, 24px);
         letter-spacing: -0.09px;
-        line-height: 24px;
         margin-bottom: 36px;
+        max-width: 83%;
       }
+    }
+  }
+}
+
+// Big screen, no sidebar
+.hy-banner.large {
+  @include breakpoint($extrawide) {
+    padding: 64px 0 48px 0;
+  }
 
+  .hy-banner__info-container {
+    &__title {
+      @include breakpoint($extrawide) {
+        @include font-size(36px, 36px);
+        letter-spacing: -1.2px;
+        max-width: 83%;
+      }
+      @include breakpoint($overwide) {
+        @include font-size(40px, 40px);
+        letter-spacing: -1.33px;
+        margin-bottom: 32px;
+      }
+    }
+    &__description {
+      @include breakpoint($extrawide) {
+        @include font-size(18px, 24px);
+        letter-spacing: -0.09px;
+        margin-bottom: 36px;
+        max-width: 83%;
+      }
       @include breakpoint($overwide) {
         margin-bottom: 44px;
       }
diff --git a/src/components/hy-banner/hy-banner.tsx b/src/components/hy-banner/hy-banner.tsx
index 2ea08b05e848a5c639f54391ef739219bf93a249..a7ae872bb2fcdcac38345b470c6fef30c94c799c 100644
--- a/src/components/hy-banner/hy-banner.tsx
+++ b/src/components/hy-banner/hy-banner.tsx
@@ -1,4 +1,4 @@
-import {Component, Prop, h, Host} from '@stencil/core';
+import {Component, Element, Prop, h, Host} from '@stencil/core';
 import {CtaLinkButtonVariants} from '../../utils/utils';
 
 @Component({
@@ -12,15 +12,27 @@ export class HyBanner {
   @Prop() url?: string;
   @Prop() scLabel?: string;
   @Prop() urlTitle?: string;
+  @Prop() headerstyle: string = 'common';
+  @Element() el: HTMLElement;
+
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+  }
 
   render() {
+    const hyBannerClass = ['hy-banner', this.headerstyle].join(' ');
     const hyBannerWrapperClass = ['hy-banner__info-container'].join(' ');
     const variant = CtaLinkButtonVariants.onBlueBkgd;
 
     return (
       <Host>
         <hy-box pt="4" />
-        <div class="hy-banner">
+        <div class={hyBannerClass}>
           <hy-main-content-wrapper>
             <div class={hyBannerWrapperClass}>
               <div class="hy-banner__info-container__title">{this.textTitle}</div>
diff --git a/src/components/hy-banner/readme.md b/src/components/hy-banner/readme.md
index 1f7b5c1ecfa910e3903f2d2537db82df75106e70..ca6a88240d0d4b2349b5aecf53998da0a6de3713 100644
--- a/src/components/hy-banner/readme.md
+++ b/src/components/hy-banner/readme.md
@@ -6,6 +6,7 @@
 
 | Property          | Attribute          | Description | Type     | Default     |
 | ----------------- | ------------------ | ----------- | -------- | ----------- |
+| `headerstyle`     | `headerstyle`      |             | `string` | `'common'`  |
 | `scLabel`         | `sc-label`         |             | `string` | `undefined` |
 | `textDescription` | `text-description` |             | `string` | `null`      |
 | `textTitle`       | `text-title`       |             | `string` | `undefined` |
diff --git a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
index b9a13e6550956747f91d1c3e2bc3715e22cc3316..cd153db203be2605b99ccd695d3febe339e0d437 100644
--- a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
+++ b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
@@ -36,7 +36,7 @@
       height: 24px;
       left: 26.5px;
       position: absolute;
-      width: 10px;
+      width: 8px;
 
       @include breakpoint($narrow) {
         display: inline-block;
diff --git a/src/components/hy-large-process-flow/hy-large-process-flow.scss b/src/components/hy-large-process-flow/hy-large-process-flow.scss
index 833f8911c482dc3386e6b964fef25023e32ecb12..f1e62be85154656cccffc7b70e60ba1bc8314ce3 100644
--- a/src/components/hy-large-process-flow/hy-large-process-flow.scss
+++ b/src/components/hy-large-process-flow/hy-large-process-flow.scss
@@ -4,11 +4,15 @@
 
 .hy-large-process-flow {
   max-width: 100%;
+  padding-top: 8px;
+  margin-bottom: 24px;
   width: 100%;
 
   @include breakpoint($narrow) {
     //tablet up till 768 (including 768px)
+    margin-bottom: 32px;
     max-width: calc(100% / 8 * 7 + var(--gutter-narrow)); // 7 columns out of 8
+    padding-top: 0;
   }
   @include breakpoint($medium + 1) {
     //small desktop; > 768
@@ -53,7 +57,7 @@
       height: 100%;
       left: 26.5px;
       position: absolute;
-      width: 10px;
+      width: 8px;
       z-index: -1;
 
       @include breakpoint($narrow) {
@@ -75,7 +79,7 @@
       padding: 8px 0 !important;
 
       @include breakpoint($narrow) {
-        margin: 40px 0 48px 0;
+        margin: 48px 0;
         padding: 16px 0 !important;
       }
     }
diff --git a/src/components/hy-prominent-image/hy-prominent-image.scss b/src/components/hy-prominent-image/hy-prominent-image.scss
index f38955a23baa999af29728c2acb4ce37039eaa9a..f0fd6ce062f9dc2e87082014fea2cc505dba6f33 100644
--- a/src/components/hy-prominent-image/hy-prominent-image.scss
+++ b/src/components/hy-prominent-image/hy-prominent-image.scss
@@ -45,6 +45,34 @@
     @include breakpoint($overwide) {
       // >= 1441px
       // font: h3 medium size
+      //@include font-size(26px, 32px);
+      //bottom: 28px;
+      //left: -16px;
+      //letter-spacing: -0.8px;
+      //padding: 20px 24px;
+      //position: absolute;
+    }
+  }
+}
+
+// no sidebar
+.hy-prominent-image.large {
+  &__text {
+    @include breakpoint($overwide) {
+      // >= 1441px no sidebar
+      // font: h3 medium size
+      @include font-size(26px, 32px);
+      bottom: 28px;
+      left: -16px;
+      letter-spacing: -0.8px;
+      padding: 20px 24px;
+      position: absolute;
+    }
+  }
+  .hy-prominent-image__text {
+    @include breakpoint($overwide) {
+      // >= 1441px no sidebar
+      // font: h3 medium size
       @include font-size(26px, 32px);
       bottom: 28px;
       left: -16px;
diff --git a/src/components/hy-prominent-image/hy-prominent-image.tsx b/src/components/hy-prominent-image/hy-prominent-image.tsx
index b0b945917b4bedd5b234c843c67d0fea3a275c5f..9e68adfda9af7b3d1f74e737c72ee4bfce0c4ba9 100644
--- a/src/components/hy-prominent-image/hy-prominent-image.tsx
+++ b/src/components/hy-prominent-image/hy-prominent-image.tsx
@@ -1,4 +1,4 @@
-import {Component, Host, h, Prop} from '@stencil/core';
+import {Component, Element, Host, h, Prop} from '@stencil/core';
 
 @Component({
   tag: 'hy-prominent-image',
@@ -8,11 +8,23 @@ import {Component, Host, h, Prop} from '@stencil/core';
 export class HyProminentImage {
   @Prop() textTitle?: string;
   @Prop() imageUrl?: string;
+  @Prop() headerstyle: string = 'common';
+  @Element() el: HTMLElement;
+
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+  }
 
   render() {
+    const prominentImageClass = ['hy-prominent-image', this.headerstyle].join(' ');
     return (
       <Host>
-        <div class="hy-prominent-image">
+        <div class={prominentImageClass}>
           <div class="hy-prominent-image__image">
             <hy-image image-url={this.imageUrl} aspectRatioWidth={2} aspectRatioHeight={1} />
           </div>
diff --git a/src/components/hy-prominent-image/readme.md b/src/components/hy-prominent-image/readme.md
index 1f050f149e308c359280c72cd0f44b7075a878aa..4cf958a610c5d0308148d8f1b9d732d08ddbc5b2 100644
--- a/src/components/hy-prominent-image/readme.md
+++ b/src/components/hy-prominent-image/readme.md
@@ -4,10 +4,11 @@
 
 ## Properties
 
-| Property    | Attribute    | Description | Type     | Default     |
-| ----------- | ------------ | ----------- | -------- | ----------- |
-| `imageUrl`  | `image-url`  |             | `string` | `undefined` |
-| `textTitle` | `text-title` |             | `string` | `undefined` |
+| Property      | Attribute     | Description | Type     | Default     |
+| ------------- | ------------- | ----------- | -------- | ----------- |
+| `headerstyle` | `headerstyle` |             | `string` | `'common'`  |
+| `imageUrl`    | `image-url`   |             | `string` | `undefined` |
+| `textTitle`   | `text-title`  |             | `string` | `undefined` |
 
 ## Dependencies
 
diff --git a/src/components/hy-tabs/hy-tabs.scss b/src/components/hy-tabs/hy-tabs.scss
index a1c87fd55045c7b064d8679854c451b351a006eb..9d7f156493111a004cd2c86dbc969878356457f5 100644
--- a/src/components/hy-tabs/hy-tabs.scss
+++ b/src/components/hy-tabs/hy-tabs.scss
@@ -58,7 +58,7 @@
     }
 
     &__left {
-      left: 8px;
+      left: 2px;
 
       svg {
         left: -1.5px;
@@ -66,7 +66,7 @@
     }
 
     &__right {
-      right: 8px;
+      right: 2px;
 
       svg {
         left: 1.5px;
@@ -101,7 +101,7 @@
     font-weight: 600;
     justify-content: center;
     letter-spacing: -0.44px;
-    margin: 0 8px 0 0;
+    margin: 0 4px 0 0;
     max-width: calc(100% / 12 * 3);
     min-height: 44px;
     min-width: 100px;
@@ -116,12 +116,14 @@
     @include breakpoint($narrow) {
       @include font-size(18px, 24px);
       letter-spacing: -0.56px;
+      margin: 0 8px 0 0;
       padding: 8px 12px;
 
       span.tab-title {
         padding: 8px 12px;
       }
     }
+
     @include breakpoint($medium) {
       padding: 8px 16px;
 
@@ -129,8 +131,12 @@
         padding: 8px 16px;
       }
     }
+  }
+
+  // No sidebar
+  [role='tab'].large {
     @include breakpoint($overwide) {
-      margin-right: 12px;
+      margin: 0 12px 0 0;
     }
   }
 
diff --git a/src/components/hy-tabs/hy-tabs.tsx b/src/components/hy-tabs/hy-tabs.tsx
index bc8ff9a849b2d0442f42733e94791d4eac7c1717..5d62b0ef6f78b1db999968d9d78887d5ee23a067 100644
--- a/src/components/hy-tabs/hy-tabs.tsx
+++ b/src/components/hy-tabs/hy-tabs.tsx
@@ -35,6 +35,7 @@ export class HyTabs implements ComponentInterface {
   @State() tabButtons: NodeListOf<Element>[];
   @State() tabList: NodeListOf<Element>[];
   @Element() el: HTMLElement;
+  @Prop() headerstyle: string = 'common';
 
   componentWillLoad() {
     const tabItems = this.el.querySelectorAll('hy-tabs-item');
@@ -49,6 +50,13 @@ export class HyTabs implements ComponentInterface {
   }
 
   componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+
     const tabContainer = this.el.children[0];
     if (tabContainer) {
       this.generateArrays(tabContainer);
@@ -319,7 +327,7 @@ export class HyTabs implements ComponentInterface {
                 const title = Object.values(item)[0];
                 const id = title.toLowerCase().replace(/\W/g, '-');
                 return (
-                  <button role="tab" aria-selected="false" aria-controls={`${id}-tab`} id={id}>
+                  <button role="tab" aria-selected="false" aria-controls={`${id}-tab`} id={id} class={this.headerstyle}>
                     {title}
                   </button>
                 );
diff --git a/src/components/hy-tabs/readme.md b/src/components/hy-tabs/readme.md
index a44b7a525147022f09654e7ddb6432068dc0e6b4..3e1e52b91d2b97b2537d8cb16aee0832bb4b2ea8 100644
--- a/src/components/hy-tabs/readme.md
+++ b/src/components/hy-tabs/readme.md
@@ -6,6 +6,7 @@
 
 | Property       | Attribute        | Description | Type     | Default     |
 | -------------- | ---------------- | ----------- | -------- | ----------- |
+| `headerstyle`  | `headerstyle`    |             | `string` | `'common'`  |
 | `tabId`        | `tab-id`         |             | `string` | `undefined` |
 | `tabListLabel` | `tab-list-label` |             | `string` | `''`        |
 
diff --git a/src/components/hy-video/hy-video.scss b/src/components/hy-video/hy-video.scss
new file mode 100644
index 0000000000000000000000000000000000000000..839e39d6967d0c1c98ca691417698555eb08e56b
--- /dev/null
+++ b/src/components/hy-video/hy-video.scss
@@ -0,0 +1,271 @@
+:host {
+  display: block;
+}
+
+.hy-video__video-container {
+  display: inline-block;
+  margin-bottom: 8px;
+  position: relative;
+  width: 100%;
+
+  @include breakpoint($wide) {
+    margin-bottom: 16px;
+  }
+
+  iframe {
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .hy-video__preview-image {
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .hy-video__play {
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+
+    button {
+      align-items: center;
+      background: transparent;
+      border: none;
+      display: flex;
+      flex-direction: column;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    button .hy-video__button-label {
+      @include font-size(16px, 24px);
+
+      color: var(--grayscale-white);
+      font-family: var(--main-font-family);
+      font-weight: bold;
+      letter-spacing: -0.1px;
+      text-align: center;
+      text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+      text-transform: uppercase;
+
+      @include breakpoint($medium) {
+        @include font-size(24px, 32px);
+
+        letter-spacing: -0.14px;
+        text-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
+      }
+
+      @include breakpoint($extrawide) {
+        @include font-size(28px, 32px);
+
+        letter-spacing: -0.16px;
+      }
+      @include breakpoint($overwide) {
+        @include font-size(32px, 32px);
+      }
+    }
+
+    button svg {
+      fill: var(--grayscale-white);
+      filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
+      height: 48px;
+      width: 48px;
+
+      @include breakpoint($medium) {
+        filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.6));
+        height: 60px;
+        width: 60px;
+      }
+      @include breakpoint($wide) {
+        height: 80px;
+        width: 80px;
+      }
+      @include breakpoint($extrawide) {
+        height: 104px;
+        width: 104px;
+      }
+      @include breakpoint($overwide) {
+        height: 120px;
+        width: 120px;
+      }
+    }
+  }
+
+  > *:not(.hy-video__label):not(.hy-video__play) {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    // 16:9 ratio
+    padding-top: (9 / 16) * 100%;
+  }
+}
+
+.hy-video:not(.hy-video--horizontal) {
+  display: flex;
+  flex-direction: column;
+
+  .hy-video__meta__description {
+    @include breakpoint($wide) {
+      width: 57.24%;
+    }
+  }
+}
+
+.hy-video__label {
+  // font: h5 small size
+  @include font-size(16px, 20px);
+  background-color: var(--grayscale-black);
+  bottom: 12px;
+  color: var(--grayscale-white);
+  font-family: var(--main-font-family);
+  font-weight: bold;
+  left: -8px;
+  letter-spacing: -0.5px;
+  max-width: 46%; // 5.5 columns
+  padding: 6px 12px;
+  position: absolute;
+  text-transform: uppercase;
+
+  @include breakpoint($narrow) {
+    // >=480px
+    // font: h4 small size
+    @include font-size(18px, 24px);
+    bottom: 20px;
+    left: -16px;
+    letter-spacing: -0.56px;
+    max-width: 58%; // 7 columns
+    padding: 12px 24px;
+    position: absolute;
+  }
+
+  @include breakpoint($wide) {
+    // Applies both to 960px-1200px and 1201-1440px
+    // font: h4 medium size
+    @include font-size(22px, 28px);
+    bottom: 24px;
+    left: -16px;
+    letter-spacing: -0.69px;
+    padding: 16px 24px;
+    position: absolute;
+  }
+  @include breakpoint($overwide) {
+    // >= 1441px
+    // font: h3 medium size
+    @include font-size(26px, 32px);
+    bottom: 28px;
+    left: -16px;
+    letter-spacing: -0.8px;
+    padding: 20px 24px;
+    position: absolute;
+  }
+}
+
+.hy-video.hy-video--horizontal {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @include breakpoint($wide) {
+    flex-direction: row;
+  }
+
+  .hy-video__meta {
+    padding-left: 0;
+    width: 100%;
+
+    @include breakpoint($wide) {
+      padding-left: 2.5%;
+      width: 57.24%;
+    }
+  }
+}
+
+.hy-video__meta__title {
+  h2.hy-heading {
+    margin: 8px 0 12px 0 !important;
+    padding: 0 !important;
+
+    @include breakpoint($wide) {
+      margin: 0 0 16px 0 !important;
+    }
+  }
+}
+
+.hy-video__meta__details {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 12px;
+
+  @include breakpoint($wide) {
+    margin-bottom: 16px;
+  }
+}
+
+.hy-video__meta__details--item {
+  border-right: 1px dashed var(--brand-main-light);
+  display: flex;
+  flex-direction: column;
+  margin-right: 44px;
+  min-width: 87px;
+  padding-right: 46px;
+  place-content: center space-between;
+
+  &:last-child {
+    border-right: 0;
+  }
+}
+
+.hy-video__meta__description {
+  @include font-size(14px, 20px);
+
+  color: var(--grayscale-dark);
+  display: block;
+  font-family: var(--main-font-family);
+  letter-spacing: 0;
+  margin-bottom: 16px;
+  width: 100%;
+
+  @include breakpoint($medium) {
+    @include font-size(16px, 24px);
+  }
+}
+
+.hy-video__meta__label {
+  font-weight: 700;
+}
+
+.hy-video__meta__label,
+.hy-video__meta__content {
+  @include font-size(16px, 20px);
+
+  color: var(--grayscale-black);
+  font-family: var(--main-font-family);
+  letter-spacing: -0.5px;
+
+  @include breakpoint($medium) {
+    @include font-size(18px, 24px);
+
+    letter-spacing: -0.56px;
+  }
+
+  @include breakpoint($extrawide) {
+    @include font-size(22px, 34px);
+
+    letter-spacing: -0.69px;
+  }
+}
diff --git a/src/components/hy-video/hy-video.tsx b/src/components/hy-video/hy-video.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9726f5e07e4a3a24f87eca54ff881e0821b3ff15
--- /dev/null
+++ b/src/components/hy-video/hy-video.tsx
@@ -0,0 +1,122 @@
+import {Component, Prop, h, Element} from '@stencil/core';
+import {HeadingVarians} from '../../utils/utils';
+
+@Component({
+  tag: 'hy-video',
+  styleUrl: 'hy-video.scss',
+  shadow: false,
+})
+export class HyVideo {
+  @Element() el: HTMLElement;
+
+  /** Video title */
+  @Prop() videoTitle: string;
+  /** Video description */
+  @Prop() videoDescription: string;
+  /** Context label */
+  @Prop() contextLabel: string;
+  /** Should context label be visible */
+  @Prop() contextLabelVisible: boolean = false;
+  /** Preview image url */
+  @Prop() previewImageUrl: string;
+  /** Url to video, used with preview image */
+  @Prop() linkToVideo: string;
+  /** Label for play button if preview image is provided */
+  @Prop() playButtonLabel: string;
+  /** Should play button be visible */
+  @Prop() playButtonVisible: boolean = false;
+  /** Views count number */
+  @Prop() views: string;
+  /** Label for views number */
+  @Prop() viewsLabel: string;
+  /** Duration number */
+  @Prop() duration: string;
+  /** Label for duration number */
+  @Prop() durationLabel: string;
+  /** Date added date as string */
+  @Prop() dateAdded: string;
+  /** Label for date added */
+  @Prop() dateAddedLabel: string;
+  /** Use horizontal layout where metadata is on side */
+  @Prop() horizontal: boolean = false;
+
+  @Prop() headerstyle: string = 'with-sidebar';
+
+  renderPreviewWithLink = () => {
+    return this.linkToVideo ? (
+      <a title={this.videoTitle} href={this.linkToVideo} class="hy-video__link-to-video">
+        <img class="hy-video__preview-image" src={this.previewImageUrl} alt={this.videoTitle} />
+      </a>
+    ) : (
+      <img class="hy-video__preview-image" src={this.previewImageUrl} alt={this.videoTitle} />
+    );
+  };
+
+  renderPlayButton = () => {
+    return (
+      <span class="hy-video__play">
+        <button type="button">
+          <hy-icon icon={'hy-icon-video'} class={'hy-video__play-icon'} size={20} />
+          <span class="hy-video__button-label">{this.playButtonLabel}</span>
+        </button>
+      </span>
+    );
+  };
+
+  render() {
+    const classAttributes = [
+      'hy-video',
+      this.horizontal ? 'hy-video--horizontal' : '',
+      `hy-video--${this.headerstyle}`,
+    ].join(' ');
+
+    return (
+      <div class={classAttributes}>
+        <div class="hy-video__video-container">
+          {this.previewImageUrl ? (
+            <div>
+              {this.renderPreviewWithLink()}
+              <slot name="video"></slot>
+            </div>
+          ) : (
+            <slot name="video"></slot>
+          )}
+          {this.playButtonVisible && this.renderPlayButton()}
+          {this.contextLabelVisible && <span class="hy-video__label">{this.contextLabel}</span>}
+        </div>
+        <div class="hy-video__meta">
+          {this.videoTitle && (
+            <hy-heading class="hy-video__meta__title" heading={HeadingVarians.h2}>
+              {this.videoTitle}
+            </hy-heading>
+          )}
+          {(this.duration || this.views || this.dateAdded) && (
+            <div class="hy-video__meta__details">
+              {this.duration && (
+                <div class="hy-video__meta__details--item">
+                  <span class="hy-video__meta__label">{this.durationLabel}</span>
+                  <span class="hy-video__meta__content">{this.duration}</span>
+                </div>
+              )}
+              {this.views && (
+                <div class="hy-video__meta__details--item">
+                  <span class="hy-video__meta__label">{this.viewsLabel}</span>
+                  <span class="hy-video__meta__content">{this.views}</span>
+                </div>
+              )}
+              {this.dateAdded && (
+                <div class="hy-video__meta__details--item">
+                  <span class="hy-video__meta__label">{this.dateAddedLabel}</span>
+                  <span class="hy-video__meta__content">{this.dateAdded}</span>
+                </div>
+              )}
+            </div>
+          )}
+          {this.videoDescription && (
+            <hy-paragraph-text class="hy-video__meta__description">{this.videoDescription}</hy-paragraph-text>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/hy-video/readme.md b/src/components/hy-video/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..b8df742528989a4bbbdfe871993f11c31453d283
--- /dev/null
+++ b/src/components/hy-video/readme.md
@@ -0,0 +1,46 @@
+# hy-video
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property              | Attribute               | Description                                        | Type      | Default          |
+| --------------------- | ----------------------- | -------------------------------------------------- | --------- | ---------------- |
+| `contextLabel`        | `context-label`         | Context label                                      | `string`  | `undefined`      |
+| `contextLabelVisible` | `context-label-visible` | Should context label be visible                    | `boolean` | `false`          |
+| `dateAdded`           | `date-added`            | Date added date as string                          | `string`  | `undefined`      |
+| `dateAddedLabel`      | `date-added-label`      | Label for date added                               | `string`  | `undefined`      |
+| `duration`            | `duration`              | Duration number                                    | `string`  | `undefined`      |
+| `durationLabel`       | `duration-label`        | Label for duration number                          | `string`  | `undefined`      |
+| `headerstyle`         | `headerstyle`           |                                                    | `string`  | `'with-sidebar'` |
+| `horizontal`          | `horizontal`            | Use horizontal layout where metadata is on side    | `boolean` | `false`          |
+| `linkToVideo`         | `link-to-video`         | Url to video, used with preview image              | `string`  | `undefined`      |
+| `playButtonLabel`     | `play-button-label`     | Label for play button if preview image is provided | `string`  | `undefined`      |
+| `playButtonVisible`   | `play-button-visible`   | Should play button be visible                      | `boolean` | `false`          |
+| `previewImageUrl`     | `preview-image-url`     | Preview image url                                  | `string`  | `undefined`      |
+| `videoDescription`    | `video-description`     | Video description                                  | `string`  | `undefined`      |
+| `videoTitle`          | `video-title`           | Video title                                        | `string`  | `undefined`      |
+| `views`               | `views`                 | Views count number                                 | `string`  | `undefined`      |
+| `viewsLabel`          | `views-label`           | Label for views number                             | `string`  | `undefined`      |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../icon)
+- [hy-heading](../heading)
+- [hy-paragraph-text](../paragraph-text)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-video --> hy-icon
+  hy-video --> hy-heading
+  hy-video --> hy-paragraph-text
+  style hy-video fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index ac28adb441f75a73a07c844c0014e997c6cb0368..015304d4aaa5aabe151ea8f8fd5f603065aabbc3 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -23,6 +23,8 @@ const iconNames: IconName = {
   'hy-icon-quote': (p) => <icons.IconQuote {...p} />,
   'hy-icon-remove': (p) => <icons.Remove {...p} />,
   'hy-icon-search': (p) => <icons.Search {...p} />,
+  'hy-icon-play': (p) => <icons.Play {...p} />,
+  'hy-icon-video': (p) => <icons.Video {...p} />,
   'hy-icon-some-facebook': (p) => <icons.SomeFacebook {...p} />,
   'hy-icon-some-instagram': (p) => <icons.SomeInstagram {...p} />,
   'hy-icon-some-youtube': (p) => <icons.SomeYoutube {...p} />,
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 82e396ca8c7f096fe8db7b0202ec8d1ae892407c..3f1bef04db8e8c5dea490a68bdea9e14342af52e 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -34,6 +34,7 @@
 - [hy-site-logo](../site-header/site-logo)
 - [hy-site-search](../site-header/site-search)
 - [hy-tabs](../hy-tabs)
+- [hy-video](../hy-video)
 
 ### Graph
 
@@ -59,6 +60,7 @@ graph TD;
   hy-site-logo --> hy-icon
   hy-site-search --> hy-icon
   hy-tabs --> hy-icon
+  hy-video --> hy-icon
   style hy-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx
index da8a39baf0acf239a127bc085d029f1d94f89d68..55f7dc915120f8fad313726ebd5bcf88d44b004f 100644
--- a/src/components/link-box/link-box.tsx
+++ b/src/components/link-box/link-box.tsx
@@ -1,10 +1,10 @@
-import {Component, ComponentInterface, Prop, h} from '@stencil/core';
+import {Component, ComponentInterface, Element, Prop, h} from '@stencil/core';
 import {LinkBoxVariants} from '../../utils/utils';
 
 @Component({
   tag: 'hy-link-box',
   styleUrl: 'link-box.scss',
-  shadow: true
+  shadow: true,
 })
 export class LinkBox implements ComponentInterface {
   @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;
@@ -14,37 +14,63 @@ export class LinkBox implements ComponentInterface {
   @Prop() textDescription: string = null;
   @Prop() url?: string;
   @Prop() isExternal: boolean = false;
+  @Prop() headerstyle: string = 'common';
+  @Element() el: HTMLElement;
+
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+  }
 
   render() {
-    const classAttributes = ['hy-link-box', this.variant, this.imageUrl ? 'hy-link-box--with-image' : null].join(' ');
+    const classAttributes = [
+      'hy-link-box',
+      this.variant,
+      this.headerstyle,
+      this.imageUrl ? 'hy-link-box--with-image' : null,
+    ].join(' ');
+
+    const classLinkAttributes = ['hy-link-box__link', this.headerstyle].join(' ');
 
     const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(
       ' '
     );
     const target = this.isExternal ? '_blank' : '_self';
 
-    const aspectRatioWidth = 3;
-    const aspectRatioHeight = 2;
+    const aspectRatioWidth = 16;
+    const aspectRatioHeight = 10;
     const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
     const aspectRatio = {
-      '--aspectRatio': `${aspect}%` as 'aspectRatio'
+      '--aspectRatio': `${aspect}%` as 'aspectRatio',
     };
 
     return [
       <article>
         <a class={classAttributes} href={this.url} target={target}>
-          <div class="hy-link-box__image-container" style={aspectRatio}>
-            {this.imageUrl && <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />}
-          </div>
+          {this.imageUrl && (
+            <div class="hy-link-box__image-container" style={aspectRatio}>
+              <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+            </div>
+          )}
           <div class={classTextContainer}>
             <h3 class="hy-link-box__text-container__title">{this.textTitle}</h3>
             {this.textDescription && <div class="hy-link-box__text-container__description">{this.textDescription}</div>}
           </div>
         </a>
       </article>,
-      <div class="hy-link-box__link" aria-hidden="true">
+      <div class={classLinkAttributes} aria-hidden="true">
         <hy-icon icon={'hy-icon-arrow-right'} size={48} />
-      </div>
+      </div>,
     ];
   }
 }
+
+/*
+<div class="hy-link-box__image-container" style={aspectRatio}>
+            {this.imageUrl && <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />}
+          </div>
+* */
diff --git a/src/components/link-box/readme.md b/src/components/link-box/readme.md
index dc6c651db5d69b9046a6e6d0b3e3d11afcbbb5ab..031c1e8b969bb50bd0bb9a9b10fbff083c4c22f4 100644
--- a/src/components/link-box/readme.md
+++ b/src/components/link-box/readme.md
@@ -6,6 +6,7 @@
 
 | Property          | Attribute          | Description | Type                                                     | Default                   |
 | ----------------- | ------------------ | ----------- | -------------------------------------------------------- | ------------------------- |
+| `headerstyle`     | `headerstyle`      |             | `string`                                                 | `'common'`                |
 | `imageAlt`        | `image-alt`        |             | `string`                                                 | `null`                    |
 | `imageUrl`        | `image-url`        |             | `string`                                                 | `null`                    |
 | `isExternal`      | `is-external`      |             | `boolean`                                                | `false`                   |
diff --git a/src/components/navigation/menu-language-item/menu-language-item.scss b/src/components/navigation/menu-language-item/menu-language-item.scss
index c380d25f58b9d171b293a503fb4e2eef5ed199ed..06f5c9e03c0e8bd5c20c0d0c7e234e5157ed8b09 100644
--- a/src/components/navigation/menu-language-item/menu-language-item.scss
+++ b/src/components/navigation/menu-language-item/menu-language-item.scss
@@ -14,6 +14,28 @@ a {
   text-decoration: none;
   text-transform: uppercase;
 
+  @include breakpoint($wide) {
+    @include font-size(15px, 20px);
+    color: var(--brand-main-light);
+    font-weight: 700;
+    padding: 0 40px 32px;
+
+    &:hover {
+      background-color: var(--grayscale-background-box);
+      color: var(--brand-main);
+    }
+  }
+  @include breakpoint($extrawide) {
+    @include font-size(15px, 20px);
+    color: var(--brand-main-light);
+    font-weight: 700;
+    padding: 0 32px 22px;
+  }
+  @include breakpoint($overwide) {
+    @include font-size(18px, 22px);
+    padding: 0 40px 32px;
+  }
+
   &:focus {
     outline: solid 2px var(--additional-yellow);
     outline-offset: 2px;
@@ -21,17 +43,27 @@ a {
 
   &.is-active {
     .hy-menu-language-item__label {
-      border-bottom-color: var(--additional-orange);
+      color: var(--grayscale-black);
+      font-weight: 700;
+      border-bottom: 2px solid var(--additional-orange);
+
+      @include breakpoint($wide) {
+        border-bottom: 3px solid var(--grayscale-black);
+        padding-bottom: 6px;
+      }
+      @include breakpoint($extrawide) {
+        border-bottom: 3px solid var(--grayscale-black);
+        padding-bottom: 6px;
+      }
+      @include breakpoint($overwide) {
+        padding-bottom: 8px;
+      }
     }
   }
 
   &:not(.is-mobile) {
-    @include font-size(16px, 20px);
-    margin: 0 0 5px;
-  }
-
-  .hy-menu-language-item__label {
-    border-bottom: 2px solid transparent;
-    padding-bottom: 5px;
+    //@include font-size(16px, 20px);
+    margin: 0;
+    // margin: 0 0 5px;
   }
 }
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 4656338280035fd0215a51dac0121a2ed42c73ee..f41bf241ba4fd1a6036a239eb82a12053eea27a4 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -42,10 +42,29 @@
     outline-offset: 2px;
   }
 
+  &:hover {
+    cursor: pointer;
+  }
+
   &.is-open {
     .menu--language__toggle__caret {
       transform: rotate(180deg);
     }
+    background-color: var(--grayscale-background-box);
+    @include breakpoint($wide) {
+      margin-bottom: -28px;
+      margin-top: -26px;
+      padding: 26px 8px 28px;
+    }
+    @include breakpoint($extrawide) {
+      margin-bottom: -38px;
+      margin-top: -26px;
+      padding: 26px 8px 38px;
+    }
+    @include breakpoint($overwide) {
+      margin-bottom: -50px;
+      padding: 26px 12px 50px;
+    }
   }
 
   > * {
@@ -71,6 +90,17 @@
   top: 40px;
   visibility: hidden;
 
+  @include breakpoint($wide) {
+    padding: 32px 0 0;
+    top: 70px;
+  }
+  @include breakpoint($extrawide) {
+    top: 80px;
+  }
+  @include breakpoint($overwide) {
+    top: 90px;
+  }
+
   &.is-open {
     visibility: visible;
     z-index: 100;
@@ -96,3 +126,19 @@
     width: 16px;
   }
 }
+
+.hy-menu-backdrop {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+
+  &.is-active {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition: background-color 300ms;
+    visibility: visible;
+    z-index: 99;
+  }
+}
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 52c6fd7f5b837ff007e477da3b36d04b050b1300..6af1f0e7d552ec7a62012bb43ea20b13dc12ff40 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -34,6 +34,44 @@ export class MenuLanguage {
 
   @Listen('languageMenuToggle') languageMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
+
+    let hyHeader = this.el.closest('.hy-site-header');
+    let hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+
+    if (hyBackdropDiv) {
+      if (this.isMenuOpen) {
+        (hyBackdropDiv as HTMLElement).classList.add('is-active');
+        (hyBackdropDiv as HTMLElement).style.top = '90px';
+      } else {
+        (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+        (hyBackdropDiv as HTMLElement).style.top = '0';
+      }
+    }
+  }
+
+  @Listen('click')
+  handleComponentClick(event) {
+    event.stopPropagation();
+  }
+
+  @Listen('click', {target: 'window'})
+  handleClick(event) {
+    if (this.isMenuOpen) {
+      const target = event.target as HTMLTextAreaElement;
+      const targetElement = target.tagName.toLowerCase();
+
+      if (targetElement !== 'hy-menu-language') {
+        const hyHeader = this.el.closest('.hy-site-header');
+        const hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+
+        if (hyBackdropDiv && hyBackdropDiv.classList.contains('is-active')) {
+          (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+          (hyBackdropDiv as HTMLElement).style.top = '0';
+          this.isMenuOpen = !this.isMenuOpen;
+        }
+      }
+    }
+    event.stopPropagation();
   }
 
   componentWillRender() {
@@ -43,6 +81,7 @@ export class MenuLanguage {
 
   render() {
     const black = 'var(--brand-main-nearly-black)';
+    const menuLanguageContainerClass = ['menu--language'].join(' ');
 
     return this.isMobile ? (
       <Host class={'menu--language'}>
@@ -60,7 +99,7 @@ export class MenuLanguage {
         })}
       </Host>
     ) : (
-      <Host class={'menu--language'}>
+      <Host class={menuLanguageContainerClass}>
         <button
           onClick={() => this.languageMenuToggle()}
           class={{
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index 0138078e25c99efae0ac807ba038eaa6efd6c574..b84677bdc159f5b61815e64bdc07583702f782c6 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -120,7 +120,7 @@
     min-height: 35px;
   }
 
-  @include breakpoint($medium) {
+  @include breakpoint($wide) {
     .menu--language {
       display: none;
       visibility: hidden;
diff --git a/src/components/paragraph-text/paragraph-text-content.scss b/src/components/paragraph-text/paragraph-text-content.scss
index 94ed6b7cf4a75438a01e6906c9140509ab77b6f8..6edae7cae222b71f65ae2b57fd574c25b96c3651 100644
--- a/src/components/paragraph-text/paragraph-text-content.scss
+++ b/src/components/paragraph-text/paragraph-text-content.scss
@@ -4,23 +4,42 @@
 * Common styles for text plus mobile & tablet & small desktop
 * in Content Pages and Field of science pages.
 */
-.hy-paragraph-text.content_page,
-.hy-paragraph-text.field_of_science {
-  h2 {
-    // text H2 small
-    @include font-size(26px, 32px);
-    letter-spacing: -0.8px;
-    padding-bottom: 40px;
+.hy-paragraph-text.content_page.external,
+.hy-paragraph-text.field_of_science.external {
+  margin-top: 24px; //total gap between heading h2 and paragraph content is 48px
 
-    @include breakpoint($wide) {
-      // text H2 Medium size ?? also for 1200-1440 with sidebar !!!
-      @include font-size(32px, 38px);
-      letter-spacing: -1px;
+  @include breakpoint($narrow) {
+    margin-top: 16px; //total gap 40px
+  }
+  @include breakpoint($wide) {
+    margin-top: 32px; //total gap 56px
+  }
+}
 
-      padding-bottom: 56px;
-    }
+// There is a sidebar on the Content page
+.hy-paragraph-text.content_page.external.default,
+.hy-paragraph-text.field_of_science.external.default {
+  @include breakpoint($extrawide) {
+    margin-top: 32px; //total gap 56px
   }
+  @include breakpoint($overwide) {
+    margin-top: 40px; //total gap 64px
+  }
+}
+
+// No sidebar on the Content page
+.hy-paragraph-text.content_page.external.wide,
+.hy-paragraph-text.field_of_science.external.wide {
+  @include breakpoint($extrawide) {
+    margin-top: 40px; //total gap 64px
+  }
+  @include breakpoint($overwide) {
+    margin-top: 40px; //total gap 64px
+  }
+}
 
+.hy-paragraph-text.content_page,
+.hy-paragraph-text.field_of_science {
   h3 {
     // text H3 small
     @include font-size(22px, 28px);
@@ -107,35 +126,9 @@
       padding-top: 28px;
     }
 
-    @include breakpoint($overwide) {
+    @include breakpoint($wide) {
       padding-bottom: 16px;
       padding-top: 32px;
     }
   }
 }
-
-// There is a sidebar on the Content page
-.hy-paragraph-text.content_page.default,
-.hy-paragraph-text.field_of_science.default {
-  h2 {
-    @include breakpoint($extrawide) {
-      padding-bottom: 56px;
-    }
-    @include breakpoint($overwide) {
-      padding-bottom: 64px;
-    }
-  }
-}
-
-// No sidebar on the Content page
-.hy-paragraph-text.content_page.wide,
-.hy-paragraph-text.field_of_science.default {
-  h2 {
-    @include breakpoint($extrawide) {
-      padding-bottom: 64px;
-    }
-    @include breakpoint($overwide) {
-      padding-bottom: 64px;
-    }
-  }
-}
diff --git a/src/components/paragraph-text/paragraph-text.tsx b/src/components/paragraph-text/paragraph-text.tsx
index 2f33196493df775521e7956e510da255ac5c65ed..9f3b4a501721ef7e216798e0e7e82b2b32523682 100644
--- a/src/components/paragraph-text/paragraph-text.tsx
+++ b/src/components/paragraph-text/paragraph-text.tsx
@@ -11,6 +11,7 @@ import {Component, Element, h, Host, Prop} from '@stencil/core';
 })
 export class ParagraphText {
   @Prop() variant: string;
+  @Prop() placement: string = 'internal';
   @Prop() headerstyle: string = 'default';
   @Element() el: HTMLElement;
 
@@ -24,7 +25,9 @@ export class ParagraphText {
   }
 
   render() {
-    const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.headerstyle}`].join(' ');
+    const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.placement}`, `${this.headerstyle}`].join(
+      ' '
+    );
 
     return (
       <Host>
diff --git a/src/components/paragraph-text/readme.md b/src/components/paragraph-text/readme.md
index 7ad35e36fa50f80010a4e378f8973461f0b2ce5a..f763b0bedcb64ce616f5f422a0d7a4d4e0792e5c 100644
--- a/src/components/paragraph-text/readme.md
+++ b/src/components/paragraph-text/readme.md
@@ -31,10 +31,25 @@ Basic text paragraph.
 
 ## Properties
 
-| Property      | Attribute     | Description | Type     | Default     |
-| ------------- | ------------- | ----------- | -------- | ----------- |
-| `headerstyle` | `headerstyle` |             | `string` | `'default'` |
-| `variant`     | `variant`     |             | `string` | `undefined` |
+| Property      | Attribute     | Description | Type     | Default      |
+| ------------- | ------------- | ----------- | -------- | ------------ |
+| `headerstyle` | `headerstyle` |             | `string` | `'default'`  |
+| `placement`   | `placement`   |             | `string` | `'internal'` |
+| `variant`     | `variant`     |             | `string` | `undefined`  |
+
+## Dependencies
+
+### Used by
+
+- [hy-video](../hy-video)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-video --> hy-paragraph-text
+  style hy-paragraph-text fill:#f9f,stroke:#333,stroke-width:4px
+```
 
 ---
 
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 53542c52aaf83f04708bf97e1cbe531eae1935cd..6ffe0687fb51016e12006eee2e058616419e4997 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -90,7 +90,7 @@ export class SiteHeader {
 
   applySizeClasses(size: number) {
     // Set the menu-type based on the width of the browser.
-    if (size < 1200 && size > 960) {
+    if (size <= 1200 && size > 960) {
       this.menuType = MenuType.tablet;
     } else if (size <= 960) {
       this.menuType = MenuType.mobile;
@@ -113,6 +113,7 @@ export class SiteHeader {
       case MenuType.desktop:
         return (
           <header class={classAttributes.join(' ')}>
+            <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
             <div class={'hy-site-header__logo-container'}>
               <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
             </div>
diff --git a/src/index.html b/src/index.html
index 5f6fc07d9a1b07782d406ae7db5a18ca7696b230..3967c93eacfb5129b108d7396c5cb294d86f013e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -186,6 +186,62 @@
           sc-label="List of conferences"
         >
         </hy-banner>
+        <hy-video
+          video-title="Youtube test embed"
+          video-description="Video description for giving more context to what the user is viewing (eg. if the video is part of a lecture series, or a series of speeches). Can include links and probably needs to have a character limit."
+          context-label="Youtube test"
+          views="123"
+          views-label="Views"
+          duration="1:23"
+          duration-label="Duration"
+          date-added="28.10.2020"
+          date-added-label="Added"
+          play-button-visible
+          context-label-visible
+          play-button-label="Play video"
+          preview-image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+        >
+          <iframe
+            slot="video"
+            src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque"
+            frameborder="0"
+          ></iframe>
+        </hy-video>
+        <hy-video
+          horizontal
+          video-title="Youtube test embed"
+          video-description="Video description for giving more context to what the user is viewing (eg. if the video is part of a lecture series, or a series of speeches). Can include links and probably needs to have a character limit."
+          context-label="Youtube test"
+          views="123"
+          views-label="Views"
+          duration="1:23"
+          context-label-visible
+          duration-label="Duration"
+          date-added="28.10.2020"
+          date-added-label="Added"
+        >
+          <iframe
+            slot="video"
+            src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque"
+            frameborder="0"
+          ></iframe>
+        </hy-video>
+        <hy-video
+          context-label="Youtube test"
+          play-button-visible
+          context-label-visible
+          play-button-label="Play video"
+          link-to-video="https://www.google.com"
+          preview-image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+        >
+        </hy-video>
+        <hy-video>
+          <iframe
+            slot="video"
+            src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque"
+            frameborder="0"
+          ></iframe>
+        </hy-video>
         <hy-accordion-container accordionid="example-accordion">
           <hy-accordion-item accordiontitle="This is a accordion item 1">
             <hy-paragraph-text>Accordion content</hy-paragraph-text>