diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md
index 69a850f74..b23f536c1 100644
--- a/docs/source/docs/background-color.blade.md
+++ b/docs/source/docs/background-color.blade.md
@@ -5,246 +5,15 @@ title: "Backgrounds"
 
 # Background Color
 
-<div class="subnav">
-    <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
+<div class="text-xl text-slate-light mb-4">
+    Utilities for controlling an element's background color.
 </div>
 
-<h2 id="colors">Colors</h2>
+@include('_partials.feature-badges', [
+    'responsive' => true,
+    'customizable' => true,
+    'hover' => true,
+    'focus' => false
+])
 
-
-<div class="flex flex-wrap -mx-4 mb-4">
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
-        .bg-slate-lighter
-      </div>
-      <div class="text-white bg-slate-light px-6 py-4 text-sm">
-        .bg-slate-light
-      </div>
-      <div class="text-white bg-slate px-6 py-4 text-sm">
-        .bg-slate
-      </div>
-      <div class="text-white bg-slate-dark px-6 py-4 text-sm">
-        .bg-slate-dark
-      </div>
-      <div class="text-white bg-slate-darker px-6 py-4 text-sm">
-        .bg-slate-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
-        .bg-smoke-lighter
-      </div>
-      <div class="text-slate-dark bg-smoke-light px-6 py-4 text-sm">
-        .bg-smoke-light
-      </div>
-      <div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
-        .bg-smoke
-      </div>
-      <div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
-        .bg-smoke-dark
-      </div>
-      <div class="text-white bg-smoke-darker px-6 py-4 text-sm">
-        .bg-smoke-darker
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="flex flex-wrap -mx-4 mb-4">
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-red bg-red-lighter px-6 py-4 text-sm">
-        .bg-red-lighter
-      </div>
-      <div class="text-white bg-red-light px-6 py-4 text-sm">
-        .bg-red-light
-      </div>
-      <div class="text-white bg-red px-6 py-4 text-sm">
-        .bg-red
-      </div>
-      <div class="text-white bg-red-dark px-6 py-4 text-sm">
-        .bg-red-dark
-      </div>
-      <div class="text-white bg-red-darker px-6 py-4 text-sm">
-        .bg-red-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
-        .bg-orange-lighter
-      </div>
-      <div class="text-orange-darker bg-orange-light px-6 py-4 text-sm">
-        .bg-orange-light
-      </div>
-      <div class="text-orange-darker bg-orange px-6 py-4 text-sm">
-        .bg-orange
-      </div>
-      <div class="text-white bg-orange-dark px-6 py-4 text-sm">
-        .bg-orange-dark
-      </div>
-      <div class="text-white bg-orange-darker px-6 py-4 text-sm">
-        .bg-orange-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
-        .bg-yellow-lighter
-      </div>
-      <div class="text-yellow-darker bg-yellow-light px-6 py-4 text-sm">
-        .bg-yellow-light
-      </div>
-      <div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
-        .bg-yellow
-      </div>
-      <div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
-        .bg-yellow-dark
-      </div>
-      <div class="text-white bg-yellow-darker px-6 py-4 text-sm">
-        .bg-yellow-darker
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="flex flex-wrap -mx-4 mb-4">
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
-        .bg-green-lighter
-      </div>
-      <div class="text-green-darker bg-green-light px-6 py-4 text-sm">
-        .bg-green-light
-      </div>
-      <div class="text-white bg-green px-6 py-4 text-sm">
-        .bg-green
-      </div>
-      <div class="text-white bg-green-dark px-6 py-4 text-sm">
-        .bg-green-dark
-      </div>
-      <div class="text-white bg-green-darker px-6 py-4 text-sm">
-        .bg-green-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
-        .bg-teal-lighter
-      </div>
-      <div class="text-teal-darker bg-teal-light px-6 py-4 text-sm">
-        .bg-teal-light
-      </div>
-      <div class="text-white bg-teal px-6 py-4 text-sm">
-        .bg-teal
-      </div>
-      <div class="text-white bg-teal-dark px-6 py-4 text-sm">
-        .bg-teal-dark
-      </div>
-      <div class="text-white bg-teal-darker px-6 py-4 text-sm">
-        .bg-teal-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
-        .bg-blue-lighter
-      </div>
-      <div class="text-blue-darker bg-blue-light px-6 py-4 text-sm">
-        .bg-blue-light
-      </div>
-      <div class="text-white bg-blue px-6 py-4 text-sm">
-        .bg-blue
-      </div>
-      <div class="text-white bg-blue-dark px-6 py-4 text-sm">
-        .bg-blue-dark
-      </div>
-      <div class="text-white bg-blue-darker px-6 py-4 text-sm">
-        .bg-blue-darker
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="flex flex-wrap -mx-4 mb-4">
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
-        .bg-indigo-lighter
-      </div>
-      <div class="text-indigo-darker bg-indigo-light px-6 py-4 text-sm">
-        .bg-indigo-light
-      </div>
-      <div class="text-white bg-indigo px-6 py-4 text-sm">
-        .bg-indigo
-      </div>
-      <div class="text-white bg-indigo-dark px-6 py-4 text-sm">
-        .bg-indigo-dark
-      </div>
-      <div class="text-white bg-indigo-darker px-6 py-4 text-sm">
-        .bg-indigo-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
-        .bg-purple-lighter
-      </div>
-      <div class="text-purple-darker bg-purple-light px-6 py-4 text-sm">
-        .bg-purple-light
-      </div>
-      <div class="text-white bg-purple px-6 py-4 text-sm">
-        .bg-purple
-      </div>
-      <div class="text-white bg-purple-dark px-6 py-4 text-sm">
-        .bg-purple-dark
-      </div>
-      <div class="text-white bg-purple-darker px-6 py-4 text-sm">
-        .bg-purple-darker
-      </div>
-    </div>
-  </div>
-  <div class="w-full md:w-1/3 px-4">
-    <div class="rounded overflow-hidden">
-      <div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
-        .bg-pink-lighter
-      </div>
-      <div class="text-pink-darker bg-pink-light px-6 py-4 text-sm">
-        .bg-pink-light
-      </div>
-      <div class="text-white bg-pink px-6 py-4 text-sm">
-        .bg-pink
-      </div>
-      <div class="text-white bg-pink-dark px-6 py-4 text-sm">
-        .bg-pink-dark
-      </div>
-      <div class="text-white bg-pink-darker px-6 py-4 text-sm">
-        .bg-pink-darker
-      </div>
-    </div>
-  </div>
-</div>
-
-Using the utilities in HTML:
-
-```html
-<div class="bg-white"></div>
-<div class="bg-smoke-lighter"></div>
-<div class="bg-smoke-light"></div>
-<div class="bg-smoke"></div>
-
-<div class="bg-slate-darker"></div>
-<div class="bg-slate-dark"></div>
-<div class="bg-slate"></div>
-<div class="bg-slate-light"></div>
-```
+@include('_partials.work-in-progress')