diff --git a/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts b/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
index 3bca27437c..082968c2ec 100644
--- a/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
+++ b/apps/daffio/src/app/content/home/components/home-hero/home-hero.module.ts
@@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffHeroModule } from '@daffodil/design/hero';
 import { DaffImageModule } from '@daffodil/design/image';
 
 import { DaffioHomeHeroComponent } from './home-hero.component';
diff --git a/apps/daffio/src/app/content/not-found/not-found.module.ts b/apps/daffio/src/app/content/not-found/not-found.module.ts
index aa0ae98831..8c47f947cd 100644
--- a/apps/daffio/src/app/content/not-found/not-found.module.ts
+++ b/apps/daffio/src/app/content/not-found/not-found.module.ts
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffHeroModule } from '@daffodil/design/hero';
 
 import { DaffioNotFoundComponent } from './component/not-found.component';
 import { DaffioNotFoundRoutingModule } from './not-found-routing.module';
diff --git a/apps/daffio/src/app/content/support/support.module.ts b/apps/daffio/src/app/content/support/support.module.ts
index 50e9fd1910..97937933f1 100644
--- a/apps/daffio/src/app/content/support/support.module.ts
+++ b/apps/daffio/src/app/content/support/support.module.ts
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffHeroModule } from '@daffodil/design/hero';
 
 import { DaffioSupportComponent } from './component/support.component';
 import { DaffioSupportRoutingModule } from './support-routing.module';
diff --git a/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.module.ts b/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.module.ts
index 2022d645cf..354fa6c7bf 100644
--- a/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.module.ts
+++ b/apps/daffio/src/app/content/why-pwa/components/why-pwa-hero/why-pwa-hero.module.ts
@@ -2,9 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffHeroModule } from '@daffodil/design/hero';
 
 import { DaffioWhyPwaHeroComponent } from './why-pwa-hero.component';
 
diff --git a/libs/design/guides/getting-started.md b/libs/design/guides/getting-started.md
index af225c601f..5144942e6b 100644
--- a/libs/design/guides/getting-started.md
+++ b/libs/design/guides/getting-started.md
@@ -72,7 +72,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import { DaffHeroModule } from '@daffodil/design';
+import { DaffHeroModule } from '@daffodil/design/hero';
 
 @NgModule({
   imports: [
diff --git a/libs/design/src/molecules/hero/README.md b/libs/design/hero/README.md
similarity index 100%
rename from libs/design/src/molecules/hero/README.md
rename to libs/design/hero/README.md
diff --git a/libs/design/hero/examples/src/compact-hero/compact-hero.module.ts b/libs/design/hero/examples/src/compact-hero/compact-hero.module.ts
index 6bb5ba2bdf..b51b3c146f 100644
--- a/libs/design/hero/examples/src/compact-hero/compact-hero.module.ts
+++ b/libs/design/hero/examples/src/compact-hero/compact-hero.module.ts
@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffHeroModule } from '@daffodil/design/hero';
 
 import { CompactHeroComponent } from './compact-hero.component';
 
diff --git a/libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.module.ts b/libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.module.ts
index ee0c87ccef..45675a44b7 100644
--- a/libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.module.ts
+++ b/libs/design/hero/examples/src/hero-text-alignment/hero-text-alignment.module.ts
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffHeroModule } from '@daffodil/design/hero';
 
 import { HeroTextAlignmentComponent } from './hero-text-alignment.component';
 
diff --git a/libs/design/hero/examples/src/hero-theming/hero-theming.module.ts b/libs/design/hero/examples/src/hero-theming/hero-theming.module.ts
index f477cbac80..132315daea 100644
--- a/libs/design/hero/examples/src/hero-theming/hero-theming.module.ts
+++ b/libs/design/hero/examples/src/hero-theming/hero-theming.module.ts
@@ -3,8 +3,8 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffHeroModule } from '@daffodil/design/hero';
 
 import { HeroThemingComponent } from './hero-theming.component';
 
diff --git a/libs/design/hero/examples/src/hero-with-grid/hero-with-grid.module.ts b/libs/design/hero/examples/src/hero-with-grid/hero-with-grid.module.ts
index 6659c2dc52..8841d00705 100644
--- a/libs/design/hero/examples/src/hero-with-grid/hero-with-grid.module.ts
+++ b/libs/design/hero/examples/src/hero-with-grid/hero-with-grid.module.ts
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import { DaffHeroModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
 import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffHeroModule } from '@daffodil/design/hero';
 
 import { HeroWithGridComponent } from './hero-with-grid.component';
 
