diff --git a/package.json b/package.json
index ccdffb1d9be75d3e71dee1ac49b94076df79f858..fb94ec62fbb3e5a26e81d470b62fd4ddac2d31ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Helsinki University Design System library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 5cfebc9ce1a07a2af440a497bdce4997ac427dfd..8da540c2c1bffb514cd3ccec48bbb068572f288f 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -48,7 +48,7 @@
 
   &:after {
     background-color: transparent;
-    border-bottom: 1px dashed var(--grayscale-dark);
+    border-bottom: 1px solid var(--grayscale-dark);
     content: ' ';
     display: flex;
     height: 2px;
@@ -65,6 +65,80 @@
   }
 }
 
+// h2 used in landing pages: caps, bigger font
+h2.hy-heading__landingsection {
+  @include font-size(28px, 32px);
+  letter-spacing: -0.88px;
+  text-transform: uppercase;
+
+  @include breakpoint($narrow) {
+    // > 480px
+    @include font-size(40px, 40px);
+    letter-spacing: -1.25px;
+  }
+
+  @include breakpoint($extrawide) {
+    // > 1200px
+    @include font-size(48px, 48px);
+    letter-spacing: -1.6px;
+  }
+
+  @include breakpoint($overwide) {
+    // > 1400px
+    @include font-size(54px, 54px);
+    letter-spacing: -1.8px;
+  }
+}
+
+// h2 used in landing pages: no caps,  line, different font
+h2.hy-heading__contentsection {
+  flex-shrink: 2;
+  overflow: hidden;
+  width: 100%;
+
+  &:after {
+    background-color: transparent;
+    border-bottom: 1px solid var(--grayscale-dark);
+    content: ' ';
+    display: flex;
+    height: 2px;
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 1rem;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include breakpoint($medium) {
+      margin-left: 2rem;
+    }
+  }
+}
+
+// h3 on landing pages use the same fonts as h2 on content pages; no line; no caps
+h3.hy-heading__landingsection {
+  @include font-size(26px, 32px);
+  letter-spacing: -0.8px;
+
+  @include breakpoint($narrow) {
+    // > 480px
+    @include font-size(32px, 32px);
+    letter-spacing: -1px;
+  }
+
+  @include breakpoint($extrawide) {
+    // > 1200px
+    @include font-size(40px, 48px);
+    letter-spacing: -1.2px;
+  }
+
+  @include breakpoint($overwide) {
+    // > 1400px
+    @include font-size(40px, 48px);
+    letter-spacing: -1.2px;
+  }
+}
+
 /*
   H1 used in Hero and Introduction paragraphs.
 */
@@ -162,6 +236,7 @@ h2 {
   }
 }
 
+// default h3 used in content pages
 h3 {
   @include font-size(22px, 28px);
   letter-spacing: -0.7px;
diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx
index 2a781f22957e47873c3498a5449077b1f0a25bcf..ae3861f2b9606c51f7cc9b131124253dd5538435 100644
--- a/src/components/heading/heading.tsx
+++ b/src/components/heading/heading.tsx
@@ -23,9 +23,19 @@ export class Heading {
     const classAttributes = [
       'hy-heading',
       this.negative ? 'negative' : '',
-      this.section == 'introduction' ? 'hy-heading__introduction' : '',
+      `hy-heading__${this.section}`,
+      //this.section == 'introduction' ? 'hy-heading__introduction' : '',
+      //this.section == 'landingsection' ? `hy-heading__landingsection` : '',
+      //this.section == 'contentsection' ? `hy-heading__contentsection` : '',
     ];
-    const sectionClassAttributes = [this.section == 'subsection' ? `hy-heading__${this.section}` : ''].join(' ');
+    //const sectionClassAttributes = [this.section == 'subsection' ? `hy-heading__${this.section}` : ''].join(' ');
+    const sectionClassAttributes = [
+      `hy-heading__${this.section}`,
+      //this.section == 'subsection' ? `hy-heading__${this.section}` : '',
+      //this.section == 'landingsection' ? `hy-heading__${this.section}` : '',
+      //this.section == 'contentsection' ? `hy-heading__${this.section}` : '',
+    ].join(' ');
+
     const containerSectionClass = ['hy-heading__container', `hy-heading__container__${this.section}`].join(' ');
     return (
       <Host>
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
index e0fd6f0b67e7011dd71d4830e81dd917361c2e27..6756e515e55b41cb6c707fc02bb3fb9ba327ed9e 100644
--- a/src/components/heading/readme.md
+++ b/src/components/heading/readme.md
@@ -87,11 +87,11 @@ Provide heading attribute for the component to choose what type of heading to us
 
 ## Properties
 
-| Property   | Attribute  | Description | Type                                                                                                                              | Default                                 |
-| ---------- | ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| `heading`  | `heading`  |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6` | `HeadingVarians.default as any`         |
-| `negative` | `negative` |             | `boolean`                                                                                                                         | `false`                                 |
-| `section`  | `section`  |             | `HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.subSection`                      | `HeadingSectionVariants.default as any` |
+| Property   | Attribute  | Description | Type                                                                                                                                                                                                 | Default                                 |
+| ---------- | ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| `heading`  | `heading`  |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6`                                                                    | `HeadingVarians.default as any`         |
+| `negative` | `negative` |             | `boolean`                                                                                                                                                                                            | `false`                                 |
+| `section`  | `section`  |             | `HeadingSectionVariants.contentPageHeader \| HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.landingPageHeader \| HeadingSectionVariants.subSection` | `HeadingSectionVariants.default as any` |
 
 ## Dependencies
 
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 1497bb72f364b67d00394f3f8f9ecdfc25df07be..cca906eb4e2f8ae14ae5c8fa8f879cc07e1d7b6c 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -25,6 +25,8 @@ export enum HeadingSectionVariants {
   default = 'default',
   subSection = 'subsection',
   introduction = 'introduction',
+  landingPageHeader = 'landingsection',
+  contentPageHeader = 'contentsection',
 }
 
 export enum LinkVariants {