diff --git a/exampleSite/data/banner.yml b/exampleSite/data/banner.yml
new file mode 100644
index 0000000..517f0ab
--- /dev/null
+++ b/exampleSite/data/banner.yml
@@ -0,0 +1,12 @@
+####################### Banner #########################
+style: "style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right"
+title : "Hugo Story"
+subtitle: |
+  Hugo Story released for free under the <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">Creative Commons</a>.
+content : |
+  This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-banner">details</a>).
+button:
+  label : "Get Started"
+  link : "#first"
+image : "images/banner.jpg"
+
diff --git a/layouts/index.html b/layouts/index.html
index b78f436..278846d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,7 +15,7 @@
 		<div id="wrapper" class="divided">
 
 			<!-- Main -->
-			{{ partial "banner" . }}
+			{{ partial "banner" site.Data.banner }}
 			{{ partial "spotlight-01-left" . }}
 			{{ partial "spotlight-02-right" . }}
 			{{ partial "spotlight-03-left" . }}
diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html
index edd0fa7..29acf12 100644
--- a/layouts/partials/banner.html
+++ b/layouts/partials/banner.html
@@ -1,14 +1,14 @@
-				<!-- Banner -->
-                <section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
-                    <div class="content">
-                        {{ with .Site.Title }}<h1>{{.}}</h1>{{end}}
-                        {{ with .Site.Params.subtitle }}<p class="major">{{.}} released for free under the <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">Creative Commons</a>.</p>{{end}}
-                        <p>This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-banner">details</a>).</p>
-                        <ul class="actions stacked">
-                            <li><a href="#first" class="button large wide smooth-scroll-middle">Get Started</a></li>
-                        </ul>
-                    </div>
-                    <div class="image">
-                        {{ with .Site.Params.logo }}<img src="{{.}}" alt="Hugo Story" />{{end}}
-                    </div>
-                </section>
\ No newline at end of file
+<!-- Banner -->
+<section class="banner {{ .style }}">
+    <div class="content">
+        {{ with .title }}<h1>{{ . }}</h1>{{ end }}
+        {{ with .subtitle }}<p class="major">{{ . | safeHTML }}</p>{{ end }}
+        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
+        {{ with .button }}<ul class="actions stacked">
+            <li><a href="{{ .link }}" class="button primary large wide smooth-scroll-middle">{{ .label }}</a></li>
+        </ul>{{ end }}
+    </div>
+    {{ with .image }}<div class="image">
+        <img src="{{.}}" alt="Hugo Story" />
+    </div>{{end}}
+</section>
\ No newline at end of file