diff --git a/src/pages/guidelines/carbon-for-ai/index.mdx b/src/pages/guidelines/carbon-for-ai/index.mdx
index 3e3820d8465..94e1ed2a365 100644
--- a/src/pages/guidelines/carbon-for-ai/index.mdx
+++ b/src/pages/guidelines/carbon-for-ai/index.mdx
@@ -398,8 +398,8 @@ harmoniously together, as parts of a greater whole.
 <Column colMd={3} colLg={3} noGutterSm>
 
 <ImageCard 
-sub-title="Checkbox"
-sub-titleColor="dark"
+subTitle="Checkbox"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/checkbox/usage/#ai-presence">
 
@@ -408,8 +408,8 @@ href="/components/checkbox/usage/#ai-presence">
 </ImageCard>
 
 <ImageCard
-sub-title="Form"
-sub-titleColor="dark"
+subTitle="Form"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/form/usage/#ai-presence">
 
@@ -418,8 +418,8 @@ href="/components/form/usage/#ai-presence">
 </ImageCard>
 
 <ImageCard
-sub-title="Select"
-sub-titleColor="dark"
+subTitle="Select"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/select/usage/#ai-presence">
 
@@ -432,8 +432,8 @@ href="/components/select/usage/#ai-presence">
 <Column colMd={3} colLg={3} noGutterSm>
 
 <ImageCard 
-sub-title="Data table"
-sub-titleColor="dark"
+subTitle="Data table"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/data-table/usage/#ai-presence">
 
@@ -442,8 +442,8 @@ href="/components/data-table/usage/#ai-presence">
 </ImageCard>
 
 <ImageCard
-sub-title="Modal"
-sub-titleColor="dark"
+subTitle="Modal"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/modal/usage/#ai-presence">
 
@@ -452,8 +452,8 @@ href="/components/modal/usage/#ai-presence">
 </ImageCard>
 
 <ImageCard
-sub-title="Tag"
-sub-titleColor="dark"
+subTitle="Tag"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/tag/usage/#ai-presence">
 
@@ -466,8 +466,8 @@ href="/components/tag/usage/#ai-presence">
 <Column colMd={3} colLg={3} noGutterSm>
 
 <ImageCard
-sub-title="Date picker"
-sub-titleColor="dark"
+subTitle="Date picker"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/date-picker/usage/#ai-presence">
 
@@ -476,8 +476,8 @@ href="/components/date-picker/usage/#ai-presence">
 </ImageCard>
 
 <ImageCard
-sub-title="Number input"
-sub-titleColor="dark"
+subTitle="Number input"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/number-input/usage/#ai-presence">
 
@@ -486,8 +486,8 @@ href="/components/number-input/usage/#ai-presence">
 </ImageCard>
 
 <ImageCard
-sub-title="Text input"
-sub-titleColor="dark"
+subTitle="Text input"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/text-input/usage/#ai-presence">
 
@@ -500,8 +500,8 @@ href="/components/text-input/usage/#ai-presence">
 <Column colMd={3} colLg={3} noGutterSm>
 
 <ImageCard
-sub-title="Dropdown"
-sub-titleColor="dark"
+subTitle="Dropdown"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/dropdown/usage/#ai-presence">
 
@@ -510,8 +510,8 @@ href="/components/dropdown/usage/#ai-presence">
 </ImageCard>
 
 <ImageCard
-sub-title="Radio button"
-sub-titleColor="dark"
+subTitle="Radio button"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/radio-button/usage/#ai-presence">
 
@@ -520,8 +520,8 @@ href="/components/radio-button/usage/#ai-presence">
 </ImageCard>
 
 <ImageCard
-sub-title="Tile"
-sub-titleColor="dark"
+subTitle="Tile"
+subTitleColor="dark"
 hoverColor="dark"
 href="/components/tile/usage/#ai-presence">