diff --git a/tools/generators/new-component/generators/app/index.js b/tools/generators/new-component/generators/app/index.js
index e3afd7500b..19bed5e1e0 100644
--- a/tools/generators/new-component/generators/app/index.js
+++ b/tools/generators/new-component/generators/app/index.js
@@ -11,7 +11,7 @@ const { join, relative, extname } = require('path');
 const { readdirSync } = require('fs');
 
 const Generator = require('yeoman-generator');
-const { camelCase, kebabCase, snakeCase } = require('lodash');
+const { camelCase, kebabCase, snakeCase, startCase } = require('lodash');
 const rename = require('gulp-rename');
 
 const { PATH_APPS } = require('../../../../../particle.root.config');
@@ -132,6 +132,7 @@ module.exports = class extends Generator {
       this.props = {
         ...props,
         // 'name' already exists as kebab-case-name (dashes)
+        upperCaseName: startCase(props.name),
         underscoreName: snakeCase(props.name),
         camelCaseName: camelCase(props.name),
         cleanPatternType: props.patternType.replace(/([0-9])\w+-/g, ''),
diff --git a/tools/generators/new-component/generators/app/templates/app/patterns.yml.ejs b/tools/generators/new-component/generators/app/templates/app/patterns.yml.ejs
index 58ac6f9802..1d2323ebdd 100644
--- a/tools/generators/new-component/generators/app/templates/app/patterns.yml.ejs
+++ b/tools/generators/new-component/generators/app/templates/app/patterns.yml.ejs
@@ -1,8 +1,9 @@
-<%= underscoreName %>:
-  example_var: This is an example var
-
 <%= underscoreName %>_demo_block:
-  title: <%= name %> Component
-  text:
+  title: <%= upperCaseName %> Component
+  content:
     lead: Add a quick description here.
     summary: Add code examples here using <code>html code syntax</code>
+
+<%= underscoreName %>:
+  example_var: This is an example var
+