Move badges into yaml

docs/source/_layouts/documentation.blade.php

@@ -198,6 +198,10 @@
                     </div>
                     @endif
 
+                    @if($page->features)
+                        @include('_partials.feature-badges', $page->features->toArray())
+                    @endif
+
                     @yield('content')
                 </div>
             </div>

docs/source/docs/background-color.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Background Color"
 description: "Utilities for controlling an element's background color."
+features:
+  responsive: true
+  customizable: true
+  hover: true
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => true,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">

docs/source/docs/background-position.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Background Position"
 description: "Utilities for controlling the position of an element's background image."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">

docs/source/docs/background-size.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Background Size"
 description: "Utilities for controlling the background size of an element's background image."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">

docs/source/docs/border-color.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Border Color"
 description: "Utilities for controlling the color of an element's borders."
+features:
+  responsive: true
+  customizable: true
+  hover: true
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => true,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">

docs/source/docs/border-radius.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Border Radius"
 description: "Utilities for controlling the border radius of an element."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse; table-layout: fixed;">
         <colgroup>

docs/source/docs/border-style.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Border Style"
 description: "Utilities for controlling the style of an element's borders."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">

docs/source/docs/border-width.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Border Width"
 description: "Utilities for controlling the width an element's borders."
+features:
+  responsive: true
+  customizable: true
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => true,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 Add borders to any element using the `.border{-side?}{-width?}` syntax.

docs/source/docs/cursor.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Cursor"
 description: "Utilities for controlling the cursor style when hovering over an element."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">

docs/source/docs/display.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Display"
 description: "Utilities for controlling the display box type of an element."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">

docs/source/docs/flexbox-align-content.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Align Content"
 description: "Utilities for controlling how lines are positioned in multi-line flex containers."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
         <colgroup>

docs/source/docs/flexbox-align-items.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Align Items"
 description: "Utilities for controlling how flex items are positioned along a container's cross axis."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
         <colgroup>

docs/source/docs/flexbox-align-self.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Align Self"
 description: "Utilities for controlling how an individual flex item is positioned along its container's cross axis."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
         <thead>

docs/source/docs/flexbox-direction.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Flex Direction"
 description: "Utilities for controlling the direction of flex items."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
         <thead>

docs/source/docs/flexbox-display.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Flex Display"
 description: "Utilities for creating flex containers."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
         <thead>

docs/source/docs/flexbox-flex-grow-shrink.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Flex, Grow, & Shrink"
 description: "Utilities for controlling how flex items grow and shrink."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
         <thead>

docs/source/docs/flexbox-justify-content.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Justify Content"
 description: "Utilities for controlling flex items are positioned along a container's main axis."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
         <colgroup>

docs/source/docs/flexbox-wrapping.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Flex Wrapping"
 description: "Utilities for controlling how flex items wrap."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 <div class="border-t border-grey-lighter">
     <table class="w-full text-left" style="border-collapse: collapse;">
         <thead>

docs/source/docs/floats.blade.md

@@ -2,15 +2,13 @@
 extends: _layouts.documentation
 title: "Floats"
 description: "Utilities for controlling the wrapping of content around an element."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
 ---
 
-@include('_partials.feature-badges', [
-    'responsive' => true,
-    'customizable' => false,
-    'hover' => false,
-    'focus' => false
-])
-
 @include('_partials.work-in-progress')
 
 <div class="border-t border-grey-lighter">