diff --git a/docs/_data/variables/layout/hero.json b/docs/_data/variables/layout/hero.json
new file mode 100644
index 00000000..93144f08
--- /dev/null
+++ b/docs/_data/variables/layout/hero.json
@@ -0,0 +1,31 @@
+{
+  "by_name": {
+    "$hero-body-padding": {
+      "name": "$hero-body-padding",
+      "value": "3rem 1.5rem",
+      "type": "size"
+    },
+    "$hero-body-padding-small": {
+      "name": "$hero-body-padding-small",
+      "value": "1.5rem",
+      "type": "size"
+    },
+    "$hero-body-padding-medium": {
+      "name": "$hero-body-padding-medium",
+      "value": "9rem 1.5rem",
+      "type": "size"
+    },
+    "$hero-body-padding-large": {
+      "name": "$hero-body-padding-large",
+      "value": "18rem 1.5rem",
+      "type": "size"
+    }
+  },
+  "list": [
+    "$hero-body-padding",
+    "$hero-body-padding-small",
+    "$hero-body-padding-medium",
+    "$hero-body-padding-large"
+  ],
+  "file_path": "layout/hero.sass"
+} 
\ No newline at end of file
diff --git a/docs/documentation/customize/concepts.html b/docs/documentation/customize/concepts.html
index f8527481..9a781d9e 100644
--- a/docs/documentation/customize/concepts.html
+++ b/docs/documentation/customize/concepts.html
@@ -14,7 +14,7 @@ breadcrumb:
 
 <div class="content">
   <p>
-    Bulma is highly customizable thanks to <strong>415 Sass variables</strong> living across <strong>28 files</strong>.
+    Bulma is highly customizable thanks to <strong>419 Sass variables</strong> living across <strong>28 files</strong>.
   </p>
 
   <p>
diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html
index 6df6a4e5..619f14f4 100644
--- a/docs/documentation/layout/hero.html
+++ b/docs/documentation/layout/hero.html
@@ -13,7 +13,7 @@ breadcrumb:
 meta:
   colors: true
   sizes: true
-  variables: false
+  variables: true
 ---
 
 <div class="content">
diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass
index 9b18e4f9..ea376dc9 100644
--- a/sass/layout/hero.sass
+++ b/sass/layout/hero.sass
@@ -1,5 +1,9 @@
-// Main container
+$hero-body-padding: 3rem 1.5rem !default
+$hero-body-padding-small: 1.5rem !default
+$hero-body-padding-medium: 9rem 1.5rem !default
+$hero-body-padding-large: 18rem 1.5rem !default
 
+// Main container
 .hero
   align-items: stretch
   display: flex
@@ -71,18 +75,15 @@
   // Sizes
   &.is-small
     .hero-body
-      padding-bottom: 1.5rem
-      padding-top: 1.5rem
+      padding: $hero-body-padding-small
   &.is-medium
     +tablet
       .hero-body
-        padding-bottom: 9rem
-        padding-top: 9rem
+        padding: $hero-body-padding-medium
   &.is-large
     +tablet
       .hero-body
-        padding-bottom: 18rem
-        padding-top: 18rem
+        padding: $hero-body-padding-large
   &.is-halfheight,
   &.is-fullheight,
   &.is-fullheight-with-navbar
@@ -140,4 +141,4 @@
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: 3rem 1.5rem
+  padding: $hero-body-padding