Fix hero docs

docs/documentation/layout/hero.html

@@ -2,6 +2,7 @@
 title: Hero
 layout: documentation
 hide_categories: true
+hide_fortyfour: true
 doc-tab: layout
 doc-subtab: hero
 breadcrumb:
@@ -9,8 +10,34 @@ breadcrumb:
 - documentation
 - layout
 - layout-hero
+meta:
+  colors: true
+  sizes: true
+  variables: true
 ---
 
+<div class="content">
+  <p>
+    The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally cover the full height of the page as well.
+  </p>
+  <p>
+    The basic requirement of this component are:
+  </p>
+  <ul>
+    <li>
+      <code>hero</code> as the main container
+      <ul>
+        <li>
+          <code>hero-body</code> as a direct child, in which you can put all your content
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <p>
+    For the <a href="#full-height-hero">full height hero</a> to work, you will also need a <code>hero-head</code> and a <code>hero-foot</code>.
+  </p>
+</div>
+
 {% include layout/main-close.html show_categories=true %}
 
 <section class="section is-fullwidth">
@@ -48,7 +75,7 @@ breadcrumb:
 
 <section class="section">
   <div class="container">
-    <h3 class="title">Colors</h3>
+    {% include elements/anchor.html name="Colors" %}
     <h4 class="subtitle">
         As with buttons, you can choose one of the <strong>7 different colors</strong>:
     </h4>
@@ -179,10 +206,7 @@ breadcrumb:
 
 <section class="section">
   <div class="container">
-    <h3 class="title">
-      Gradients
-      <span class="tag is-warning">Experimental</span>
-    </h3>
+    {% include elements/anchor.html name="Gradients" %}
     <h4 class="subtitle">
       By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
     </h4>
@@ -306,7 +330,7 @@ breadcrumb:
 
 <section class="section">
   <div class="container">
-    <h3 class="title">Sizes</h3>
+    {% include elements/anchor.html name="Sizes" %}
     <h4 class="subtitle">
       You can have even more imposing banners by using one of <strong>3 different sizes</strong>
     </h4>
@@ -407,7 +431,7 @@ breadcrumb:
 
 <section class="section">
   <div class="container">
-    <h3 class="title">Full height hero</h3>
+    {% include elements/anchor.html name="Full height hero" %}
     <h4 class="subtitle">And vertically centered</h4>
     <div class="content">
       <p>You can split the hero in <strong>3 vertical parts</strong>:</p>
@@ -654,3 +678,5 @@ breadcrumb:
 </section>
 
 {% include layout/main-open.html %}
+
+{% include elements/variables.html type='component' %}