diff --git a/exampleSite/data/spotlight1.yml b/exampleSite/data/spotlight1.yml
new file mode 100644
index 0000000..03058b6
--- /dev/null
+++ b/exampleSite/data/spotlight1.yml
@@ -0,0 +1,10 @@
+####################### Spotlight #########################
+style: "style1 orient-right content-align-left image-position-center onscroll-image-fade-in"
+id: "first"
+title : "Spotlight"
+content: |
+  This is a <strong>Spotlight</strong> element, and it's generally used &ndash; as its name implies &ndash; to spotlight a particular feature, subject, or pretty much whatever. 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-spotlight">details</a>).
+button: 
+  label: "Learn More"
+  link: "#"
+image: "images/spotlight01.jpg"
diff --git a/exampleSite/data/spotlight2.yml b/exampleSite/data/spotlight2.yml
new file mode 100644
index 0000000..2a9435f
--- /dev/null
+++ b/exampleSite/data/spotlight2.yml
@@ -0,0 +1,9 @@
+####################### Spotlight #########################
+style: "style1 orient-left content-align-left image-position-center onscroll-image-fade-in"
+title : "Spotlight"
+content: |
+  This is also a <strong>Spotlight</strong> element, and it's here because this demo would look a bit empty with just one spotlight. Like all spotlights, 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-spotlight">details</a>).
+button: 
+  label: "Learn More"
+  link: "#"
+image: "images/spotlight02.jpg"
diff --git a/exampleSite/data/spotlight3.yml b/exampleSite/data/spotlight3.yml
new file mode 100644
index 0000000..03fa5e5
--- /dev/null
+++ b/exampleSite/data/spotlight3.yml
@@ -0,0 +1,10 @@
+####################### Spotlight #########################
+style: "style1 orient-right content-align-left image-position-center onscroll-image-fade-in"
+id: "first"
+title : "Spotlight"
+content: |
+  And yes, this is another <strong>Spotlight</strong> element, and it's also here because I need to fill a bit of space. Naturally, like any other spotlight, 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-spotlight">details</a>).
+button: 
+  label: "Learn More"
+  link: "#"
+image: "images/spotlight03.jpg"
diff --git a/layouts/index.html b/layouts/index.html
index 278846d..e795826 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -16,9 +16,9 @@
 
 			<!-- Main -->
 			{{ partial "banner" site.Data.banner }}
-			{{ partial "spotlight-01-left" . }}
-			{{ partial "spotlight-02-right" . }}
-			{{ partial "spotlight-03-left" . }}
+			{{ partial "spotlight" site.Data.spotlight1 }}
+			{{ partial "spotlight" site.Data.spotlight2 }}
+			{{ partial "spotlight" site.Data.spotlight3 }}
 			{{ partial "gallery" . }}
 			{{ partial "items" . }}
 			{{ partial "elements" . }}
diff --git a/layouts/partials/spotlight.html b/layouts/partials/spotlight.html
new file mode 100644
index 0000000..d171c7e
--- /dev/null
+++ b/layouts/partials/spotlight.html
@@ -0,0 +1,13 @@
+<!-- Spotlight -->
+<section class="spotlight {{ .style }}"{{ with .id }} id="{{ . }}"{{ end }}>
+    <div class="content">
+        {{ with .title }}<h2>{{ . }}</h2>{{ end }}
+        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
+        {{ with .button }}<ul class="actions stacked">
+            <li><a href="{{ .link }}" class="button">{{ .label }}</a></li>
+        </ul>{{ end }}
+    </div>
+    {{ with .image }}<div class="image">
+        <img src="{{ . }}" alt="" />
+    </div>{{ end }}
+</section>
\ No newline at end of file