diff --git a/.github/workflows/backstage-catalog-helper.yml b/.github/workflows/backstage-catalog-helper.yml
index 6a9863317..ddfe9c329 100644
--- a/.github/workflows/backstage-catalog-helper.yml
+++ b/.github/workflows/backstage-catalog-helper.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Update catalog-info.yaml
-        uses: cds-snc/backstage-catalog-info-helper-action@v0.2.0
+        uses: cds-snc/backstage-catalog-info-helper-action@v0.3.0
         with:
           github-app-id: ${{ secrets.SRE_BOT_RW_APP_ID }}
           github-app-private-key: ${{ secrets.SRE_BOT_RW_APP_PRIVATE_KEY }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 795ec6b63..a38ace4c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## v0.16.0
+
+### New features
+
+- Heading component (`gcds-heading`)
+  - New `gcds-heading` to render headings in GCDS styles
+
+### Minor
+
+- https://github.com/cds-snc/gcds-components/pull/306 - [c972bef](https://github.com/cds-snc/gcds-components/commit/c972befacb6961fed73c983df1fb4fda6cbc9ca5) - Add `gcds-heading` to component library
+
+### Patch
+
+- https://github.com/cds-snc/gcds-components/pull/325 - [3ec8925](https://github.com/cds-snc/gcds-components/commit/3ec89251bf56b346df50ed67ad0a8992631240ff) - Fix slot CSS in gcds-breadcrumbs-item to display text underline
+
 ## v0.15.0
 
 ### New features
diff --git a/lerna.json b/lerna.json
index 351e765bc..65604a4a6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,7 +1,7 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": true,
-  "version": "0.15.0",
+  "version": "0.16.0",
   "packages": [
     "packages/web",
     "packages/react",
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 5905c83eb..c8490bad5 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cdssnc/gcds-components-angular",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cdssnc/gcds-components-angular",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "dependencies": {
         "tslib": "^2.3.0"
       },
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 2ded7a5bb..2ad51e471 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components-angular",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "Government of Canada / Gouvernement du Canada",
   "description": "Angular wrapper for gcds-components",
   "homepage": "https://design-system.alpha.canada.ca/",
@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@angular/common": "^16.0.0",
     "@angular/core": "^16.0.0",
-    "@cdssnc/gcds-components": "^0.15.0"
+    "@cdssnc/gcds-components": "^0.16.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts
index 4c05b0f34..682e122a8 100644
--- a/packages/angular/src/lib/stencil-generated/components.ts
+++ b/packages/angular/src/lib/stencil-generated/components.ts
@@ -445,6 +445,28 @@ export class GcdsHeader {
 export declare interface GcdsHeader extends Components.GcdsHeader {}
 
 
+@ProxyCmp({
+  inputs: ['characterLimit', 'marginBottom', 'marginTop', 'tag']
+})
+@Component({
+  selector: 'gcds-heading',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['characterLimit', 'marginBottom', 'marginTop', 'tag'],
+})
+export class GcdsHeading {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface GcdsHeading extends Components.GcdsHeading {}
+
+
 @ProxyCmp({
   inputs: ['hint', 'hintId']
 })
diff --git a/packages/angular/src/lib/stencil-generated/index.ts b/packages/angular/src/lib/stencil-generated/index.ts
index 6dff23ba1..dd7225def 100644
--- a/packages/angular/src/lib/stencil-generated/index.ts
+++ b/packages/angular/src/lib/stencil-generated/index.ts
@@ -18,6 +18,7 @@ export const DIRECTIVES = [
   d.GcdsFooter,
   d.GcdsGrid,
   d.GcdsHeader,
+  d.GcdsHeading,
   d.GcdsHint,
   d.GcdsIcon,
   d.GcdsInput,
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index b89b9e578..88be7b21d 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@cdssnc/gcds-components-react",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cdssnc/gcds-components-react",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "dependencies": {
-        "@cdssnc/gcds-components": "^0.15.0"
+        "@cdssnc/gcds-components": "^0.16.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
diff --git a/packages/react/package.json b/packages/react/package.json
index 3c1db7377..6dbb2176a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components-react",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "Government of Canada / Gouvernement du Canada",
   "description": "React wrapper for gcds-components",
   "homepage": "https://design-system.alpha.canada.ca/",
@@ -29,7 +29,7 @@
     "gcds.css"
   ],
   "dependencies": {
-    "@cdssnc/gcds-components": "^0.15.0"
+    "@cdssnc/gcds-components": "^0.16.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
diff --git a/packages/react/src/components/stencil-generated/index.ts b/packages/react/src/components/stencil-generated/index.ts
index b3c000cd9..bdb869dee 100644
--- a/packages/react/src/components/stencil-generated/index.ts
+++ b/packages/react/src/components/stencil-generated/index.ts
@@ -24,6 +24,7 @@ export const GcdsFileUploader = /*@__PURE__*/createReactComponent<JSX.GcdsFileUp
 export const GcdsFooter = /*@__PURE__*/createReactComponent<JSX.GcdsFooter, HTMLGcdsFooterElement>('gcds-footer');
 export const GcdsGrid = /*@__PURE__*/createReactComponent<JSX.GcdsGrid, HTMLGcdsGridElement>('gcds-grid');
 export const GcdsHeader = /*@__PURE__*/createReactComponent<JSX.GcdsHeader, HTMLGcdsHeaderElement>('gcds-header');
+export const GcdsHeading = /*@__PURE__*/createReactComponent<JSX.GcdsHeading, HTMLGcdsHeadingElement>('gcds-heading');
 export const GcdsHint = /*@__PURE__*/createReactComponent<JSX.GcdsHint, HTMLGcdsHintElement>('gcds-hint');
 export const GcdsIcon = /*@__PURE__*/createReactComponent<JSX.GcdsIcon, HTMLGcdsIconElement>('gcds-icon');
 export const GcdsInput = /*@__PURE__*/createReactComponent<JSX.GcdsInput, HTMLGcdsInputElement>('gcds-input');
diff --git a/packages/web/package-lock.json b/packages/web/package-lock.json
index a820971e5..83b216b0a 100644
--- a/packages/web/package-lock.json
+++ b/packages/web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cdssnc/gcds-components",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cdssnc/gcds-components",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^4.0.0",
@@ -2072,9 +2072,9 @@
       "dev": true
     },
     "node_modules/@cdssnc/gcds-tokens": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.9.0.tgz",
-      "integrity": "sha512-zsWsqralW8uCaTPiFxyFKGqKOHEgLWirmExoK+fY99kzKDzvhw4QBIhy/h/+LhIG8EgClKZb12RPjfp6Tcl9Kg==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.9.2.tgz",
+      "integrity": "sha512-xMTe1LxQ9Rmz2gp7wj7gs6J7U0dGpMlMuX6ks+0QRERAfpDCWVXK3Acq8sTvAB/CAu0HP8M53vq4pU7RxARFig==",
       "dev": true
     },
     "node_modules/@colors/colors": {
diff --git a/packages/web/package.json b/packages/web/package.json
index 8e175547e..7d072e4d6 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-components",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "Government of Canada / Gouvernement du Canada",
   "description": "Web components for the GCDS",
   "homepage": "https://design-system.alpha.canada.ca/",
diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
index 6ebf3f2d2..696e63640 100644
--- a/packages/web/src/components.d.ts
+++ b/packages/web/src/components.d.ts
@@ -539,6 +539,54 @@ export namespace Components {
          */
         "skipToHref": string;
     }
+    interface GcdsHeading {
+        /**
+          * Sets the line length to a maximum amount of characters per line for each heading level, ensuring a comfortable, accessible reading length.
+         */
+        "characterLimit"?: boolean;
+        /**
+          * Adds margin below the heading. The default margin-botttom is 400.
+         */
+        "marginBottom"?: | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+        /**
+          * Adds margin above the heading. The default margin-top for h1 is set to 0, while for h2 to h6 headings, it's 500.
+         */
+        "marginTop"?: | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+        /**
+          * Sets the appropriate HTML tag for the selected level.
+         */
+        "tag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }
     interface GcdsHint {
         /**
           * Hint displayed below the label and above the input field.
@@ -1302,6 +1350,12 @@ declare global {
         prototype: HTMLGcdsHeaderElement;
         new (): HTMLGcdsHeaderElement;
     };
+    interface HTMLGcdsHeadingElement extends Components.GcdsHeading, HTMLStencilElement {
+    }
+    var HTMLGcdsHeadingElement: {
+        prototype: HTMLGcdsHeadingElement;
+        new (): HTMLGcdsHeadingElement;
+    };
     interface HTMLGcdsHintElement extends Components.GcdsHint, HTMLStencilElement {
     }
     var HTMLGcdsHintElement: {
@@ -1445,6 +1499,7 @@ declare global {
         "gcds-footer": HTMLGcdsFooterElement;
         "gcds-grid": HTMLGcdsGridElement;
         "gcds-header": HTMLGcdsHeaderElement;
+        "gcds-heading": HTMLGcdsHeadingElement;
         "gcds-hint": HTMLGcdsHintElement;
         "gcds-icon": HTMLGcdsIconElement;
         "gcds-input": HTMLGcdsInputElement;
@@ -2056,6 +2111,54 @@ declare namespace LocalJSX {
          */
         "skipToHref": string;
     }
+    interface GcdsHeading {
+        /**
+          * Sets the line length to a maximum amount of characters per line for each heading level, ensuring a comfortable, accessible reading length.
+         */
+        "characterLimit"?: boolean;
+        /**
+          * Adds margin below the heading. The default margin-botttom is 400.
+         */
+        "marginBottom"?: | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+        /**
+          * Adds margin above the heading. The default margin-top for h1 is set to 0, while for h2 to h6 headings, it's 500.
+         */
+        "marginTop"?: | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+        /**
+          * Sets the appropriate HTML tag for the selected level.
+         */
+        "tag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }
     interface GcdsHint {
         /**
           * Hint displayed below the label and above the input field.
@@ -2750,6 +2853,7 @@ declare namespace LocalJSX {
         "gcds-footer": GcdsFooter;
         "gcds-grid": GcdsGrid;
         "gcds-header": GcdsHeader;
+        "gcds-heading": GcdsHeading;
         "gcds-hint": GcdsHint;
         "gcds-icon": GcdsIcon;
         "gcds-input": GcdsInput;
@@ -2793,6 +2897,7 @@ declare module "@stencil/core" {
             "gcds-footer": LocalJSX.GcdsFooter & JSXBase.HTMLAttributes<HTMLGcdsFooterElement>;
             "gcds-grid": LocalJSX.GcdsGrid & JSXBase.HTMLAttributes<HTMLGcdsGridElement>;
             "gcds-header": LocalJSX.GcdsHeader & JSXBase.HTMLAttributes<HTMLGcdsHeaderElement>;
+            "gcds-heading": LocalJSX.GcdsHeading & JSXBase.HTMLAttributes<HTMLGcdsHeadingElement>;
             "gcds-hint": LocalJSX.GcdsHint & JSXBase.HTMLAttributes<HTMLGcdsHintElement>;
             "gcds-icon": LocalJSX.GcdsIcon & JSXBase.HTMLAttributes<HTMLGcdsIconElement>;
             "gcds-input": LocalJSX.GcdsInput & JSXBase.HTMLAttributes<HTMLGcdsInputElement>;
diff --git a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css
index d1bad4d04..4c2996931 100644
--- a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css
+++ b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css
@@ -24,7 +24,7 @@
       white-space: normal;
 
       slot {
-        display: inherit;
+        display: block;
       }
     }
   }
diff --git a/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx b/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx
index 4d692d954..58008b17a 100644
--- a/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx
+++ b/packages/web/src/components/gcds-breadcrumbs/stories/overview.mdx
@@ -9,32 +9,25 @@ _Also called: breadcrumb trail._
 
 A path to the current page from each preceding level of the site’s hierarchy.
 
-<Canvas
-  of={Breadcrumbs.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Breadcrumbs.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Canada.ca link
 
 #### Default
 
-<Canvas
-  of={Breadcrumbs.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Breadcrumbs.Default} story={{ inline: true }} />
 
 #### Without Canda.ca link
 
-<Canvas
-  of={Breadcrumbs.WithoutCanadaLink}
-  story={{ inline: true }}
-/>
+<Canvas of={Breadcrumbs.WithoutCanadaLink} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/breadcrumbs/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-button/stories/overview.mdx b/packages/web/src/components/gcds-button/stories/overview.mdx
index c67bac420..147598a9b 100644
--- a/packages/web/src/components/gcds-button/stories/overview.mdx
+++ b/packages/web/src/components/gcds-button/stories/overview.mdx
@@ -9,124 +9,81 @@ _Also called: call to action, CTA, link._
 
 A button is an interactive object that highlights an important or common action.
 
-<Canvas
-  of={Button.Preview}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.Preview} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Types
 
-<Canvas
-  of={Button.PreviewTypes}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.PreviewTypes} story={{ inline: true }} />
 
 ### Roles
 
-<Canvas
-  of={Button.Preview}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.Preview} story={{ inline: true }} />
 
 ### Styles
 
-<Canvas
-  of={Button.PreviewStyles}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.PreviewStyles} story={{ inline: true }} />
 
 ### Primary button
 
 #### States
 
-<Canvas
-  of={Button.PrimaryState}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.PrimaryState} story={{ inline: true }} />
 
 #### Size
 
-<Canvas
-  of={Button.PrimarySize}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.PrimarySize} story={{ inline: true }} />
 
 ### Secondary button
 
 #### States
 
-<Canvas
-  of={Button.SecondaryState}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.SecondaryState} story={{ inline: true }} />
 
 #### Size
 
-<Canvas
-  of={Button.SecondarySize}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.SecondarySize} story={{ inline: true }} />
 
 ### Danger button
 
 #### States
 
-<Canvas
-  of={Button.DangerState}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.DangerState} story={{ inline: true }} />
 
 #### Size
 
-<Canvas
-  of={Button.DangerSize}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.DangerSize} story={{ inline: true }} />
 
 ### Skip-to-content button
 
 #### States
 
-<Canvas
-  of={Button.SkipToContentState}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.SkipToContentState} story={{ inline: true }} />
 
 #### Size
 
-<Canvas
-  of={Button.SkipToContentSize}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.SkipToContentSize} story={{ inline: true }} />
 
 ### Text-only button
 
 #### States
 
-<Canvas
-  of={Button.TextOnlyState}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.TextOnlyState} story={{ inline: true }} />
 
 #### Size
 
-<Canvas
-  of={Button.TextOnlySize}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.TextOnlySize} story={{ inline: true }} />
 
 ### Button with icon
 
-<Canvas
-  of={Button.BtnWithIcon}
-  story={{ inline: true }}
-/>
+<Canvas of={Button.BtnWithIcon} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/button/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-card/stories/overview.mdx b/packages/web/src/components/gcds-card/stories/overview.mdx
index 2861964a6..b888928fb 100644
--- a/packages/web/src/components/gcds-card/stories/overview.mdx
+++ b/packages/web/src/components/gcds-card/stories/overview.mdx
@@ -9,39 +9,29 @@ _Also called: tile, content card._
 
 A card is a box containing structured, actionable content on a single topic.
 
-<Canvas
-  of={Card.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Card.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Types
 
 #### Link
 
-<Canvas
-  of={Card.Link}
-  story={{ inline: true }}
-/>
+<Canvas of={Card.Link} story={{ inline: true }} />
 
 #### Action
 
-<Canvas
-  of={Card.Action}
-  story={{ inline: true }}
-/>
+<Canvas of={Card.Action} story={{ inline: true }} />
 
 ### With image
 
-<Canvas
-  of={Card.Image}
-  story={{ inline: true }}
-/>
+<Canvas of={Card.Image} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/card/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-checkbox/stories/overview.mdx b/packages/web/src/components/gcds-checkbox/stories/overview.mdx
index 2d8dd5615..16fca6be3 100644
--- a/packages/web/src/components/gcds-checkbox/stories/overview.mdx
+++ b/packages/web/src/components/gcds-checkbox/stories/overview.mdx
@@ -9,54 +9,37 @@ _Also called: checklist, check list._
 
 A checkbox is a set of options for one or multiple selections.
 
-<Canvas
-  of={Checkbox.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Checkbox.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={Checkbox.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Checkbox.Default} story={{ inline: true }} />
 
 #### Required
 
-<Canvas
-  of={Checkbox.Required}
-  story={{ inline: true }}
-/>
-
+<Canvas of={Checkbox.Required} story={{ inline: true }} />
 
 #### Error
 
-<Canvas
-  of={Checkbox.Error}
-  story={{ inline: true }}
-/>
+<Canvas of={Checkbox.Error} story={{ inline: true }} />
 
 #### Disabled
 
-<Canvas
-  of={Checkbox.Disabled}
-  story={{ inline: true }}
-/>
+<Canvas of={Checkbox.Disabled} story={{ inline: true }} />
 
 #### Checked
 
-<Canvas
-  of={Checkbox.Checked}
-  story={{ inline: true }}
-/>
+<Canvas of={Checkbox.Checked} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/checkbox/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-container/stories/overview.mdx b/packages/web/src/components/gcds-container/stories/overview.mdx
index f1206e5d2..4d86f873c 100644
--- a/packages/web/src/components/gcds-container/stories/overview.mdx
+++ b/packages/web/src/components/gcds-container/stories/overview.mdx
@@ -9,81 +9,53 @@ _Also called: wrapper, box._
 
 A box to group content by limiting the width.
 
-<Canvas
-  of={Container.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Container sizes
 
 #### Size: full
 
-<Canvas
-  of={Container.SizeFull}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.SizeFull} story={{ inline: true }} />
 
 #### Size: xl
 
-<Canvas
-  of={Container.SizeXl}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.SizeXl} story={{ inline: true }} />
 
 #### Size: lg
 
-<Canvas
-  of={Container.SizeLg}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.SizeLg} story={{ inline: true }} />
 
 #### Size: md
 
-<Canvas
-  of={Container.SizeMd}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.SizeMd} story={{ inline: true }} />
 
 #### Size: sm
 
-<Canvas
-  of={Container.SizeSm}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.SizeSm} story={{ inline: true }} />
 
 #### Size: xs
 
-<Canvas
-  of={Container.SizeXs}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.SizeXs} story={{ inline: true }} />
 
 ### Centered
 
-<Canvas
-  of={Container.Centered}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.Centered} story={{ inline: true }} />
 
 ### Margin
 
-<Canvas
-  of={Container.Margin}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.Margin} story={{ inline: true }} />
 
 ### Padding
 
-<Canvas
-  of={Container.Padding}
-  story={{ inline: true }}
-/>
+<Canvas of={Container.Padding} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/container/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-date-modified/stories/overview.mdx b/packages/web/src/components/gcds-date-modified/stories/overview.mdx
index 9691a56ae..82e48ccb1 100644
--- a/packages/web/src/components/gcds-date-modified/stories/overview.mdx
+++ b/packages/web/src/components/gcds-date-modified/stories/overview.mdx
@@ -9,48 +9,35 @@ _Also called: version date, last updated._
 
 A timestamp of the last page update.
 
-<Canvas
-  of={DateModified.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={DateModified.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Type
 
 #### Date
 
-<Canvas
-  of={DateModified.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={DateModified.Default} story={{ inline: true }} />
 
 #### Version
 
-<Canvas
-  of={DateModified.Version}
-  story={{ inline: true }}
-/>
+<Canvas of={DateModified.Version} story={{ inline: true }} />
 
 ### Language
 
 #### English
 
-<Canvas
-  of={DateModified.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={DateModified.Default} story={{ inline: true }} />
 
 #### French
 
-<Canvas
-  of={DateModified.French}
-  story={{ inline: true }}
-/>
+<Canvas of={DateModified.French} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/date-modified/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-details/stories/overview.mdx b/packages/web/src/components/gcds-details/stories/overview.mdx
index 70034c53c..fbc0c22cc 100644
--- a/packages/web/src/components/gcds-details/stories/overview.mdx
+++ b/packages/web/src/components/gcds-details/stories/overview.mdx
@@ -9,32 +9,25 @@ _Also called: accordion, collapse._
 
 Details is an interactive switch for a person to expand or collapse content.
 
-<Canvas
-  of={Details.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Details.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={Details.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Details.Default} story={{ inline: true }} />
 
 #### Open
 
-<Canvas
-  of={Details.Open}
-  story={{ inline: true }}
-/>
+<Canvas of={Details.Open} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/details/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-error-message/stories/overview.mdx b/packages/web/src/components/gcds-error-message/stories/overview.mdx
index f79f35ea3..947807eca 100644
--- a/packages/web/src/components/gcds-error-message/stories/overview.mdx
+++ b/packages/web/src/components/gcds-error-message/stories/overview.mdx
@@ -9,23 +9,19 @@ _Also called: error, inline error._
 
 An error message is a description of a problem blocking a user goal.
 
-<Canvas
-  of={ErrorMessage.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={ErrorMessage.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Default
 
-<Canvas
-  of={ErrorMessage.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={ErrorMessage.Default} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/error-message/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-error-summary/stories/overview.mdx b/packages/web/src/components/gcds-error-summary/stories/overview.mdx
index ef92e5283..c23143ba5 100644
--- a/packages/web/src/components/gcds-error-summary/stories/overview.mdx
+++ b/packages/web/src/components/gcds-error-summary/stories/overview.mdx
@@ -9,23 +9,19 @@ _Also called: error list._
 
 An error summary is a list of user errors in a form.
 
-<Canvas
-  of={ErrorSummary.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={ErrorSummary.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Default
 
-<Canvas
-  of={ErrorSummary.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={ErrorSummary.Default} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/error-summary/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-fieldset/stories/overview.mdx b/packages/web/src/components/gcds-fieldset/stories/overview.mdx
index 703cb0913..552d8e250 100644
--- a/packages/web/src/components/gcds-fieldset/stories/overview.mdx
+++ b/packages/web/src/components/gcds-fieldset/stories/overview.mdx
@@ -9,46 +9,33 @@ _Also called: form field._
 
 A fieldset is a group of multiple form components or elements.
 
-<Canvas
-  of={Fieldset.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Fieldset.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={Fieldset.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Fieldset.Default} story={{ inline: true }} />
 
 #### Required
 
-<Canvas
-  of={Fieldset.Required}
-  story={{ inline: true }}
-/>
+<Canvas of={Fieldset.Required} story={{ inline: true }} />
 
 #### Error
 
-<Canvas
-  of={Fieldset.Error}
-  story={{ inline: true }}
-/>
+<Canvas of={Fieldset.Error} story={{ inline: true }} />
 
 #### Disabled
 
-<Canvas
-  of={Fieldset.Disabled}
-  story={{ inline: true }}
-/>
+<Canvas of={Fieldset.Disabled} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/fieldset/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-file-uploader/stories/overview.mdx b/packages/web/src/components/gcds-file-uploader/stories/overview.mdx
index 95bf4ff84..7d4a39eb8 100644
--- a/packages/web/src/components/gcds-file-uploader/stories/overview.mdx
+++ b/packages/web/src/components/gcds-file-uploader/stories/overview.mdx
@@ -9,44 +9,29 @@ _Also called: file upload, file input, dropzone._
 
 A file uploader is a space to select and add supporting documentation.
 
-<Canvas
-  of={FileUploader.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={FileUploader.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.Default} story={{ inline: true }} />
 
 #### Required
 
-<Canvas
-  of={FileUploader.Required}
-  story={{ inline: true }}
-/>
-
+<Canvas of={FileUploader.Required} story={{ inline: true }} />
 
 #### Error
 
-<Canvas
-  of={FileUploader.Error}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.Error} story={{ inline: true }} />
 
 #### Disabled
 
-<Canvas
-  of={FileUploader.Disabled}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.Disabled} story={{ inline: true }} />
 
 ### Multiple files
 
@@ -54,19 +39,13 @@ A file uploader is a space to select and add supporting documentation.
 
 By default the user can only choose one file.
 
-<Canvas
-  of={FileUploader.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.Default} story={{ inline: true }} />
 
 #### Multiple files
 
 Setting `multiple` to `true` allows the user to choose multiple files.
 
-<Canvas
-  of={FileUploader.Multiple}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.Multiple} story={{ inline: true }} />
 
 ### Accepted file formats
 
@@ -74,62 +53,39 @@ Setting `multiple` to `true` allows the user to choose multiple files.
 
 By default all file formats are allowed.
 
-<Canvas
-  of={FileUploader.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.Default} story={{ inline: true }} />
 
 #### Images only
 
-<Canvas
-  of={FileUploader.AcceptImages}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.AcceptImages} story={{ inline: true }} />
 
 #### JPG only
 
-<Canvas
-  of={FileUploader.AcceptJpg}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.AcceptJpg} story={{ inline: true }} />
 
 #### PNG only
 
-<Canvas
-  of={FileUploader.AcceptPng}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.AcceptPng} story={{ inline: true }} />
 
 #### SVG only
 
-<Canvas
-  of={FileUploader.AcceptSvg}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.AcceptSvg} story={{ inline: true }} />
 
 #### PDF only
 
-<Canvas
-  of={FileUploader.AcceptPdf}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.AcceptPdf} story={{ inline: true }} />
 
 #### Audio only
 
-<Canvas
-  of={FileUploader.AcceptAudio}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.AcceptAudio} story={{ inline: true }} />
 
 #### Videos only
 
-<Canvas
-  of={FileUploader.AcceptVideos}
-  story={{ inline: true }}
-/>
+<Canvas of={FileUploader.AcceptVideos} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/select/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-footer/stories/overview.mdx b/packages/web/src/components/gcds-footer/stories/overview.mdx
index 0d07d13d9..f1fe40453 100644
--- a/packages/web/src/components/gcds-footer/stories/overview.mdx
+++ b/packages/web/src/components/gcds-footer/stories/overview.mdx
@@ -9,39 +9,29 @@ _Also called: site footer._
 
 The footer is the responsive Government of Canada branded footer landmark.
 
-<Canvas
-  of={Footer.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Footer.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Display
 
 #### Compact / default
 
-<Canvas
-  of={Footer.DisplayCompact}
-  story={{ inline: true }}
-/>
+<Canvas of={Footer.DisplayCompact} story={{ inline: true }} />
 
 ### Full
 
-<Canvas
-  of={Footer.DisplayFull}
-  story={{ inline: true }}
-/>
+<Canvas of={Footer.DisplayFull} story={{ inline: true }} />
 
 #### Display with contextual links
 
-<Canvas
-  of={Footer.DisplayContextual}
-  story={{ inline: true }}
-/>
+<Canvas of={Footer.DisplayContextual} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/footer/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-grid/stories/overview.mdx b/packages/web/src/components/gcds-grid/stories/overview.mdx
index 170381d11..dd6d53b91 100644
--- a/packages/web/src/components/gcds-grid/stories/overview.mdx
+++ b/packages/web/src/components/gcds-grid/stories/overview.mdx
@@ -9,13 +9,11 @@ _Also called: layout, columns, columns layout, grid container._
 
 A grid is a responsive, flexible column layout to position elements on a page.
 
-<Canvas
-  of={Grid.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Grid.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Grid columns
 
@@ -23,28 +21,19 @@ A grid is a responsive, flexible column layout to position elements on a page.
 
 Use the `columns` property to add your layout for smaller screens or if you are using the same layout for all screens.
 
-<Canvas
-  of={Grid.Columns}
-  story={{ inline: true }}
-/>
+<Canvas of={Grid.Columns} story={{ inline: true }} />
 
 #### Columns tablet
 
 Use the `columns-tablet` property to set your tablet layout **(48em and 768px and above)** or if you are using the same layout for medium and large screens.
 
-<Canvas
-  of={Grid.ColumnsTablet}
-  story={{ inline: true }}
-/>
+<Canvas of={Grid.ColumnsTablet} story={{ inline: true }} />
 
 #### Columns desktop
 
 Use the `columns-desktop` property to define your layout for larger screens **(64em and 1024px and above)**.
 
-<Canvas
-  of={Grid.ColumnsDesktop}
-  story={{ inline: true }}
-/>
+<Canvas of={Grid.ColumnsDesktop} story={{ inline: true }} />
 
 ### Equal width column
 
@@ -52,22 +41,17 @@ Use the `columns-desktop` property to define your layout for larger screens **(6
 
 Opt out of setting the minimum and maximum width when you want to design equal-width columns without width restrictions. This will allow the grid and its columns to scale to the size of the viewport.
 
-<Canvas
-  of={Grid.EqualFlexbile}
-  story={{ inline: true }}
-/>
+<Canvas of={Grid.EqualFlexbile} story={{ inline: true }} />
 
 #### Setting a minimum und maximum width
 
 Set the minimum and maximum width to design equal-width columns with restrictions to limit how wide they will span on any screen size.
 
-<Canvas
-  of={Grid.EqualWidth}
-  story={{ inline: true }}
-/>
+<Canvas of={Grid.EqualWidth} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/Grid/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-header/stories/overview.mdx b/packages/web/src/components/gcds-header/stories/overview.mdx
index 621c5b92b..444d7a395 100644
--- a/packages/web/src/components/gcds-header/stories/overview.mdx
+++ b/packages/web/src/components/gcds-header/stories/overview.mdx
@@ -9,67 +9,45 @@ _Also called: global header, brand header._
 
 The header is the responsive Government of Canada branded header landmark.
 
-<Canvas
-  of={Header.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Header.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Default
 
-<Canvas
-  of={Header.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Header.Default} story={{ inline: true }} />
 
 ### Slots
 
 #### Skip-to-nav
 
-<Canvas
-  of={Header.SkipTo}
-  story={{ inline: true }}
-/>
+<Canvas of={Header.SkipTo} story={{ inline: true }} />
 
 #### Banner
 
-<Canvas
-  of={Header.Banner}
-  story={{ inline: true }}
-/>
+<Canvas of={Header.Banner} story={{ inline: true }} />
 
 #### Toggle
 
-<Canvas
-  of={Header.Toggle}
-  story={{ inline: true }}
-/>
+<Canvas of={Header.Toggle} story={{ inline: true }} />
 
 #### Menu
 
-<Canvas
-  of={Header.Menu}
-  story={{ inline: true }}
-/>
+<Canvas of={Header.Menu} story={{ inline: true }} />
 
 #### Breadcrumb
 
-<Canvas
-  of={Header.Breadcrumbs}
-  story={{ inline: true }}
-/>
+<Canvas of={Header.Breadcrumbs} story={{ inline: true }} />
 
 #### All slots
 
-<Canvas
-  of={Header.All}
-  story={{ inline: true }}
-/>
+<Canvas of={Header.All} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/header/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-heading/gcds-heading.css b/packages/web/src/components/gcds-heading/gcds-heading.css
new file mode 100644
index 000000000..a1d3cf948
--- /dev/null
+++ b/packages/web/src/components/gcds-heading/gcds-heading.css
@@ -0,0 +1,260 @@
+@layer reset,
+defaults,
+variants;
+
+@layer reset {
+  :host {
+    display: block;
+    color: var(--gcds-heading-default-text);
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      box-sizing: border-box;
+      margin: 0;
+    }
+
+    slot {
+      display: inherit;
+    }
+  }
+}
+
+@layer defaults {
+  :host {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      text-wrap: balance;
+    }
+
+    h1.gcds-heading {
+      font: var(--gcds-heading-h1-desktop);
+
+      @media only screen and (width < 48em) {
+        font: var(--gcds-heading-h1-mobile);
+      }
+
+      &:after {
+        content: '';
+        display: block;
+        width: var(--gcds-heading-h1-border-width);
+        margin-block-start: var(--gcds-heading-h1-border-margin);
+        height: var(--gcds-heading-h1-border-height);
+        background-color: var(--gcds-heading-h1-border-background);
+      }
+    }
+
+    h2.gcds-heading {
+      font: var(--gcds-heading-h2-desktop);
+
+      @media only screen and (width < 48em) {
+        font: var(--gcds-heading-h2-mobile);
+      }
+    }
+
+    h3.gcds-heading {
+      font: var(--gcds-heading-h3-desktop);
+
+      @media only screen and (width < 48em) {
+        font: var(--gcds-heading-h3-mobile);
+      }
+    }
+
+    h4.gcds-heading {
+      font: var(--gcds-heading-h4-desktop);
+
+      @media only screen and (width < 48em) {
+        font: var(--gcds-heading-h4-mobile);
+      }
+    }
+
+    h5.gcds-heading {
+      font: var(--gcds-heading-h5-desktop);
+
+      @media only screen and (width < 48em) {
+        font: var(--gcds-heading-h5-mobile);
+      }
+    }
+
+    h6.gcds-heading {
+      font: var(--gcds-heading-h6-desktop);
+
+      @media only screen and (width < 48em) {
+        font: var(--gcds-heading-h6-mobile);
+      }
+    }
+  }
+}
+
+@layer variants {
+  :host {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      /* Margin top */
+      &.mt-0 {
+        margin-block-start: var(--gcds-heading-spacing-0);
+      }
+
+      &.mt-50 {
+        margin-block-start: var(--gcds-heading-spacing-50);
+      }
+
+      &.mt-100 {
+        margin-block-start: var(--gcds-heading-spacing-100);
+      }
+
+      &.mt-150 {
+        margin-block-start: var(--gcds-heading-spacing-150);
+      }
+
+      &.mt-200 {
+        margin-block-start: var(--gcds-heading-spacing-200);
+      }
+
+      &.mt-250 {
+        margin-block-start: var(--gcds-heading-spacing-250);
+      }
+
+      &.mt-300 {
+        margin-block-start: var(--gcds-heading-spacing-300);
+      }
+
+      &.mt-400 {
+        margin-block-start: var(--gcds-heading-spacing-400);
+      }
+
+      &.mt-450 {
+        margin-block-start: var(--gcds-heading-spacing-450);
+      }
+
+      &.mt-500 {
+        margin-block-start: var(--gcds-heading-spacing-500);
+      }
+
+      &.mt-550 {
+        margin-block-start: var(--gcds-heading-spacing-550);
+      }
+
+      &.mt-600 {
+        margin-block-start: var(--gcds-heading-spacing-600);
+      }
+
+      &.mt-700 {
+        margin-block-start: var(--gcds-heading-spacing-700);
+      }
+
+      &.mt-800 {
+        margin-block-start: var(--gcds-heading-spacing-800);
+      }
+
+      &.mt-900 {
+        margin-block-start: var(--gcds-heading-spacing-900);
+      }
+
+      &.mt-1000 {
+        margin-block-start: var(--gcds-heading-spacing-1000);
+      }
+
+      /* Margin bottom */
+      &.mb-0 {
+        margin-block-end: var(--gcds-heading-spacing-0);
+      }
+
+      &.mb-50 {
+        margin-block-end: var(--gcds-heading-spacing-50);
+      }
+
+      &.mb-100 {
+        margin-block-end: var(--gcds-heading-spacing-100);
+      }
+
+      &.mb-150 {
+        margin-block-end: var(--gcds-heading-spacing-150);
+      }
+
+      &.mb-200 {
+        margin-block-end: var(--gcds-heading-spacing-200);
+      }
+
+      &.mb-250 {
+        margin-block-end: var(--gcds-heading-spacing-250);
+      }
+
+      &.mb-300 {
+        margin-block-end: var(--gcds-heading-spacing-300);
+      }
+
+      &.mb-400 {
+        margin-block-end: var(--gcds-heading-spacing-400);
+      }
+
+      &.mb-450 {
+        margin-block-end: var(--gcds-heading-spacing-450);
+      }
+
+      &.mb-500 {
+        margin-block-end: var(--gcds-heading-spacing-500);
+      }
+
+      &.mb-550 {
+        margin-block-end: var(--gcds-heading-spacing-550);
+      }
+
+      &.mb-600 {
+        margin-block-end: var(--gcds-heading-spacing-600);
+      }
+
+      &.mb-700 {
+        margin-block-end: var(--gcds-heading-spacing-700);
+      }
+
+      &.mb-800 {
+        margin-block-end: var(--gcds-heading-spacing-800);
+      }
+
+      &.mb-900 {
+        margin-block-end: var(--gcds-heading-spacing-900);
+      }
+
+      &.mb-1000 {
+        margin-block-end: var(--gcds-heading-spacing-1000);
+      }
+    }
+
+    /* Character limit */
+    h1.limit {
+      max-width: var(--gcds-heading-character-limit-h1);
+    }
+
+    h2.limit {
+      max-width: var(--gcds-heading-character-limit-h2);
+    }
+
+    h3.limit {
+      max-width: var(--gcds-heading-character-limit-h3);
+    }
+
+    h4.limit {
+      max-width: var(--gcds-heading-character-limit-h4);
+    }
+
+    h5.limit {
+      max-width: var(--gcds-heading-character-limit-h5);
+    }
+
+    h6.limit {
+      max-width: var(--gcds-heading-character-limit-h6);
+    }
+  }
+}
diff --git a/packages/web/src/components/gcds-heading/gcds-heading.tsx b/packages/web/src/components/gcds-heading/gcds-heading.tsx
new file mode 100644
index 000000000..0352d83ab
--- /dev/null
+++ b/packages/web/src/components/gcds-heading/gcds-heading.tsx
@@ -0,0 +1,161 @@
+import { Component, Element, Host, Watch, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'gcds-heading',
+  styleUrl: 'gcds-heading.css',
+  shadow: true,
+})
+export class GcdsHeading {
+  @Element() el: HTMLElement;
+
+  /**
+   * Props
+   */
+
+  /**
+   * Sets the appropriate HTML tag for the selected level.
+   */
+  @Prop({ mutable: true }) tag!: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+  @Watch('tag')
+  validateTag(newValue: string) {
+    const values = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+    if (!values.includes(newValue)) {
+      console.error('Not a valid tag.');
+    }
+  }
+
+  /**
+   * Sets the line length to a maximum amount of characters per line for
+   * each heading level, ensuring a comfortable, accessible reading length.
+   */
+  @Prop() characterLimit?: boolean = true;
+
+  /**
+   * Adds margin above the heading. The default margin-top for h1 is set to 0,
+   * while for h2 to h6 headings, it's 500.
+   */
+  @Prop({ mutable: true }) marginTop?:
+    | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000';
+
+  @Watch('marginTop')
+  validateMarginTop(newValue: string) {
+    const values = [
+      '0',
+      '50',
+      '100',
+      '150',
+      '200',
+      '250',
+      '300',
+      '400',
+      '450',
+      '500',
+      '550',
+      '600',
+      '700',
+      '800',
+      '900',
+      '1000',
+    ];
+
+    if (!this.marginTop || (this.marginTop && !values.includes(newValue))) {
+      if (this.tag !== 'h1') {
+        this.marginTop = '500';
+      } else {
+        this.marginTop = '0';
+      }
+    }
+  }
+
+  /**
+   * Adds margin below the heading. The default margin-botttom is 400.
+   */
+  @Prop({ mutable: true }) marginBottom?:
+    | '0'
+    | '50'
+    | '100'
+    | '150'
+    | '200'
+    | '250'
+    | '300'
+    | '400'
+    | '450'
+    | '500'
+    | '550'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '1000' = '400';
+
+  @Watch('marginBottom')
+  validateMarginBottom(newValue: string) {
+    const values = [
+      '0',
+      '50',
+      '100',
+      '150',
+      '200',
+      '250',
+      '300',
+      '400',
+      '450',
+      '500',
+      '550',
+      '600',
+      '700',
+      '800',
+      '900',
+      '1000',
+    ];
+
+    if (this.marginBottom && !values.includes(newValue)) {
+      this.marginBottom = '400';
+    }
+  }
+
+  componentWillLoad() {
+    // Validate attributes and set defaults
+    this.validateTag(this.tag);
+    this.validateMarginTop(this.marginTop);
+    this.validateMarginBottom(this.marginBottom);
+  }
+
+  render() {
+    const { characterLimit, marginTop, marginBottom, tag } = this;
+
+    const Tag = tag;
+
+    return (
+      <Host>
+        <Tag
+          class={`
+            gcds-heading
+            ${characterLimit ? 'limit' : ''}
+            ${marginTop ? `mt-${marginTop}` : ''}
+            ${marginBottom ? `mb-${marginBottom}` : ''}
+          `}
+        >
+          <slot />
+        </Tag>
+      </Host>
+    );
+  }
+}
diff --git a/packages/web/src/components/gcds-heading/readme.md b/packages/web/src/components/gcds-heading/readme.md
new file mode 100644
index 000000000..583d94a77
--- /dev/null
+++ b/packages/web/src/components/gcds-heading/readme.md
@@ -0,0 +1,20 @@
+# gcds-heading
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property           | Attribute         | Description                                                                                                                                | Type                                                                                                                                         | Default     |
+| ------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `characterLimit`   | `character-limit` | Sets the line length to a maximum amount of characters per line for each heading level, ensuring a comfortable, accessible reading length. | `boolean`                                                                                                                                    | `true`      |
+| `marginBottom`     | `margin-bottom`   | Adds margin below the heading. The default margin-botttom is 400.                                                                          | `"0" \| "100" \| "1000" \| "150" \| "200" \| "250" \| "300" \| "400" \| "450" \| "50" \| "500" \| "550" \| "600" \| "700" \| "800" \| "900"` | `'400'`     |
+| `marginTop`        | `margin-top`      | Adds margin above the heading. The default margin-top for h1 is set to 0, while for h2 to h6 headings, it's 500.                           | `"0" \| "100" \| "1000" \| "150" \| "200" \| "250" \| "300" \| "400" \| "450" \| "50" \| "500" \| "550" \| "600" \| "700" \| "800" \| "900"` | `undefined` |
+| `tag` _(required)_ | `tag`             | Sets the appropriate HTML tag for the selected level.                                                                                      | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`                                                                                               | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/web/src/components/gcds-heading/stories/gcds-heading.stories.tsx b/packages/web/src/components/gcds-heading/stories/gcds-heading.stories.tsx
new file mode 100644
index 000000000..66715fc78
--- /dev/null
+++ b/packages/web/src/components/gcds-heading/stories/gcds-heading.stories.tsx
@@ -0,0 +1,190 @@
+export default {
+  title: 'Components/Heading',
+
+  argTypes: {
+    // Props
+    tag: {
+      control: { type: 'select' },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+      type: {
+        required: true,
+      },
+    },
+    characterLimit: {
+      name: 'character-limit',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    marginTop: {
+      name: 'margin-top',
+      control: { type: 'select' },
+      options: [
+        '0',
+        '50',
+        '100',
+        '150',
+        '200',
+        '250',
+        '300',
+        '400',
+        '450',
+        '500',
+        '550',
+        '600',
+        '700',
+        '800',
+        '900',
+        '1000',
+      ],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'h1: 0, h2-h6: 500' },
+      },
+    },
+    marginBottom: {
+      name: 'margin-bottom',
+      control: { type: 'select' },
+      options: [
+        '0',
+        '50',
+        '100',
+        '150',
+        '200',
+        '250',
+        '300',
+        '400',
+        '450',
+        '500',
+        '550',
+        '600',
+        '700',
+        '800',
+        '900',
+        '1000',
+      ],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '400' },
+      },
+    },
+
+    // Slots
+    default: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots | Fentes',
+      },
+    },
+  },
+};
+
+const Template = args =>
+  `
+<!-- Web component code (Angular, Vue) -->
+<gcds-heading tag="${args.tag}" ${
+    !args.characterLimit ? `character-limit="${args.characterLimit}"` : null
+  } ${args.marginTop ? `margin-top="${args.marginTop}"` : null} ${
+    args.marginBottom ? `margin-bottom="${args.marginBottom}"` : null
+  }>
+  ${args.default}
+</gcds-heading>
+
+<!-- React code -->
+<GcdsHeading tag="${args.tag}" ${
+    !args.characterLimit ? `characterLimit="${args.characterLimit}"` : null
+  } ${args.marginTop ? `marginTop="${args.marginTop}"` : null} ${
+    args.marginBottom ? `marginBottom="${args.marginBottom}"` : null
+  }>
+  ${args.default}
+</GcdsHeading>
+`.replace(/ null/g, '');
+
+const TemplatePlayground = args => `
+<gcds-heading
+  tag="${args.tag}"
+  ${args.marginTop ? `margin-top="${args.marginTop}"` : null}
+  ${args.marginBottom ? `margin-bottom="${args.marginBottom}"` : null}
+>
+  ${args.default}
+</gcds-heading>
+`;
+
+// ------ Heading default ------
+
+export const Default = Template.bind({});
+Default.args = {
+  tag: 'h2',
+  characterLimit: true,
+  default: 'Heading',
+};
+
+// ------ Heading level ------
+
+export const LevelH1 = Template.bind({});
+LevelH1.args = {
+  tag: 'h1',
+  characterLimit: true,
+  default: 'Heading level 1',
+};
+
+export const LevelH2 = Template.bind({});
+LevelH2.args = {
+  tag: 'h2',
+  characterLimit: true,
+  default: 'Heading level 2',
+};
+
+export const LevelH3 = Template.bind({});
+LevelH3.args = {
+  tag: 'h3',
+  characterLimit: true,
+  default: 'Heading level 3',
+};
+
+export const LevelH4 = Template.bind({});
+LevelH4.args = {
+  tag: 'h4',
+  characterLimit: true,
+  default: 'Heading level 4',
+};
+
+export const LevelH5 = Template.bind({});
+LevelH5.args = {
+  tag: 'h5',
+  characterLimit: true,
+  default: 'Heading level 5',
+};
+
+export const LevelH6 = Template.bind({});
+LevelH6.args = {
+  tag: 'h6',
+  characterLimit: true,
+  default: 'Heading level 6',
+};
+
+// ------ Heading events & props ------
+
+export const Props = Template.bind({});
+Props.args = {
+  tag: 'h2',
+  characterLimit: true,
+  default: 'Heading',
+};
+
+// ------ Heading playground ------
+
+export const Playground = TemplatePlayground.bind({});
+Playground.args = {
+  tag: 'h2',
+  characterLimit: true,
+  default: 'Heading',
+};
diff --git a/packages/web/src/components/gcds-heading/stories/overview.mdx b/packages/web/src/components/gcds-heading/stories/overview.mdx
new file mode 100644
index 000000000..a62c9109c
--- /dev/null
+++ b/packages/web/src/components/gcds-heading/stories/overview.mdx
@@ -0,0 +1,57 @@
+import { Meta, Canvas, Story } from '@storybook/blocks';
+import * as Heading from './gcds-heading.stories';
+
+<Meta of={Heading} name="Overview" />
+
+# Heading<br/>`<gcds-heading>`
+
+_Also called: title, section heading, subheading._
+
+A title that structures content by creating levels of hierarchy that organize page content visually and mentally, using GCDS styles.
+
+<Canvas of={Heading.Default} story={{ inline: true }} />
+
+## Examples
+
+<br />
+
+### Tag
+
+#### Level H1
+
+<Canvas of={Heading.LevelH1} story={{ inline: true }} />
+
+#### Level H2
+
+<Canvas of={Heading.LevelH2} story={{ inline: true }} />
+
+#### Level H3
+
+<Canvas of={Heading.LevelH3} story={{ inline: true }} />
+
+#### Level H4
+
+<Canvas of={Heading.LevelH4} story={{ inline: true }} />
+
+#### Level H5
+
+<Canvas of={Heading.LevelH5} story={{ inline: true }} />
+
+#### Level H6
+
+<Canvas of={Heading.LevelH6} story={{ inline: true }} />
+
+## Resources
+
+{/* prettier-ignore */}
+<ul>
+  <li>
+    <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/heading/" target="_blank">Guidance</gcds-button>
+  </li>
+  <li>
+    <gcds-button type="link" button-style="text-only" href="https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-heading" target="_blank">Github</gcds-button>
+  </li>
+  <li>
+    <gcds-button type="link" button-style="text-only" href="https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/Canadian-Digital-Service%E2%80%A8---GC-Design-System?type=design&node-id=9439-44&mode=design&t=b56h1sxHtt4GJZod-0" target="_blank">Figma</gcds-button>
+  </li>
+</ul>
diff --git a/packages/web/src/components/gcds-heading/stories/properties.mdx b/packages/web/src/components/gcds-heading/stories/properties.mdx
new file mode 100644
index 000000000..ca7bb5aed
--- /dev/null
+++ b/packages/web/src/components/gcds-heading/stories/properties.mdx
@@ -0,0 +1,15 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as Heading from './gcds-heading.stories';
+
+<Meta of={Heading} name="Events & properties" />
+
+{!(new URLSearchParams(window.location.search)).get('demo') && <h1>Events & properties</h1>}
+
+<Canvas
+  of={Heading.Props}
+  story={{ inline: true }}
+  sourceState="shown"
+  type="dynamic"
+/>
+
+<Controls of={Heading.Props} sort="requiredFirst" />
diff --git a/packages/web/src/components/gcds-heading/test/gcds-heading.e2e.ts b/packages/web/src/components/gcds-heading/test/gcds-heading.e2e.ts
new file mode 100644
index 000000000..fa9f3b3aa
--- /dev/null
+++ b/packages/web/src/components/gcds-heading/test/gcds-heading.e2e.ts
@@ -0,0 +1,38 @@
+import { newE2EPage } from '@stencil/core/testing';
+const { AxePuppeteer } = require('@axe-core/puppeteer');
+
+describe('gcds-heading', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      '<gcds-heading tag="h2">Heading level 2</gcds-heading>',
+    );
+
+    const element = await page.find('gcds-heading');
+    expect(element).toHaveClass('hydrated');
+  });
+});
+
+/**
+ * Accessibility tests
+ * Axe-core rules: https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md#wcag-21-level-a--aa-rules
+ */
+
+describe('gcds-heading a11y tests', () => {
+  /**
+   * Colour contrast test
+   */
+  it('colour contrast', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <gcds-heading tag="h2">Heading level 2</gcds-heading>
+    `);
+
+    const colorContrastTest = new AxePuppeteer(page)
+      .withRules('color-contrast')
+      .analyze();
+    const results = await colorContrastTest;
+
+    expect(results.violations.length).toBe(0);
+  });
+});
diff --git a/packages/web/src/components/gcds-heading/test/gcds-heading.spec.ts b/packages/web/src/components/gcds-heading/test/gcds-heading.spec.ts
new file mode 100644
index 000000000..784ddba6a
--- /dev/null
+++ b/packages/web/src/components/gcds-heading/test/gcds-heading.spec.ts
@@ -0,0 +1,257 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { GcdsHeading } from '../gcds-heading';
+
+describe('gcds-heading', () => {
+  it('renders heading level 1', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h1">Heading level 1</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h1">
+        <mock:shadow-root>
+          <h1 class="gcds-heading limit mt-0 mb-400">
+            <slot></slot>
+          </h1>
+        </mock:shadow-root>
+        Heading level 1
+      </gcds-heading>
+    `);
+  });
+
+  it('renders heading level 2', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h2">Heading level 2</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h2">
+        <mock:shadow-root>
+          <h2 class="gcds-heading limit mt-500 mb-400">
+            <slot></slot>
+          </h2>
+        </mock:shadow-root>
+        Heading level 2
+      </gcds-heading>
+    `);
+  });
+
+  it('renders heading level 3', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h3">Heading level 3</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h3">
+        <mock:shadow-root>
+          <h3 class="gcds-heading limit mt-500 mb-400">
+            <slot></slot>
+          </h3>
+        </mock:shadow-root>
+        Heading level 3
+      </gcds-heading>
+    `);
+  });
+
+  it('renders heading level 4', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h4">Heading level 4</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h4">
+        <mock:shadow-root>
+          <h4 class="gcds-heading limit mt-500 mb-400">
+            <slot></slot>
+          </h4>
+        </mock:shadow-root>
+        Heading level 4
+      </gcds-heading>
+    `);
+  });
+
+  it('renders heading level 5', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h5">Heading level 5</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h5">
+        <mock:shadow-root>
+          <h5 class="gcds-heading limit mt-500 mb-400">
+            <slot></slot>
+          </h5>
+        </mock:shadow-root>
+        Heading level 5
+      </gcds-heading>
+    `);
+  });
+
+  it('renders heading level 6', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h6">Heading level 6</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h6">
+        <mock:shadow-root>
+          <h6 class="gcds-heading limit mt-500 mb-400">
+            <slot></slot>
+          </h6>
+        </mock:shadow-root>
+        Heading level 6
+      </gcds-heading>
+    `);
+  });
+
+  /**
+   * Spacing tests
+   */
+  it('renders margin top', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h2" margin-top="400">Margin top</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h2" margin-top="400">
+        <mock:shadow-root>
+          <h2 class="gcds-heading limit mt-400 mb-400">
+            <slot></slot>
+          </h2>
+        </mock:shadow-root>
+        Margin top
+      </gcds-heading>
+    `);
+  });
+
+  it('renders default margin top if incorrect value is passed', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h2" margin-top="22">Margin top</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h2" margin-top="22">
+        <mock:shadow-root>
+          <h2 class="gcds-heading limit mt-500 mb-400">
+            <slot></slot>
+          </h2>
+        </mock:shadow-root>
+        Margin top
+      </gcds-heading>
+    `);
+  });
+
+  it('renders default margin top for h1 if incorrect value is passed', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h1" margin-top="22">Margin top</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h1" margin-top="22">
+        <mock:shadow-root>
+          <h1 class="gcds-heading limit mt-0 mb-400">
+            <slot></slot>
+          </h1>
+        </mock:shadow-root>
+        Margin top
+      </gcds-heading>
+    `);
+  });
+
+  it('renders margin bottom', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h2" margin-bottom="200">Margin bottom</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h2" margin-bottom="200">
+        <mock:shadow-root>
+          <h2 class="gcds-heading limit mt-500 mb-200">
+            <slot></slot>
+          </h2>
+        </mock:shadow-root>
+        Margin bottom
+      </gcds-heading>
+    `);
+  });
+
+  it('renders default margin bottom if incorrect value is passed', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h2" margin-bottom="22">Margin bottom</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h2" margin-bottom="22">
+        <mock:shadow-root>
+          <h2 class="gcds-heading limit mt-500 mb-400">
+            <slot></slot>
+          </h2>
+        </mock:shadow-root>
+        Margin bottom
+      </gcds-heading>
+    `);
+  });
+
+  /**
+   * Character limits
+   */
+  it('renders heading with character limits', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h2">Character limits</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h2">
+        <mock:shadow-root>
+          <h2 class="gcds-heading limit mt-500 mb-400">
+            <slot></slot>
+          </h2>
+        </mock:shadow-root>
+        Character limits
+      </gcds-heading>
+    `);
+  });
+
+  it('renders heading without character limits', async () => {
+    const { root } = await newSpecPage({
+      components: [GcdsHeading],
+      html: `
+        <gcds-heading tag="h2" character-limit="false">No character limits</gcds-heading>
+      `,
+    });
+    expect(root).toEqualHtml(`
+      <gcds-heading tag="h2" character-limit="false">
+        <mock:shadow-root>
+          <h2 class="gcds-heading mt-500 mb-400">
+            <slot></slot>
+          </h2>
+        </mock:shadow-root>
+        No character limits
+      </gcds-heading>
+    `);
+  });
+});
diff --git a/packages/web/src/components/gcds-icon/stories/overview.mdx b/packages/web/src/components/gcds-icon/stories/overview.mdx
index 98ff394ea..046f8203e 100644
--- a/packages/web/src/components/gcds-icon/stories/overview.mdx
+++ b/packages/web/src/components/gcds-icon/stories/overview.mdx
@@ -9,64 +9,45 @@ _Also called: glyphs, graphic, symbol._
 
 Icons are a visual cue to help users understand the context.
 
