diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
index 4ed1d68e59..bb16edf761 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbbox/umbboxheader.directive.js
@@ -10,7 +10,7 @@ Use this directive to construct a title. Recommended to use it inside an {@link
 <h3>Markup example</h3>
 <pre>
     <umb-box>
-        <umb-box-header title="this is a title"></umb-box-header>
+        <umb-box-header title="This is a title" description="I can enter a description right here"></umb-box-header>
         <umb-box-content>
             // Content here
         </umb-box-content>
@@ -21,7 +21,7 @@ Use this directive to construct a title. Recommended to use it inside an {@link
 <pre>
     <umb-box>
         // the title-key property needs an areaAlias_keyAlias from the language files
-        <umb-box-header title-key="user_profile"></umb-box-header>
+        <umb-box-header title-key="areaAlias_keyAlias" description-key="areaAlias_keyAlias"></umb-box-header>
         <umb-box-content>
             // Content here
         </umb-box-content>
@@ -35,8 +35,10 @@ Use this directive to construct a title. Recommended to use it inside an {@link
     <li>{@link umbraco.directives.directive:umbBoxContent umbBoxContent}</li>
 </ul>
 
-@param {string} title (<code>attrbute</code>): Custom title text.
-@param {string} title-key (<code>attrbute</code>): the key alias of the language xml files.
+@param {string=} title (<code>attrbute</code>): Custom title text.
+@param {string=} titleKey (<code>attrbute</code>): The translation key from the language xml files.
+@param {string=} description (<code>attrbute</code>): Custom description text.
+@param {string=} descriptionKey (<code>attrbute</code>): The translation key from the language xml files.
 **/
 
 
@@ -52,7 +54,9 @@ Use this directive to construct a title. Recommended to use it inside an {@link
             templateUrl: 'views/components/html/umb-box/umb-box-header.html',
             scope: {
                 titleKey: "@?",
-                title: "@?"
+                title: "@?",
+                descriptionKey: "@?",
+                description: "@?"
             }
         };
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-box.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-box.less
index cfbd929a3a..492a257b38 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-box.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-box.less
@@ -15,6 +15,13 @@
     font-weight: bold;
 }
 
+.umb-box-header-description {
+    font-size: 13px;
+    color: @gray-3;
+    line-height: 1.6em;
+    margin-top: 1px;
+}
+
 .umb-box-content {
     padding: 20px;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
index 6feffe9d3d..8c59061788 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
@@ -1,6 +1,10 @@
 <div class="umb-box-header" ng-transclude>
-    <div class="umb-box-header-title">
+    <div class="umb-box-header-title" ng-if="title || titleKey">
         <localize ng-if="titleKey" key="{{titleKey}}"></localize>
         <span ng-if="title">{{title}}</span>
     </div>
+    <div class="umb-box-header-description" ng-if="description || descriptionKey">
+        <localize ng-if="descriptionKey" key="{{descriptionKey}}"></localize>
+        <span ng-if="description">{{description}}</span>
+    </div>
 </div>
\ No newline at end of file