diff --git a/libs/design/hero/ng-package.json b/libs/design/hero/ng-package.json
new file mode 100644
index 0000000000..973f702e28
--- /dev/null
+++ b/libs/design/hero/ng-package.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/hero",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 
\ No newline at end of file
diff --git a/libs/design/src/molecules/hero/hero-body/hero-body.directive.spec.ts b/libs/design/hero/src/hero-body/hero-body.directive.spec.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-body/hero-body.directive.spec.ts
rename to libs/design/hero/src/hero-body/hero-body.directive.spec.ts
diff --git a/libs/design/src/molecules/hero/hero-body/hero-body.directive.ts b/libs/design/hero/src/hero-body/hero-body.directive.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-body/hero-body.directive.ts
rename to libs/design/hero/src/hero-body/hero-body.directive.ts
diff --git a/libs/design/src/molecules/hero/hero-icon/hero-icon.directive.spec.ts b/libs/design/hero/src/hero-icon/hero-icon.directive.spec.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-icon/hero-icon.directive.spec.ts
rename to libs/design/hero/src/hero-icon/hero-icon.directive.spec.ts
diff --git a/libs/design/src/molecules/hero/hero-icon/hero-icon.directive.ts b/libs/design/hero/src/hero-icon/hero-icon.directive.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-icon/hero-icon.directive.ts
rename to libs/design/hero/src/hero-icon/hero-icon.directive.ts
diff --git a/libs/design/src/molecules/hero/hero-subtitle/hero-subtitle.directive.spec.ts b/libs/design/hero/src/hero-subtitle/hero-subtitle.directive.spec.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-subtitle/hero-subtitle.directive.spec.ts
rename to libs/design/hero/src/hero-subtitle/hero-subtitle.directive.spec.ts
diff --git a/libs/design/src/molecules/hero/hero-subtitle/hero-subtitle.directive.ts b/libs/design/hero/src/hero-subtitle/hero-subtitle.directive.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-subtitle/hero-subtitle.directive.ts
rename to libs/design/hero/src/hero-subtitle/hero-subtitle.directive.ts
diff --git a/libs/design/src/molecules/hero/hero-tagline/hero-tagline.directive.spec.ts b/libs/design/hero/src/hero-tagline/hero-tagline.directive.spec.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-tagline/hero-tagline.directive.spec.ts
rename to libs/design/hero/src/hero-tagline/hero-tagline.directive.spec.ts
diff --git a/libs/design/src/molecules/hero/hero-tagline/hero-tagline.directive.ts b/libs/design/hero/src/hero-tagline/hero-tagline.directive.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-tagline/hero-tagline.directive.ts
rename to libs/design/hero/src/hero-tagline/hero-tagline.directive.ts
diff --git a/libs/design/src/molecules/hero/hero-theme.scss b/libs/design/hero/src/hero-theme.scss
similarity index 95%
rename from libs/design/src/molecules/hero/hero-theme.scss
rename to libs/design/hero/src/hero-theme.scss
index 8635f38b30..f1c16cba9d 100644
--- a/libs/design/src/molecules/hero/hero-theme.scss
+++ b/libs/design/hero/src/hero-theme.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../scss/core';
-@use '../../../scss/theming';
+@use '../../scss/core';
+@use '../../scss/theming';
 
 @mixin daff-hero-theme-variant($color) {
 	background: $color;
diff --git a/libs/design/src/molecules/hero/hero-title/hero-title.directive.spec.ts b/libs/design/hero/src/hero-title/hero-title.directive.spec.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-title/hero-title.directive.spec.ts
rename to libs/design/hero/src/hero-title/hero-title.directive.spec.ts
diff --git a/libs/design/src/molecules/hero/hero-title/hero-title.directive.ts b/libs/design/hero/src/hero-title/hero-title.directive.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero-title/hero-title.directive.ts
rename to libs/design/hero/src/hero-title/hero-title.directive.ts
diff --git a/libs/design/src/molecules/hero/hero.module.ts b/libs/design/hero/src/hero.module.ts
similarity index 100%
rename from libs/design/src/molecules/hero/hero.module.ts
rename to libs/design/hero/src/hero.module.ts
diff --git a/libs/design/src/molecules/hero/hero/hero.component.scss b/libs/design/hero/src/hero/hero.component.scss
similarity index 96%
rename from libs/design/src/molecules/hero/hero/hero.component.scss
rename to libs/design/hero/src/hero/hero.component.scss
index df8240beb6..ce85bb6e48 100644
--- a/libs/design/src/molecules/hero/hero/hero.component.scss
+++ b/libs/design/hero/src/hero/hero.component.scss
@@ -1,5 +1,5 @@
-@use '../../../../scss/typography' as t;
-@use '../../../../scss/layout';
+@use '../../../scss/typography' as t;
+@use '../../../scss/layout';
 
 .daff-hero {
 	$root: &;
diff --git a/libs/design/src/molecules/hero/hero/hero.component.spec.ts b/libs/design/hero/src/hero/hero.component.spec.ts
similarity index 97%
rename from libs/design/src/molecules/hero/hero/hero.component.spec.ts
rename to libs/design/hero/src/hero/hero.component.spec.ts
index a9d17405ff..8ddf666ba9 100644
--- a/libs/design/src/molecules/hero/hero/hero.component.spec.ts
+++ b/libs/design/hero/src/hero/hero.component.spec.ts
@@ -9,13 +9,16 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
+import {
+  DaffPalette,
+  DaffTextAlignment,
+} from '@daffodil/design';
+
 import {
   DaffHeroComponent,
   DaffHeroLayout,
   DaffHeroSize,
 } from './hero.component';
-import { DaffPalette } from '../../../core/colorable/public_api';
-import { DaffTextAlignment } from '../../../core/text-alignable/text-alignable';
 
 @Component({
   template: `<daff-hero [layout]="layout" [size]="size" [color]="color" [textAlignment]="textAlignment" [compact]="compact"></daff-hero>`,
diff --git a/libs/design/src/molecules/hero/hero/hero.component.ts b/libs/design/hero/src/hero/hero.component.ts
similarity index 83%
rename from libs/design/src/molecules/hero/hero/hero.component.ts
rename to libs/design/hero/src/hero/hero.component.ts
index f651f38c91..9e79809c04 100644
--- a/libs/design/src/molecules/hero/hero/hero.component.ts
+++ b/libs/design/hero/src/hero/hero.component.ts
@@ -8,18 +8,16 @@ import {
   Renderer2,
 } from '@angular/core';
 
-import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
 import {
-  daffColorMixin,
+  daffArticleEncapsulatedMixin,
   DaffColorable,
-} from '../../../core/colorable/public_api';
-import {
+  daffColorMixin,
   DaffCompactable,
   daffCompactableMixin,
-} from '../../../core/compactable/public_api';
-import { daffManageContainerLayoutMixin } from '../../../core/manage-container-layout/public_api';
-import { DaffTextAlignable } from '../../../core/text-alignable/text-alignable';
-import { daffTextAlignmentMixin } from '../../../core/text-alignable/text-alignable-mixin';
+  daffManageContainerLayoutMixin,
+  DaffTextAlignable,
+  daffTextAlignmentMixin,
+} from '@daffodil/design';
 
 /**
  * @deprecated See {@link DaffTextAlignable}
diff --git a/libs/design/hero/src/index.ts b/libs/design/hero/src/index.ts
new file mode 100644
index 0000000000..4aaf8f92ed
--- /dev/null
+++ b/libs/design/hero/src/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/libs/design/src/molecules/hero/public_api.ts b/libs/design/hero/src/public_api.ts
similarity index 100%
rename from libs/design/src/molecules/hero/public_api.ts
rename to libs/design/hero/src/public_api.ts
diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss
index 65ae85dfbd..6aab16eeab 100644
--- a/libs/design/scss/theme.scss
+++ b/libs/design/scss/theme.scss
@@ -29,7 +29,7 @@
 @use '../accordion/src/accordion-theme' as accordion;
 @use '../callout/src/callout-theme' as callout;
 @use '../card/src/card-theme' as card;
-@use '../src/molecules/hero/hero-theme' as hero;
+@use '../hero/src/hero-theme' as hero;
 @use '../src/molecules/list/list/list-theme' as list;
 @use '../src/molecules/media-gallery/media-gallery-theme' as media-gallery;
 @use '../src/molecules/menu/menu-theme' as menu;
diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts
index 6ecba922f3..25c4cc562c 100644
--- a/libs/design/src/public_api.ts
+++ b/libs/design/src/public_api.ts
@@ -27,7 +27,6 @@ export * from './molecules/modal/public_api';
 export * from './molecules/navbar/public_api';
 export * from './molecules/paginator/public_api';
 export * from './molecules/qty-dropdown/public_api';
-export * from './molecules/hero/public_api';
 export * from './molecules/feature/public_api';
 
 // Core