-<Canvas
-  of={Icon.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Icon.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Name
 
 Our icon component uses Font Awesome icons. You can find an overview of all available icons on <gcds-button type="link" button-style="text-only" href="https://fontawesome.com/v5/search?p=6&o=r&m=free" target="_blank">fontawesome.com</gcds-button>.
 
-<Canvas
-  of={Icon.Name}
-  story={{ inline: true }}
-/>
+<Canvas of={Icon.Name} story={{ inline: true }} />
 
 ### Size
 
-<Canvas
-  of={Icon.Sizes}
-  story={{ inline: true }}
-/>
+<Canvas of={Icon.Sizes} story={{ inline: true }} />
 
 ### Margin
 
 #### Margin left
 
-<Canvas
-  of={Icon.MarginLeft}
-  story={{ inline: true }}
-/>
+<Canvas of={Icon.MarginLeft} story={{ inline: true }} />
 
 #### Margin right
 
-<Canvas
-  of={Icon.MarginRight}
-  story={{ inline: true }}
-/>
+<Canvas of={Icon.MarginRight} story={{ inline: true }} />
 
 ### Fixed width vs variable width
 
-<Canvas
-  of={Icon.Width}
-  story={{ inline: true }}
-/>
+<Canvas of={Icon.Width} story={{ inline: true }} />
 
 ### Label
 
 If you are using an icon by itself, use the `label` to ensure that it has the proper screen reader text attached to it in these cases.
 
-<Canvas
-  of={Icon.Label}
-  story={{ inline: true }}
-/>
+<Canvas of={Icon.Label} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/icon/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-input/stories/overview.mdx b/packages/web/src/components/gcds-input/stories/overview.mdx
index ff69cfd9f..4d7dc96a8 100644
--- a/packages/web/src/components/gcds-input/stories/overview.mdx
+++ b/packages/web/src/components/gcds-input/stories/overview.mdx
@@ -9,91 +9,59 @@ _Also called: text input, input field._
 
 An input is a space to enter short-form information in response to a question or instruction.
 
-<Canvas
-  of={Input.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={Input.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Default} story={{ inline: true }} />
 
 #### Required
 
-<Canvas
-  of={Input.Required}
-  story={{ inline: true }}
-/>
-
+<Canvas of={Input.Required} story={{ inline: true }} />
 
 #### Error
 
-<Canvas
-  of={Input.Error}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Error} story={{ inline: true }} />
 
 #### Disabled
 
-<Canvas
-  of={Input.Disabled}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Disabled} story={{ inline: true }} />
 
 ### Type
 
 #### Email
 
