diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap
index 8dc7196e..680f648b 100644
--- a/src/__tests__/__snapshots__/index.test.ts.snap
+++ b/src/__tests__/__snapshots__/index.test.ts.snap
@@ -883,6 +883,30 @@ Object {
     "defaultProps": Object {
       "as": "div",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Generic": Object {
@@ -986,6 +1010,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Foot": Object {
@@ -993,6 +1041,30 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "Head": Object {
@@ -1000,11 +1072,62 @@ Object {
       "defaultProps": Object {
         "as": "div",
       },
+      "propTypes": Object {
+        "as": [Function],
+        "backgroundColor": [Function],
+        "className": [Function],
+        "clearfix": [Function],
+        "clipped": [Function],
+        "hidden": [Function],
+        "invisible": [Function],
+        "italic": [Function],
+        "marginless": [Function],
+        "overlay": [Function],
+        "paddingless": [Function],
+        "pull": [Function],
+        "radiusless": [Function],
+        "responsive": [Function],
+        "shadowless": [Function],
+        "srOnly": [Function],
+        "textAlignment": [Function],
+        "textColor": [Function],
+        "textSize": [Function],
+        "textTransform": [Function],
+        "textWeight": [Function],
+        "unselectable": [Function],
+      },
       "render": [Function],
     },
     "defaultProps": Object {
       "as": "section",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "color": [Function],
+      "gradient": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "size": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Highlight": Object {
@@ -1725,6 +1848,31 @@ Object {
     "defaultProps": Object {
       "as": "section",
     },
+    "propTypes": Object {
+      "as": [Function],
+      "backgroundColor": [Function],
+      "className": [Function],
+      "clearfix": [Function],
+      "clipped": [Function],
+      "hidden": [Function],
+      "invisible": [Function],
+      "italic": [Function],
+      "marginless": [Function],
+      "overlay": [Function],
+      "paddingless": [Function],
+      "pull": [Function],
+      "radiusless": [Function],
+      "responsive": [Function],
+      "shadowless": [Function],
+      "size": [Function],
+      "srOnly": [Function],
+      "textAlignment": [Function],
+      "textColor": [Function],
+      "textSize": [Function],
+      "textTransform": [Function],
+      "textWeight": [Function],
+      "unselectable": [Function],
+    },
     "render": [Function],
   },
   "Select": Object {
diff --git a/src/layout/footer/__tests__/footer.test.tsx b/src/layout/footer/__tests__/footer.test.tsx
index 6fbeca8d..8b80398f 100644
--- a/src/layout/footer/__tests__/footer.test.tsx
+++ b/src/layout/footer/__tests__/footer.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { Footer } from "../footer";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("Footer component", () => {
   hasProperties(Footer, {
@@ -46,4 +46,9 @@ describe("Footer component", () => {
     const wrapper = Enzyme.shallow(<Footer className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = Footer;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/layout/footer/footer.tsx b/src/layout/footer/footer.tsx
index b257e802..cfead946 100644
--- a/src/layout/footer/footer.tsx
+++ b/src/layout/footer/footer.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type FooterModifierProps = Partial<{ className: string }>;
+export type FooterProps = HelpersProps;
 
-export type FooterProps = HelpersProps & FooterModifierProps;
-
-export const Footer = forwardRefAs<FooterProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("footer", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const Footer = Object.assign(
+  forwardRefAs<FooterProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("footer", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/layout/hero/__tests__/hero-body.test.tsx b/src/layout/hero/__tests__/hero-body.test.tsx
index 97e567fd..1eabcf42 100644
--- a/src/layout/hero/__tests__/hero-body.test.tsx
+++ b/src/layout/hero/__tests__/hero-body.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { HeroBody } from "../hero-body";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("HeroBody component", () => {
   hasProperties(HeroBody, {
@@ -46,4 +46,9 @@ describe("HeroBody component", () => {
     const wrapper = Enzyme.shallow(<HeroBody className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = HeroBody;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/layout/hero/__tests__/hero-foot.test.tsx b/src/layout/hero/__tests__/hero-foot.test.tsx
index 4ef5f35f..042c1d2f 100644
--- a/src/layout/hero/__tests__/hero-foot.test.tsx
+++ b/src/layout/hero/__tests__/hero-foot.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { HeroFoot } from "../hero-foot";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("HeroFoot component", () => {
   hasProperties(HeroFoot, {
@@ -46,4 +46,9 @@ describe("HeroFoot component", () => {
     const wrapper = Enzyme.shallow(<HeroFoot className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = HeroFoot;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/layout/hero/__tests__/hero-head.test.tsx b/src/layout/hero/__tests__/hero-head.test.tsx
index e4c1155e..9bffe9a6 100644
--- a/src/layout/hero/__tests__/hero-head.test.tsx
+++ b/src/layout/hero/__tests__/hero-head.test.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { HeroHead } from "../hero-head";
 
-import { hasProperties } from "@/__tests__/testing";
+import { hasProperties, testGenericPropTypes } from "@/__tests__/testing";
 
 describe("HeroHead component", () => {
   hasProperties(HeroHead, {
@@ -46,4 +46,9 @@ describe("HeroHead component", () => {
     const wrapper = Enzyme.shallow(<HeroHead className={className} />);
     expect(wrapper.hasClass(className)).toBe(true);
   });
+
+  describe("propTypes", () => {
+    const { propTypes } = HeroHead;
+    testGenericPropTypes(propTypes);
+  });
 });
diff --git a/src/layout/hero/__tests__/hero.test.tsx b/src/layout/hero/__tests__/hero.test.tsx
index 26c808d4..1ebb4e69 100644
--- a/src/layout/hero/__tests__/hero.test.tsx
+++ b/src/layout/hero/__tests__/hero.test.tsx
@@ -7,7 +7,12 @@ import { HeroBody } from "../hero-body";
 import { HeroFoot } from "../hero-foot";
 import { HeroHead } from "../hero-head";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateBoolPropType,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Hero component", () => {
   hasProperties(Hero, {
@@ -74,4 +79,12 @@ describe("Hero component", () => {
       expect(wrapper.hasClass(`is-${size}`)).toBe(true);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Hero;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "color", COLORS);
+    validateBoolPropType(propTypes, "gradient");
+    validateOneOfPropType(propTypes, "size", HERO_SIZES);
+  });
 });
diff --git a/src/layout/hero/hero-body.tsx b/src/layout/hero/hero-body.tsx
index 2cd02be5..93a01d96 100644
--- a/src/layout/hero/hero-body.tsx
+++ b/src/layout/hero/hero-body.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type HeroBodyModifierProps = Partial<{ className: string }>;
+export type HeroBodyProps = HelpersProps;
 
-export type HeroBodyProps = HelpersProps & HeroBodyModifierProps;
-
-export const HeroBody = forwardRefAs<HeroBodyProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("hero-body", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const HeroBody = Object.assign(
+  forwardRefAs<HeroBodyProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("hero-body", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/layout/hero/hero-foot.tsx b/src/layout/hero/hero-foot.tsx
index 46f63eb0..b37b476a 100644
--- a/src/layout/hero/hero-foot.tsx
+++ b/src/layout/hero/hero-foot.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type HeroFootModifierProps = Partial<{ className: string }>;
+export type HeroFootProps = HelpersProps;
 
-export type HeroFootProps = HelpersProps & HeroFootModifierProps;
-
-export const HeroFoot = forwardRefAs<HeroFootProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("hero-foot", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const HeroFoot = Object.assign(
+  forwardRefAs<HeroFootProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("hero-foot", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/layout/hero/hero-head.tsx b/src/layout/hero/hero-head.tsx
index 97931ded..e9f857bd 100644
--- a/src/layout/hero/hero-head.tsx
+++ b/src/layout/hero/hero-head.tsx
@@ -1,17 +1,23 @@
 import classNames from "classnames";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 
-export type HeroHeadModifierProps = Partial<{ className: string }>;
+export type HeroHeadProps = HelpersProps;
 
-export type HeroHeadProps = HelpersProps & HeroHeadModifierProps;
-
-export const HeroHead = forwardRefAs<HeroHeadProps, "div">(
-  (props, ref) => {
-    const { as, ...rest } = transformHelpers(props);
-    rest.className = classNames("hero-head", rest.className);
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "div" },
+export const HeroHead = Object.assign(
+  forwardRefAs<HeroHeadProps, "div">(
+    (props, ref) => {
+      const { as, ...rest } = transformHelpers(props);
+      rest.className = classNames("hero-head", rest.className);
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "div" },
+  ),
+  { propTypes: genericPropTypes },
 );
diff --git a/src/layout/hero/hero.tsx b/src/layout/hero/hero.tsx
index 3463331d..a1d872a1 100644
--- a/src/layout/hero/hero.tsx
+++ b/src/layout/hero/hero.tsx
@@ -1,8 +1,14 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
-import { Colors } from "../../base/helpers";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
+import { Colors, COLORS } from "../../base/helpers";
 import { tuple } from "../../utils";
 import { HeroBody } from "./hero-body";
 import { HeroFoot } from "./hero-foot";
@@ -17,7 +23,6 @@ export const HERO_SIZES = tuple(
 export type HeroSizes = (typeof HERO_SIZES)[number];
 
 export type HeroModifierProps = Partial<{
-  className: string;
   color: Colors;
   gradient: boolean;
   size: HeroSizes;
@@ -25,6 +30,13 @@ export type HeroModifierProps = Partial<{
 
 export type HeroProps = HelpersProps & HeroModifierProps;
 
+const propTypes = {
+  ...genericPropTypes,
+  color: PropTypes.oneOf(COLORS),
+  gradient: PropTypes.bool,
+  size: PropTypes.oneOf(HERO_SIZES),
+};
+
 export const Hero = Object.assign(
   forwardRefAs<HeroProps, "section">(
     (props, ref) => {
@@ -42,5 +54,6 @@ export const Hero = Object.assign(
     Body: HeroBody,
     Foot: HeroFoot,
     Head: HeroHead,
+    propTypes,
   },
 );
diff --git a/src/layout/section/__tests__/section.test.tsx b/src/layout/section/__tests__/section.test.tsx
index 3dedba40..4d26e1f1 100644
--- a/src/layout/section/__tests__/section.test.tsx
+++ b/src/layout/section/__tests__/section.test.tsx
@@ -3,7 +3,11 @@ import React from "react";
 
 import { Section, SECTION_SIZES } from "../section";
 
-import { hasProperties } from "@/__tests__/testing";
+import {
+  hasProperties,
+  testGenericPropTypes,
+  validateOneOfPropType,
+} from "@/__tests__/testing";
 
 describe("Section component", () => {
   hasProperties(Section, {
@@ -53,4 +57,10 @@ describe("Section component", () => {
       expect(wrapper.hasClass(`is-${size}`)).toBe(true);
     }),
   );
+
+  describe("propTypes", () => {
+    const { propTypes } = Section;
+    testGenericPropTypes(propTypes);
+    validateOneOfPropType(propTypes, "size", SECTION_SIZES);
+  });
 });
diff --git a/src/layout/section/section.tsx b/src/layout/section/section.tsx
index 61e7c6b9..9f7bb125 100644
--- a/src/layout/section/section.tsx
+++ b/src/layout/section/section.tsx
@@ -1,26 +1,39 @@
 import classNames from "classnames";
+import PropTypes from "prop-types";
 import React from "react";
 
-import { forwardRefAs, HelpersProps, transformHelpers } from "../../base";
+import {
+  forwardRefAs,
+  genericPropTypes,
+  HelpersProps,
+  transformHelpers,
+} from "../../base";
 import { tuple } from "../../utils";
 
 export const SECTION_SIZES = tuple("medium", "large");
 export type SectionSizes = (typeof SECTION_SIZES)[number];
 
 export type SectionModifierProps = Partial<{
-  className: string;
   size: SectionSizes;
 }>;
 
 export type SectionProps = HelpersProps & SectionModifierProps;
 
-export const Section = forwardRefAs<SectionProps, "section">(
-  (props, ref) => {
-    const { as, size, ...rest } = transformHelpers(props);
-    rest.className = classNames("section", rest.className, {
-      [`is-${size}`]: size,
-    });
-    return React.createElement(as!, { ref, ...rest });
-  },
-  { as: "section" },
+const propTypes = {
+  ...genericPropTypes,
+  size: PropTypes.oneOf(SECTION_SIZES),
+};
+
+export const Section = Object.assign(
+  forwardRefAs<SectionProps, "section">(
+    (props, ref) => {
+      const { as, size, ...rest } = transformHelpers(props);
+      rest.className = classNames("section", rest.className, {
+        [`is-${size}`]: size,
+      });
+      return React.createElement(as!, { ref, ...rest });
+    },
+    { as: "section" },
+  ),
+  { propTypes },
 );