diff --git a/exampleSite/content/docs/thumbnails/index.md b/exampleSite/content/docs/thumbnails/index.md
index 43ee1f1a..2cfd09cb 100644
--- a/exampleSite/content/docs/thumbnails/index.md
+++ b/exampleSite/content/docs/thumbnails/index.md
@@ -40,4 +40,4 @@ The you just need to add an image like explain earlier. If you want to see a sam
 
 ## Hero Images
 
-Thumbnails will be used by default as hero images withing each article. Use the global `article.showHero` or the front-matter parameter `showHero` to control this feature across the entire site or for each specific post.
\ No newline at end of file
+Thumbnails will be used by default as hero images withing each article. Use the global `article.showHero` or the front-matter parameter `showHero` to control this feature across the entire site or for each specific post. If you want to override the style of the hero image you can create a file called `hero.html` in `./layouts/partials/` that will override the original partial from the theme.
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/images/docs/welcome/featured_hu6c1a40751b0ecb38722eba3ab5726016_6942334_1200x0_resize_box_3.png b/exampleSite/resources/_gen/images/docs/welcome/featured_hu6c1a40751b0ecb38722eba3ab5726016_6942334_1200x0_resize_box_3.png
new file mode 100644
index 00000000..9feaf6c7
Binary files /dev/null and b/exampleSite/resources/_gen/images/docs/welcome/featured_hu6c1a40751b0ecb38722eba3ab5726016_6942334_1200x0_resize_box_3.png differ
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 4ebdb754..532aa1e2 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,17 +1,6 @@
 {{ define "main" }}
 <article>
-
-  {{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
-  {{- $images := .Resources.ByType "image" -}}
-  {{- $featured := $images.GetMatch "*feature*" -}}
-  {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
-  {{- with $featured -}}
-    {{ with .Resize "600x" }}
-      <div class="w-full h-36 md:h-56 lg:h-72 single_hero nozoom" style="background-image:url({{ .RelPermalink }});"></div>
-    {{ end }}
-  {{- end -}}
-  {{- end -}}
-
+  {{ partial "hero.html" . }}
   <header class="mt-5 max-w-prose">
     {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
     {{ partial "breadcrumbs.html" . }}
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
new file mode 100644
index 00000000..89bf39c3
--- /dev/null
+++ b/layouts/partials/hero.html
@@ -0,0 +1,10 @@
+{{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
+{{- $images := .Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- with $featured -}}
+{{ with .Resize "600x" }}
+<div class="w-full h-36 md:h-56 lg:h-72 single_hero nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+{{ end }}
+{{- end -}}
+{{- end -}}
\ No newline at end of file