diff --git a/backstop/config/scenarios/hint-block.js b/backstop/config/scenarios/hint-block.js
new file mode 100644
index 0000000000..181965de2a
--- /dev/null
+++ b/backstop/config/scenarios/hint-block.js
@@ -0,0 +1,6 @@
+module.exports = [{
+  removeSelectors: ['.page-header + .alert'],
+  label: 'hint-block',
+  url: 'dist/tests/hint-block.html',
+  disabled: false
+}]
diff --git a/backstop_data/bitmaps_reference/backstop_default_hint-block_0_document_0_large-device.png b/backstop_data/bitmaps_reference/backstop_default_hint-block_0_document_0_large-device.png
new file mode 100644
index 0000000000..d02200a669
Binary files /dev/null and b/backstop_data/bitmaps_reference/backstop_default_hint-block_0_document_0_large-device.png differ
diff --git a/src/less/hint-block.less b/src/less/hint-block.less
new file mode 100644
index 0000000000..9dc8cb1a1a
--- /dev/null
+++ b/src/less/hint-block.less
@@ -0,0 +1,19 @@
+.hint-block-pf {
+  background-color: @color-pf-blue-50;
+  color: @color-pf-blue-600;
+  padding: 10px 15px 15px;
+  .hint-block-pf-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.1;
+    margin-bottom: 10px;
+  }
+  .hint-block-pf-body {
+    font-size: 13px;
+    font-weight: 300;
+    line-height: 1.4;
+  }
+  > .btn {
+    margin-top: 30px;
+  }
+}
diff --git a/src/less/patternfly-additions.less b/src/less/patternfly-additions.less
index 68179220ac..1ec78a6647 100644
--- a/src/less/patternfly-additions.less
+++ b/src/less/patternfly-additions.less
@@ -49,6 +49,7 @@
 @import "experimental-features.less";
 @import "filter.less";
 @import "footer.less";
+@import "hint-block.less";
 @import "icons.less";
 @import "infotip.less";
 @import "layouts.less";
diff --git a/src/sass/converted/patternfly/_hint-block.scss b/src/sass/converted/patternfly/_hint-block.scss
new file mode 100644
index 0000000000..d4272e9d30
--- /dev/null
+++ b/src/sass/converted/patternfly/_hint-block.scss
@@ -0,0 +1,19 @@
+.hint-block-pf {
+  background-color: $color-pf-blue-50;
+  color: $color-pf-blue-600;
+  padding: 10px 15px 15px;
+  .hint-block-pf-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.1;
+    margin-bottom: 10px;
+  }
+  .hint-block-pf-body {
+    font-size: 13px;
+    font-weight: 300;
+    line-height: 1.4;
+  }
+  > .btn {
+    margin-top: 30px;
+  }
+}
diff --git a/src/sass/converted/rcue/_hint-block.scss b/src/sass/converted/rcue/_hint-block.scss
new file mode 100644
index 0000000000..d4272e9d30
--- /dev/null
+++ b/src/sass/converted/rcue/_hint-block.scss
@@ -0,0 +1,19 @@
+.hint-block-pf {
+  background-color: $color-pf-blue-50;
+  color: $color-pf-blue-600;
+  padding: 10px 15px 15px;
+  .hint-block-pf-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.1;
+    margin-bottom: 10px;
+  }
+  .hint-block-pf-body {
+    font-size: 13px;
+    font-weight: 300;
+    line-height: 1.4;
+  }
+  > .btn {
+    margin-top: 30px;
+  }
+}
diff --git a/src/sass/converted/rcue/_patternfly-additions.scss b/src/sass/converted/rcue/_patternfly-additions.scss
index ef71431e5c..f037b727b9 100644
--- a/src/sass/converted/rcue/_patternfly-additions.scss
+++ b/src/sass/converted/rcue/_patternfly-additions.scss
@@ -49,6 +49,7 @@
 @import 'experimental-features';
 @import 'filter';
 @import 'footer';
+@import 'hint-block';
 @import 'icons';
 @import 'infotip';
 @import 'layouts';
diff --git a/src/sass/static/_patternfly.scss b/src/sass/static/_patternfly.scss
index 8ea092d4e3..73cfe62ec0 100644
--- a/src/sass/static/_patternfly.scss
+++ b/src/sass/static/_patternfly.scss
@@ -122,6 +122,7 @@
 @import 'patternfly/filter';
 @import 'patternfly/footer';
 @import 'patternfly/icons';
+@import 'patternfly/hint-block';
 @import 'patternfly/infotip';
 @import 'patternfly/layouts';
 @import 'patternfly/links';
diff --git a/tests/pages/hint-block.html b/tests/pages/hint-block.html
new file mode 100644
index 0000000000..7138b7b3b4
--- /dev/null
+++ b/tests/pages/hint-block.html
@@ -0,0 +1,18 @@
+---
+categories: [Widgets]
+layout: page
+title: Hint Block
+resource: true
+---
+<div class="hint-block-pf">
+  <button type="button" class="close" aria-hidden="true" aria-label="Close">
+    <span class="pficon pficon-close"></span>
+  </button>
+  <div class="hint-block-pf-title">Some Title</div>
+  <div class="hint-block-pf-body">
+    Something introductory. Some body text explaining the feature. Some body text explaining the feature. Some body text explaining the feature. Some body text explaining the feature. Some body text explaining the feature. Some body text explaining the feature.
+  </div>
+  <button class="btn btn-primary" type="button">
+    Optional Action
+  </button>
+</div>