diff --git a/packages/documentation-framework/scripts/md/parseMD.js b/packages/documentation-framework/scripts/md/parseMD.js
index 1e02e8653f..78fbf50747 100644
--- a/packages/documentation-framework/scripts/md/parseMD.js
+++ b/packages/documentation-framework/scripts/md/parseMD.js
@@ -105,6 +105,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
section: frontmatter.section || '',
subsection: frontmatter.subsection || '',
deprecated: frontmatter.deprecated || false,
+ template: frontmatter.template || false,
beta: frontmatter.beta || false,
demo: frontmatter.demo || false,
newImplementationLink: frontmatter.newImplementationLink || false,
@@ -295,6 +296,7 @@ function sourceMDFile(file, source, buildMode) {
...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
...(pageData.beta && { beta: pageData.beta }),
...(pageData.deprecated && { deprecated: pageData.deprecated }),
+ ...(pageData.template && { template: pageData.template }),
...(pageData.demo && { demo: pageData.demo }),
...(pageData.sortValue && { sortValue: pageData.sortValue }),
...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })
diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
index c40f543407..ab4ddb8594 100644
--- a/packages/documentation-framework/templates/mdx.js
+++ b/packages/documentation-framework/templates/mdx.js
@@ -23,6 +23,7 @@ const MDXChildTemplate = ({
optIn,
beta,
deprecated,
+ template,
newImplementationLink,
functionDocumentation = []
} = Component.getPageData();
@@ -84,6 +85,12 @@ const MDXChildTemplate = ({
{' '}To learn more about the process, visit our about page.
)}
+ {(template || source === 'react-template') && (
+
+ {`This section showcases templates for the ${id} component. A template is a wrapped ${id} component use case that has built in logic with a streamlined API, and some limited customization.
+ For custom use cases that fall outside of a template's design, please use the ${id} component suite directly.`}
+
+ )}
);
// Create dynamic component for @reach/router