diff --git a/exampleSite/content/home/hero.md b/exampleSite/content/home/hero.md
new file mode 100644
index 00000000..56a93188
--- /dev/null
+++ b/exampleSite/content/home/hero.md
@@ -0,0 +1,52 @@
++++
+# Hero widget.
+
+date = 2017-10-15
+draft = false
+
+title = "Academic"
+widget = "hero"
+
+# Order that this section will appear in.
+weight = 3
+
+# Overlay a color or image (optional).
+#   Deactivate an option by commenting out the line, prefixing it with `#`.
+[header]
+  overlay_color = "#666"  # An HTML color value.
+  overlay_img = "headers/bubbles-wide.jpg"  # Image path relative to your `static/img/` folder.
+  overlay_filter = 0.5  # Darken the image. Value in range 0-1.
+
+# Call to action button (optional).
+#   Activate the button by specifying a URL and button label below.
+#   Deactivate by commenting out parameters, prefixing lines with `#`.
+[cta]
+  url = "./post/getting-started/"
+  label = '<i class="fa fa-download"></i> Install Now'
++++
+
+The highly flexible website framework for Hugo with an extensible plugin mechanism. Create a beautifully simple site in under 10 minutes :rocket:
+<br>
+<small><a id="academic-release" href="https://sourcethemes.com/academic/tags/updates">Latest release</a></small>
+<br><br>
+<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=gcushen&amp;repo=hugo-academic&amp;type=star&amp;count=true&amp;size=large" scrolling="0" width="160px" height="30px" frameborder="0"></iframe>
+<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=gcushen&amp;repo=hugo-academic&amp;type=fork&amp;count=true&amp;size=large" scrolling="0" width="158px" height="30px" frameborder="0"></iframe>
+
+<script type="text/javascript">
+  (function defer() {
+    if (window.jQuery) {
+      jQuery(document).ready(function(){
+        GetLatestReleaseInfo();
+      });
+    } else {
+      setTimeout(function() { defer() }, 50);
+    }
+  })();  
+  function GetLatestReleaseInfo() {
+    $.getJSON('https://api.github.com/repos/gcushen/hugo-academic/tags').done(function (json) {
+      let release = json[0];
+      // let downloadURL = release.zipball_url;
+      $('#academic-release').text('Latest release ' + release.name);  
+    });    
+}  
+</script>
diff --git a/exampleSite/content/post/widgets.md b/exampleSite/content/post/widgets.md
index fbe9f6f7..acbc6fac 100644
--- a/exampleSite/content/post/widgets.md
+++ b/exampleSite/content/post/widgets.md
@@ -20,6 +20,7 @@ Homepage widgets display as sections on the homepage. They can be enabled/disabl
 - Recent talks
 - Contact
 - Tag cloud
+- Hero (introduction)
 - Custom widget (demonstrated with the *teaching* example)
 
 The example site that you copied to create your site uses all the different types of widget (except talks), so you can generally just delete the widgets you don't need and customize the parameters of the widgets you wish to keep.
diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index 521bbe48..422ff76c 100644
--- a/layouts/partials/css/academic.css
+++ b/layouts/partials/css/academic.css
@@ -196,6 +196,11 @@ blockquote p:last-child {
   }
 }
 
+small,
+.small {
+  font-size: .75em;
+}
+
 /*************************************************
  *  Home Sections
  **************************************************/
@@ -243,6 +248,53 @@ blockquote p:last-child {
   color: #b2b2b2;
 }
 
+/*************************************************
+ *  Hero Widget
+ **************************************************/
+
+.hero-overlay {
+  position: relative;
+  padding: 3em 0;
+  clear: both;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  animation: intro 0.3s both;
+  animation-delay: 0s;
+  animation-delay: 0.25s;
+}
+
+.hero-title {
+  font-size: 2.7rem;
+  margin-top: 0;
+  line-height: 1;
+}
+
+.hero-lead {
+  max-width: 768px;
+  font-size: 1.35rem;
+}
+
+.hero-overlay .hero-title,
+.hero-overlay .hero-lead,
+.hero-overlay .btn {
+  color: #fff;
+  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
+}
+
+.hero-overlay a {
+  color: #fff;
+}
+
+.hero-overlay .hero-lead a {
+  color: #fff;
+  text-decoration-line: underline;
+}
+
+.hero-overlay .btn-large {
+  font-size: 1.1rem;
+}
+
 /*************************************************
  *  Biography
  **************************************************/