-<Canvas
-  of={Input.Email}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Email} story={{ inline: true }} />
 
 #### Number
 
-<Canvas
-  of={Input.Number}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Number} story={{ inline: true }} />
 
 #### Password
 
-<Canvas
-  of={Input.Password}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Password} story={{ inline: true }} />
 
 #### Search
 
-<Canvas
-  of={Input.Search}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Search} story={{ inline: true }} />
 
 #### Text
 
-<Canvas
-  of={Input.Text}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Text} story={{ inline: true }} />
 
 #### Url
 
-<Canvas
-  of={Input.Url}
-  story={{ inline: true }}
-/>
+<Canvas of={Input.Url} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/Input/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx b/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx
index d31fbe3b4..c1af9aefe 100644
--- a/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx
+++ b/packages/web/src/components/gcds-lang-toggle/stories/overview.mdx
@@ -9,32 +9,25 @@ _Also called: language switch, language selector._
 
 The language toggle is a link to the same content in the other Official Language.
 
-<Canvas
-  of={LangToggle.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={LangToggle.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Language
 
 #### English
 
-<Canvas
-  of={LangToggle.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={LangToggle.Default} story={{ inline: true }} />
 
 #### French
 
-<Canvas
-  of={LangToggle.French}
-  story={{ inline: true }}
-/>
+<Canvas of={LangToggle.French} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/language-toggle/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-nav-group/stories/overview.mdx b/packages/web/src/components/gcds-nav-group/stories/overview.mdx
index a2577ca9b..49b92009f 100644
--- a/packages/web/src/components/gcds-nav-group/stories/overview.mdx
+++ b/packages/web/src/components/gcds-nav-group/stories/overview.mdx
@@ -5,55 +5,39 @@ import * as NavGroup from './gcds-nav-group.stories';
 
 # NavGroup<br/>`<gcds-nav-group>`
 
-<Canvas
-  of={NavGroup.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={NavGroup.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={NavGroup.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={NavGroup.Default} story={{ inline: true }} />
 
 #### Open
 
-<Canvas
-  of={NavGroup.Open}
-  story={{ inline: true }}
-/>
+<Canvas of={NavGroup.Open} story={{ inline: true }} />
 
 ### Labels
 
 #### Open / close triggers
 
-<Canvas
-  of={NavGroup.Triggers}
-  story={{ inline: true }}
-/>
+<Canvas of={NavGroup.Triggers} story={{ inline: true }} />
 
 #### Menu
 
-<Canvas
-  of={NavGroup.Menu}
-  story={{ inline: true }}
-/>
+<Canvas of={NavGroup.Menu} story={{ inline: true }} />
 
 ### In top navigation
 
-<Canvas
-  of={NavGroup.TopNav}
-  story={{ inline: true, height: '20rem' }}
-/>
+<Canvas of={NavGroup.TopNav} story={{ inline: true, height: '20rem' }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-nav-group" target="_blank">Github</gcds-button>
diff --git a/packages/web/src/components/gcds-nav-link/stories/overview.mdx b/packages/web/src/components/gcds-nav-link/stories/overview.mdx
index b1c4f1462..323a3df5e 100644
--- a/packages/web/src/components/gcds-nav-link/stories/overview.mdx
+++ b/packages/web/src/components/gcds-nav-link/stories/overview.mdx
@@ -5,48 +5,35 @@ import * as NavLink from './gcds-nav-link.stories';
 
 # NavLink<br/>`<gcds-nav-link>`
 
-<Canvas
-  of={NavLink.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={NavLink.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={NavLink.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={NavLink.Default} story={{ inline: true }} />
 
 #### Current
 
-<Canvas
-  of={NavLink.Current}
-  story={{ inline: true }}
-/>
+<Canvas of={NavLink.Current} story={{ inline: true }} />
 
 ### In top navigation
 
 #### Default
 
-<Canvas
-  of={NavLink.DefaultTopNav}
-  story={{ inline: true }}
-/>
+<Canvas of={NavLink.DefaultTopNav} story={{ inline: true }} />
 
 #### Current
 
-<Canvas
-  of={NavLink.CurrentTopNav}
-  story={{ inline: true }}
-/>
+<Canvas of={NavLink.CurrentTopNav} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-nav-link" target="_blank">Github</gcds-button>
diff --git a/packages/web/src/components/gcds-pagination/stories/overview.mdx b/packages/web/src/components/gcds-pagination/stories/overview.mdx
index 4291dce9e..9d8db3355 100644
--- a/packages/web/src/components/gcds-pagination/stories/overview.mdx
+++ b/packages/web/src/components/gcds-pagination/stories/overview.mdx
@@ -9,13 +9,11 @@ _Also called: page index, page navigation._
 
 Pagination is a division of content into multiple linked pages.
 
-<Canvas
-  of={Pagination.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Pagination.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Display
 
@@ -23,52 +21,35 @@ Pagination is a division of content into multiple linked pages.
 
 #### Simple
 
-<Canvas
-  of={Pagination.SimpleEn}
-  story={{ inline: true }}
-/>
+<Canvas of={Pagination.SimpleEn} story={{ inline: true }} />
 
 #### List
 
-<Canvas
-  of={Pagination.ListEn}
-  story={{ inline: true }}
-/>
+<Canvas of={Pagination.ListEn} story={{ inline: true }} />
 
 #### French
 
 ##### Simple
 
-<Canvas
-  of={Pagination.SimpleFr}
-  story={{ inline: true }}
-/>
+<Canvas of={Pagination.SimpleFr} story={{ inline: true }} />
 
 ##### List
 
-<Canvas
-  of={Pagination.ListFr}
-  story={{ inline: true }}
-/>
+<Canvas of={Pagination.ListFr} story={{ inline: true }} />
 
 ## Url object
 
 ### ::offset
 
-<Canvas
-  of={Pagination.UrlOffset}
-  story={{ inline: true }}
-/>
+<Canvas of={Pagination.UrlOffset} story={{ inline: true }} />
 
 ### ::match
 
-<Canvas
-  of={Pagination.UrlMatch}
-  story={{ inline: true }}
-/>
+<Canvas of={Pagination.UrlMatch} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/pagination/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-radio/stories/overview.mdx b/packages/web/src/components/gcds-radio/stories/overview.mdx
index 501fc2bd3..ef8cf9925 100644
--- a/packages/web/src/components/gcds-radio/stories/overview.mdx
+++ b/packages/web/src/components/gcds-radio/stories/overview.mdx
@@ -9,46 +9,33 @@ _Also called: radio button, radio group._
 
 A radio is a set of options for a single selection.
 
-<Canvas
-  of={Radio.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Radio.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={Radio.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Radio.Default} story={{ inline: true }} />
 
 #### Disabled
 
-<Canvas
-  of={Radio.Disabled}
-  story={{ inline: true }}
-/>
+<Canvas of={Radio.Disabled} story={{ inline: true }} />
 
 #### Checked
 
-<Canvas
-  of={Radio.Checked}
-  story={{ inline: true }}
-/>
+<Canvas of={Radio.Checked} story={{ inline: true }} />
 
 #### Error (with fieldset)
 
-<Canvas
-  of={Radio.Error}
-  story={{ inline: true }}
-/>
+<Canvas of={Radio.Error} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/checkbox/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-search/stories/overview.mdx b/packages/web/src/components/gcds-search/stories/overview.mdx
index d21a02cc7..a560e537c 100644
--- a/packages/web/src/components/gcds-search/stories/overview.mdx
+++ b/packages/web/src/components/gcds-search/stories/overview.mdx
@@ -9,39 +9,29 @@ _Also called: search box._
 
 Search is a way to enter keywords to find relevant information.
 
-<Canvas
-  of={Search.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Search.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Default
 
 #### English
 
-<Canvas
-  of={Search.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Search.Default} story={{ inline: true }} />
 
 #### French
 
-<Canvas
-  of={Search.French}
-  story={{ inline: true }}
-/>
+<Canvas of={Search.French} story={{ inline: true }} />
 
 ### Custom
 
-<Canvas
-  of={Search.Custom}
-  story={{ inline: true }}
-/>
+<Canvas of={Search.Custom} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/search/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-select/stories/overview.mdx b/packages/web/src/components/gcds-select/stories/overview.mdx
index 6bfffefdb..042271ec2 100644
--- a/packages/web/src/components/gcds-select/stories/overview.mdx
+++ b/packages/web/src/components/gcds-select/stories/overview.mdx
@@ -9,63 +9,43 @@ _Also called: dropdown, select menu._
 
 A list of options with a single-option choice.
 
-<Canvas
-  of={Select.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Select.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={Select.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Select.Default} story={{ inline: true }} />
 
 #### Required
 
-<Canvas
-  of={Select.Required}
-  story={{ inline: true }}
-/>
-
+<Canvas of={Select.Required} story={{ inline: true }} />
 
 #### Error
 
-<Canvas
-  of={Select.Error}
-  story={{ inline: true }}
-/>
+<Canvas of={Select.Error} story={{ inline: true }} />
 
 #### Disabled
 
-<Canvas
-  of={Select.Disabled}
-  story={{ inline: true }}
-/>
+<Canvas of={Select.Disabled} story={{ inline: true }} />
 
 ### Default value
 
 #### Select with default value
 
-<Canvas
-  of={Select.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Select.Default} story={{ inline: true }} />
 
 #### Select without default value
 
-<Canvas
-  of={Select.WithoutDefaultValue}
-  story={{ inline: true }}
-/>
+<Canvas of={Select.WithoutDefaultValue} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/select/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-side-nav/stories/overview.mdx b/packages/web/src/components/gcds-side-nav/stories/overview.mdx
index 0a3e75b30..76c932ec6 100644
--- a/packages/web/src/components/gcds-side-nav/stories/overview.mdx
+++ b/packages/web/src/components/gcds-side-nav/stories/overview.mdx
@@ -9,23 +9,19 @@ _Also called: sidebar menu, lefhand nav, vertical navigation._
 
 A side navigation is a vertical list of page links on the left side of the screen.
 
-<Canvas
-  of={SideNav.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={SideNav.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Label
 
-<Canvas
-  of={SideNav.Label}
-  story={{ inline: true }}
-/>
+<Canvas of={SideNav.Label} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/side-navigation/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-signature/stories/overview.mdx b/packages/web/src/components/gcds-signature/stories/overview.mdx
index fa90fffdc..1a42d0911 100644
--- a/packages/web/src/components/gcds-signature/stories/overview.mdx
+++ b/packages/web/src/components/gcds-signature/stories/overview.mdx
@@ -9,103 +9,78 @@ _Also called: wordmark._
 
 The signature is the Government of Canada landmark identifier found in the header or footer.
 
-<Canvas
-  of={Signature.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Type property
 
 #### Signature Type
 
-<Canvas
-  of={Signature.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.Default} story={{ inline: true }} />
 
 #### Wordmark Type
 
-<Canvas
-  of={Signature.Wordmark}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.Wordmark} story={{ inline: true }} />
 
 ### Language
 
 #### English Signature
 
-<Canvas
-  of={Signature.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.Default} story={{ inline: true }} />
 
 #### French Signature
 
-<Canvas
-  of={Signature.SignatureFrench}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.SignatureFrench} story={{ inline: true }} />
 
 #### English Wordmark
 
-<Canvas
-  of={Signature.Wordmark}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.Wordmark} story={{ inline: true }} />
 
 #### French Wordmark
 
-<Canvas
-  of={Signature.WordmarkFrench}
-  story={{ inline: true }}
-/>
-
+<Canvas of={Signature.WordmarkFrench} story={{ inline: true }} />
 
 ### hasLink property
 
 #### hasLink = false
 
-<Canvas
-  of={Signature.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.Default} story={{ inline: true }} />
 
 #### hasLink = true
 
-<Canvas
-  of={Signature.HasLinkTrue}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.HasLinkTrue} story={{ inline: true }} />
 
 ### Colour variants
 
 #### Signature variant = colour
 
-<Canvas
-  of={Signature.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.Default} story={{ inline: true }} />
 
 #### Wordmark variant = colour
 
-<Canvas
-  of={Signature.Wordmark}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.Wordmark} story={{ inline: true }} />
 
 #### Signature variant = white
 
-<Canvas
-  of={Signature.SignatureWhite}
-  story={{ inline: true }}
-/>
+<Canvas of={Signature.SignatureWhite} story={{ inline: true }} />
 
 #### Wordmark variant = white
 
-<Canvas
-  of={Signature.WordmarkWhite}
-  story={{ inline: true }}
-/>
\ No newline at end of file
+<Canvas of={Signature.WordmarkWhite} story={{ inline: true }} />
+## Resources
+
+{/* prettier-ignore */}
+<ul>
+  <li>
+    <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/signature/" target="_blank">Guidance</gcds-button>
+  </li>
+  <li>
+    <gcds-button type="link" button-style="text-only" href="https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-signature" target="_blank">Github</gcds-button>
+  </li>
+  <li>
+    <gcds-button type="link" button-style="text-only" href="https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/Canadian-Digital-Service%E2%80%A8---GC-Design-System?type=design&node-id=7771-7118&mode=design&t=lYDNYJSN4d6Pq2wh-0" target="_blank">Figma</gcds-button>
+  </li>
+</ul>
diff --git a/packages/web/src/components/gcds-stepper/stories/overview.mdx b/packages/web/src/components/gcds-stepper/stories/overview.mdx
index 010b5afd7..5f20bfcea 100644
--- a/packages/web/src/components/gcds-stepper/stories/overview.mdx
+++ b/packages/web/src/components/gcds-stepper/stories/overview.mdx
@@ -9,32 +9,25 @@ _Also called: progress indicator, steps._
 
 A stepper is a progress tracker for a multi-step process.
 
-<Canvas
-  of={Stepper.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Stepper.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Language
 
 #### English
 
-<Canvas
-  of={Stepper.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Stepper.Default} story={{ inline: true }} />
 
 #### French
 
-<Canvas
-  of={Stepper.French}
-  story={{ inline: true }}
-/>
+<Canvas of={Stepper.French} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/stepper/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-textarea/stories/overview.mdx b/packages/web/src/components/gcds-textarea/stories/overview.mdx
index 702e6976b..6d2fb7c02 100644
--- a/packages/web/src/components/gcds-textarea/stories/overview.mdx
+++ b/packages/web/src/components/gcds-textarea/stories/overview.mdx
@@ -9,61 +9,41 @@ _Also called: text box._
 
 A text area is a space to enter long-form information in response to a question or instruction.
 
-<Canvas
-  of={Textarea.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Textarea.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### State
 
 #### Default
 
-<Canvas
-  of={Textarea.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={Textarea.Default} story={{ inline: true }} />
 
 #### Required
 
-<Canvas
-  of={Textarea.Required}
-  story={{ inline: true }}
-/>
-
+<Canvas of={Textarea.Required} story={{ inline: true }} />
 
 #### Error
 
-<Canvas
-  of={Textarea.Error}
-  story={{ inline: true }}
-/>
+<Canvas of={Textarea.Error} story={{ inline: true }} />
 
 #### Disabled
 
-<Canvas
-  of={Textarea.Disabled}
-  story={{ inline: true }}
-/>
+<Canvas of={Textarea.Disabled} story={{ inline: true }} />
 
 ### Character count
 
-<Canvas
-  of={Textarea.Character}
-  story={{ inline: true }}
-/>
+<Canvas of={Textarea.Character} story={{ inline: true }} />
 
 ### Rows
 
-<Canvas
-  of={Textarea.Rows}
-  story={{ inline: true }}
-/>
+<Canvas of={Textarea.Rows} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/textarea/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-top-nav/stories/overview.mdx b/packages/web/src/components/gcds-top-nav/stories/overview.mdx
index 3c31f8180..361c2df5d 100644
--- a/packages/web/src/components/gcds-top-nav/stories/overview.mdx
+++ b/packages/web/src/components/gcds-top-nav/stories/overview.mdx
@@ -9,48 +9,35 @@ _Also called: site menu, navigation, navbar._
 
 A top navigation is a horizontal list of page links.
 
-<Canvas
-  of={TopNav.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={TopNav.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Alignment
 
 #### Right
 
-<Canvas
-  of={TopNav.Right}
-  story={{ inline: true }}
-/>
+<Canvas of={TopNav.Right} story={{ inline: true }} />
 
 #### Center
 
-<Canvas
-  of={TopNav.Center}
-  story={{ inline: true }}
-/>
+<Canvas of={TopNav.Center} story={{ inline: true }} />
 
 #### Left
 
-<Canvas
-  of={TopNav.Left}
-  story={{ inline: true }}
-/>
+<Canvas of={TopNav.Left} story={{ inline: true }} />
 
 ### Slots
 
 #### Home
 
-<Canvas
-  of={TopNav.Home}
-  story={{ inline: true }}
-/>
+<Canvas of={TopNav.Home} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/top-navigation/" target="_blank">Guidance</gcds-button>
diff --git a/packages/web/src/components/gcds-topic-menu/stories/overview.mdx b/packages/web/src/components/gcds-topic-menu/stories/overview.mdx
index 58ebee9e6..c15a7184e 100644
--- a/packages/web/src/components/gcds-topic-menu/stories/overview.mdx
+++ b/packages/web/src/components/gcds-topic-menu/stories/overview.mdx
@@ -7,45 +7,35 @@ import * as TopicMenu from './gcds-topic-menu.stories';
 
 Navigate to the top tasks from all Government of Canada websites.
 
-<Canvas
-  of={TopicMenu.English}
-  story={{ height: "60rem", inline: false }}
-/>
+<Canvas of={TopicMenu.English} story={{ height: '60rem', inline: false }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Default
 
 #### English
 
-<Canvas
-  of={TopicMenu.English}
-  story={{ height: "60rem", inline: false }}
-/>
+<Canvas of={TopicMenu.English} story={{ height: '60rem', inline: false }} />
 
 #### French
 
-<Canvas
-  of={TopicMenu.French}
-  story={{ height: "60rem", inline: false }}
-/>
+<Canvas of={TopicMenu.French} story={{ height: '60rem', inline: false }} />
 
 ### Home page
 
-<Canvas
-  of={TopicMenu.Home}
-  story={{ height: "60rem", inline: false }}
-/>
+<Canvas of={TopicMenu.Home} story={{ height: '60rem', inline: false }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://design-system.alpha.canada.ca/en/components/theme-and-topic-menu/" target="_blank">Guidance</gcds-button>
   </li>
   <li>
-    <gcds-button type="link" button-style="text-only" href="https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-topic-men" target="_blank">Github</gcds-button>
+    <gcds-button type="link" button-style="text-only" href="https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-topic-menu" target="_blank">Github</gcds-button>
   </li>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://www.figma.com/file/mh2maMG2NBtk41k1O1UGHV/Canadian-Digital-Service%E2%80%A8---GC-Design-System?type=design&node-id=7301-1409&mode=design&t=QC9vPhyviCSe8v0s-0" target="_blank">Figma</gcds-button>
diff --git a/packages/web/src/components/gcds-verify-banner/stories/overview.mdx b/packages/web/src/components/gcds-verify-banner/stories/overview.mdx
index 03464d800..4fe37d7d6 100644
--- a/packages/web/src/components/gcds-verify-banner/stories/overview.mdx
+++ b/packages/web/src/components/gcds-verify-banner/stories/overview.mdx
@@ -5,76 +5,51 @@ import * as VerifyBanner from './gcds-verify-banner.stories';
 
 # VerifyBanner<br/>`<gcds-verify-banner>`
 
-<Canvas
-  of={VerifyBanner.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.Default} story={{ inline: true }} />
 
 ## Examples
-<br/>
+
+<br />
 
 ### Language
 
 #### English
 
-<Canvas
-  of={VerifyBanner.Default}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.Default} story={{ inline: true }} />
 
 #### French
 
-<Canvas
-  of={VerifyBanner.French}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.French} story={{ inline: true }} />
 
 ### Container sizes
 
 #### Size: full
 
-<Canvas
-  of={VerifyBanner.Full}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.Full} story={{ inline: true }} />
 
 #### Size: xl
 
-<Canvas
-  of={VerifyBanner.Xl}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.Xl} story={{ inline: true }} />
 
 #### Size: lg
 
-<Canvas
-  of={VerifyBanner.Lg}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.Lg} story={{ inline: true }} />
 
 #### Size: md
 
-<Canvas
-  of={VerifyBanner.Md}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.Md} story={{ inline: true }} />
 
 #### Size: sm
 
-<Canvas
-  of={VerifyBanner.Sm}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.Sm} story={{ inline: true }} />
 
 #### Size: xs
 
-<Canvas
-  of={VerifyBanner.Xs}
-  story={{ inline: true }}
-/>
+<Canvas of={VerifyBanner.Xs} story={{ inline: true }} />
 
 ## Resources
 
+{/* prettier-ignore */}
 <ul>
   <li>
     <gcds-button type="link" button-style="text-only" href="https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-verify-banner" target="_blank">Github</gcds-button>
diff --git a/packages/web/src/index.html b/packages/web/src/index.html
index a8d4036bd..802f64f90 100644
--- a/packages/web/src/index.html
+++ b/packages/web/src/index.html
@@ -52,6 +52,7 @@
       html {
         font-size: 16px;
       }
+
       body {
         font-size: var(--gcds-font-sizes-text);
         line-height: var(--gcds-line-heights-text);
@@ -62,6 +63,7 @@
       }
     </style>
   </head>
+
   <body style="margin: 0">
     <!-- ------------- Verify banner ------------- -->
 
@@ -397,6 +399,16 @@ <h3 class="mt-700 mb-400 bb-sm">Grid</h3>
         </p>
       </gcds-grid>
 
+      <!-- ------------- Heading ------------- -->
+
+      <h3 class="mt-700 mb-400 bb-sm">Heading</h3>
+      <gcds-heading tag="h1">Heading level 1</gcds-heading>
+      <gcds-heading tag="h2">Heading level 2</gcds-heading>
+      <gcds-heading tag="h3">Heading level 3</gcds-heading>
+      <gcds-heading tag="h4">Heading level 4</gcds-heading>
+      <gcds-heading tag="h5">Heading level 5</gcds-heading>
+      <gcds-heading tag="h6">Heading level 6</gcds-heading>
+
       <!-- ------------- Text ------------- -->
 
       <h3 class="mt-700 mb-400 bb-sm">Text</h3>