@@ -768,6 +820,17 @@ footer a#back_to_top i {
   background: {{ .Get "primary" }} !important;
 }
 
+.btn-light {
+  border-color: #fff !important;
+  background: #fff !important;
+}
+
+.btn-light:hover,
+.btn-light:active,
+.btn-light.active {
+  background: rgba(0,0,0,0.4) !important;
+}
+
 /*************************************************
  *  Toolbar Buttons
  **************************************************/
@@ -819,6 +882,19 @@ footer a#back_to_top i {
   color: #fff !important;
 }
 
+.btn-light.btn-outline {
+  color: #fff !important;
+  border-color: #fff !important;
+}
+
+.btn-light.btn-outline:focus {
+  color: #fff !important;
+}
+
+.btn-light.btn-outline:active {
+  color: transparent !important;
+}
+
 .btn-success.btn-outline {
   color: #5cb85c;
 }
@@ -836,6 +912,7 @@ footer a#back_to_top i {
 }
 
 .btn-primary.btn-outline:hover,
+.btn-light.btn-outline:hover,
 .btn-success.btn-outline:hover,
 .btn-info.btn-outline:hover,
 .btn-warning.btn-outline:hover,
diff --git a/layouts/partials/widget_page.html b/layouts/partials/widget_page.html
index ca7f4354..a620716a 100644
--- a/layouts/partials/widget_page.html
+++ b/layouts/partials/widget_page.html
@@ -15,11 +15,15 @@
 {{ range $index, $page := where .Data.Pages "Section" $section }}
   {{ $params := dict "root" $ "page" $page }}
   {{ $widget := printf "widgets/%s.html" ( or $page.Params.widget "custom" ) }}
+  {{ if eq $page.Params.widget "hero" }}
+    {{ partial $widget $params }}
+  {{ else }}
   <section id="{{ $page.File.TranslationBaseName }}" class="home-section">
     <div class="container">
       {{ partial $widget $params }}
     </div>
   </section>
+  {{ end }}
 {{ end }}
 
 <!-- Page Footer -->
diff --git a/layouts/partials/widgets/hero.html b/layouts/partials/widgets/hero.html
new file mode 100644
index 00000000..51233a74
--- /dev/null
+++ b/layouts/partials/widgets/hero.html
@@ -0,0 +1,32 @@
+{{ $ := .root }}
+{{ $page := .page }}
+{{ $header := $page.Params.header }}
+
+<section id="{{ $page.File.TranslationBaseName }}" class="hero-overlay" style="
+{{ if $header.overlay_color }}
+background-color: {{ $header.overlay_color | default "transparent" }};
+{{ end }}
+{{ if $header.overlay_img }}
+background-image:
+{{ if $header.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $header.overlay_filter }}), rgba(0, 0, 0, {{ $header.overlay_filter }})), {{ end }}
+url('{{ printf "img/%s" $header.overlay_img | absURL}}');
+{{ end }}
+;">
+
+  <div class="container">
+
+    <h1 class="hero-title" itemprop="headline">
+      {{ with $page.Title }}{{ . | markdownify }}{{ end }}
+    </h1>
+
+    {{ with $page.Content }}
+    <p class="hero-lead">{{ . | markdownify }}</p>
+    {{ end }}
+
+    {{ if $page.Params.cta.url }}
+    <p><a href="{{ $page.Params.cta.url }}" class="btn btn-light btn-outline btn-large">{{ $page.Params.cta.label | safeHTML}}</a></p>
+    {{ end }}
+
+  </div>
+
+</section>