shipyard-framework 0.5.76 → 0.5.77

data/assets/stylesheets/shipyard/utilities/_typography.sass

@@ -18,7 +18,7 @@
 
 +component('bullet')
   margin: 0 5px
-  color: lighten($text-color-lightest, 20%)
+  color: text-color(.2)
   &-inverse
     +extend
     color: rgba(#fff,.4)
@@ -55,23 +55,38 @@
         text-overflow: clip
         overflow: visible
 
-  // Font Colors
+  // Text Colors
   &-normal
-    color: $text-color
+    color: $text-color-normal
   &-light
     color: $text-color-light
   &-lighter
     color: $text-color-lighter
   &-lightest
     color: $text-color-lightest
+  &-dark
+    color: $text-color-dark
+  &-darker
+    color: $text-color-darker
+  &-darkest
+    color: $text-color-darkest
+
+  // Inverse Text Colors
   &-inverse
-    color: #fff
+    &-lightest
+      color: rgba(#fff,1)
+    &-lighter
+      color: rgba(#fff,.9)
     &-light
       color: rgba(#fff,.8)
-    &-lighter
+    &-normal
       color: rgba(#fff,.7)
-    &-lightest
+    &-dark
       color: rgba(#fff,.6)
+    &-darker
+      color: rgba(#fff,.5)
+    &-darkest
+      color: rgba(#fff,.4)
 
   // Font Sizes
   +all-media-sizes

data/assets/stylesheets/shipyard/variables/_typography.sass

@@ -20,11 +20,13 @@ $font-size-sm: map-get($font-sizes, sm) !default
 $font-size-xs: map-get($font-sizes, xs) !default
 $font-size-xxs: map-get($font-sizes, xxs) !default
 $font: $normal 16px / 1.6 $font-family !default
-$text-color: $gray-darker !default
-$text-color-disabled: lighten($gray, 15%) !default
-$text-color-lightest: lighten($gray, 10%) !default
-$text-color-lighter: lighten($gray, 5%) !default
-$text-color-light: $gray !default
-$text-color-darkest: $gray-darker !default
-$text-color-darker: lighten($gray-darker, 4%) !default
-$text-color-dark: lighten($gray-darker, 7%) !default
+
+// Text Colors
+$text-color-base: saturate(darken($gray, 35%), 40%)
+$text-color-darkest: text-color(1) !default
+$text-color-darker: text-color(.9) !default
+$text-color-dark: text-color(.8) !default
+$text-color-normal: text-color(.7) !default
+$text-color-light: text-color(.6) !default
+$text-color-lighter: text-color(.5) !default
+$text-color-lightest: text-color(.4) !default

data/ci/sass_lint

@@ -0,0 +1,39 @@
+#!/bin/bash
+color_start="\033[32m"
+color_end="\033[m"
+if [[ $CI_NAME = "codeship" ]]
+then
+  repository="git@github.com:codeship/shipyard.git"
+else
+  repository="https://github.com/codeship/shipyard.git"
+fi
+
+echo -e "************** Copy Master Branch **************"
+git clone $repository --branch master --single-branch ci/master-tmp
+
+echo -e "\n\n************** Compile Sass **************"
+bundle exec sass --no-cache --style compact assets/stylesheets/_shipyard.sass ci/master-tmp/branch-compact.css
+bundle exec sass --no-cache --style compressed assets/stylesheets/_shipyard.sass ci/master-tmp/branch-compressed.css
+bundle exec sass --no-cache --style compact ci/master-tmp/assets/stylesheets/_shipyard.sass ci/master-tmp/master-compact.css
+bundle exec sass --no-cache --style compressed ci/master-tmp/assets/stylesheets/_shipyard.sass ci/master-tmp/master-compressed.css
+
+echo -e "\n\n************** CSS Output Filesize **************"
+branch_compact=$(ls -lah ci/master-tmp/branch-compact.css | awk '{ printf $5 }')
+branch_compressed=$(ls -lah ci/master-tmp/branch-compressed.css | awk '{ printf $5 }')
+branch_compressed_int=${branch_compressed//[a-zA-Z]/}
+master_compact=$(ls -lah ci/master-tmp/master-compact.css | awk '{ printf $5 }')
+master_compressed=$(ls -lah ci/master-tmp/master-compressed.css | awk '{ printf $5 }')
+master_compressed_int=${master_compressed//[a-zA-Z]/}
+
+printf "Branch Compact:$color_start $branch_compact $color_end\n"
+printf "Master Compact:$color_start $master_compact $color_end\n"
+printf "Branch Compressed:$color_start $branch_compressed $color_end\n"
+printf "Master Compressed:$color_start $master_compressed $color_end\n"
+printf "Difference:$color_start $(($branch_compressed_int - $master_compressed_int)) $color_end\n"
+
+echo -e "\n\n************** CSS Output Line Count **************"
+branch_lines=$(wc -l ci/master-tmp/branch-compact.css | awk '{ printf $1 }')
+master_lines=$(wc -l ci/master-tmp/master-compact.css | awk '{ printf $1 }')
+printf "Branch:$color_start $branch_lines $color_end\n"
+printf "Master:$color_start $master_lines $color_end\n"
+printf "Difference:$color_start $(($branch_lines - $master_lines)) $color_end\n"

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.76'
+  VERSION = '0.5.77'
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.76)
+    shipyard-framework (0.5.77)
       actionview (~> 5.0)
       sprockets-es6 (~> 0.9.2)
 

data/styleguide/components/buttons.md

@@ -125,12 +125,16 @@ The button classes can be applied to any type of html tag to achieve the desired
   {% btn Button %}
   <a href="#" class="btn">Link</a>
   <input type="button" class="btn" value="Input" />
+  <input type="submit" class="btn" value="Submit" />
+  <input type="reset" class="btn" value="Reset" />
 </div>
 
 ```html
 {% btn Button %}
 <a href="#" class="btn">Link</a>
 <input type="button" class="btn" value="Input" />
+<input type="submit" class="btn" value="Input" />
+<input type="reset" class="btn" value="Input" />
 ```
 
 ---

data/styleguide/components/checkboxes.md

@@ -13,7 +13,8 @@ labels:
 ---
 
 ## Inline Checkbox Lists
-<p class="text-light margin-bottom-md">Useful when you want to group a series of checkboxes together on a single line.</p>
+Useful when you want to group a series of checkboxes together on a single line.
+{: .section-description }
 
 <ul class="input-list margin-bottom-lg">
   {% for label in page.labels %}
@@ -36,7 +37,8 @@ labels:
 ---
 
 ## Stacked Checkbox Lists
-<p class="text-light margin-bottom-md">Useful when you want to group a series of checkboxes together in a list (stacked by default).</p>
+Useful when you want to group a series of checkboxes together in a list (stacked by default).
+{: .section-description }
 
 <div class="col-container margin-bottom-sm margin-bottom-x1-lg">
   <div class="col col-100 col-x1-50 margin-bottom-sm margin-bottom-x1-none">
@@ -64,6 +66,7 @@ labels:
     </div>
   </div>
 </div>
+
 ```html
 <ul class="input-list">
   <li class="input-item">
@@ -76,7 +79,8 @@ labels:
 ---
 
 ## Inverse Checkbox Lists
-<p class="text-light margin-bottom-md">Useful when the checkboxes are displayed on a dark background.</p>
+Useful when the checkboxes are displayed on a dark background.
+{: .section-description }
 
 <div class="box-secondary box-padding bg-gray-darker">
   <ul class="input-list">
@@ -100,6 +104,30 @@ labels:
 
 ---
 
+## Caution Checkbox Lists
+Useful when you want to the user to proceed with caution about the choices they're making.
+{: .section-description }
+
+<ul class="input-list">
+  {% for label in page.labels %}
+    <li class="input-item">
+      <input id="checkbox-caution-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox input-checkbox-caution" {% if forloop.index == 1 %}checked{% endif %} />
+      <label for="checkbox-caution-{{ forloop.index }}" class="input-label">{{ label }}</label>
+    </li>
+  {% endfor %}
+</ul>
+
+```html
+<ul class="input-list">
+  <li class="input-item">
+    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox input-checkbox-caution" checked />
+    <label for="checkbox-id" class="input-label">Checkbox Label</label>
+  </li>
+</ul>
+```
+
+---
+
 ## Checkboxes Nested in Buttons
 {: .margin-bottom-md }
 
@@ -137,7 +165,8 @@ labels:
 ---
 
 ## Checkbox-Switches
-<p class="text-light margin-bottom-md">Switches are useful when the user has a choice to toggle on and off. Note: For the best UX, please make sure that the switch saves immediately each time it changes state.</p>
+Switches are useful when the user has a choice to toggle on and off. Note: For the best UX, please make sure that the switch saves immediately each time it changes state.
+{: .section-description }
 
 <div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
   <div class="col-container-nowrap">
@@ -155,6 +184,7 @@ labels:
     </div>
   </div>
 </div>
+
 ```html
 <input type="checkbox" class="input input-switch" />
 ```
@@ -162,7 +192,8 @@ labels:
 ---
 
 ## Secondary Checkbox-Switches
-<p class="text-light margin-bottom-md">Useful when you don't need to draw attention to the bright-red, off state.</p>
+Useful when you don't need to draw attention to the bright-red, off state.
+{: .section-description }
 
 <div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
   <div class="col-container-nowrap">
@@ -187,7 +218,9 @@ labels:
 ---
 
 ## Checkbox-Switch Sizes `input-switch-{ x1..x4 }-{ sm..xl }`
-<p class="text-light margin-bottom-md">Each size can be used or altered at any breakpoint.</p>
+Each size can be used or altered at any breakpoint.
+{: .section-description }
+
 <ul class="input-list">
   <li class="input-item">
     <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-sm align-middle" checked />

data/styleguide/components/forms.md

@@ -9,15 +9,15 @@ title: Shipyard Forms
 <div class="col-container input-group">
   <div class="col col-100 col-x1-33 margin-bottom-sm margin-bottom-x1-none">
     <label class="label">Textbox</label>
-    <input type="text" class="input input-text input-full" placeholder=".input-text" />
+    <input type="text" class="input input-text" placeholder=".input-text" />
   </div>
   <div class="col col-100 col-x1-33 margin-bottom-sm margin-bottom-x1-none">
     <label class="label">Textbox Read-Only</label>
-    <input type="text" class="input input-text input-full input-readonly" placeholder=".input-readonly" value="copy-paste-me" readonly />
+    <input type="text" class="input input-text input-readonly" placeholder=".input-readonly" value="copy-paste-me" readonly />
   </div>
   <div class="col col-100 col-x1-33 margin-bottom-sm margin-bottom-x1-none">
     <label class="label">Textbox Disabled</label>
-    <input type="text" class="input input-text input-full" placeholder=".input-text" disabled />
+    <input type="text" class="input input-text" placeholder=".input-text" disabled />
   </div>
 </div>
 ```html
@@ -36,9 +36,9 @@ title: Shipyard Forms
 ## Connected Textboxes
 
 <div class="input-group">
-  <input type="text" class="input input-text input-full input-text-connect-top" placeholder=".input-text-connect-top" />
-  <input type="text" class="input input-text input-full input-text-connect-middle" placeholder=".input-text-connect-middle" />
-  <input type="text" class="input input-text input-full input-text-connect-bottom" placeholder=".input-text-connect-bottom" />
+  <input type="text" class="input input-text input-text-connect-top" placeholder=".input-text-connect-top" />
+  <input type="text" class="input input-text input-text-connect-middle" placeholder=".input-text-connect-middle" />
+  <input type="text" class="input input-text input-text-connect-bottom" placeholder=".input-text-connect-bottom" />
 </div>
 
 ```html
@@ -63,7 +63,7 @@ title: Shipyard Forms
   </div>
   <div class="col">
     <label class="label">Select Box Disabled</label>
-    <div class="input-select-container">
+    <div class="input-select-container input-select-container-disabled">
       <select class="input input-select" disabled>
         <option class="input-option-placeholder">.input-select</option>
         {% for i in (1..10) %}
@@ -79,14 +79,14 @@ title: Shipyard Forms
 <div class="input-group">
   <label class="label">Textbox</label>
   <p class="label-note">Some critically important notes about this field.</p>
-  <input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
+  <input type="text" class="input input-text" placeholder=".input .input-text" />
 </div>
 
 ---
 
 <h2 class="margin-bottom-xs">Input Boxes</h2>
 <div class="input-box">
-  <input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
+  <input type="text" class="input input-text" placeholder=".input .input-text" />
 </div>
 
 ---
@@ -95,7 +95,7 @@ title: Shipyard Forms
 <div class="col-container">
   <div class="col col-50">
     <div class="input-required">
-      <input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
+      <input type="text" class="input input-text" placeholder=".input .input-text" />
     </div>
   </div>
   <div class="col col-50">
@@ -145,7 +145,7 @@ title: Shipyard Forms
   <div class="col col-50 input-error">
     <label class="label">Required Textbox</label>
     <div class="input-required">
-      <input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
+      <input type="text" class="input input-text" placeholder=".input .input-text" />
     </div>
   </div>
 </div>

data/styleguide/components/horizontal-rules.md

@@ -52,7 +52,8 @@ text_shades: [normal, light, lighter, lightest]
 ---
 
 ## Dark Horizontal Rules
-<p class="text-light margin-bottom-md" markdown="1">Useful when you have a horizontal rule on a darker background.</p>
+Useful when you have a horizontal rule on a darker background.
+{: .section-description }
 
 <div class="utilities-typography-hr-box-dark">
   <hr class="utilities-typography-hr hr-dark" />
@@ -64,7 +65,8 @@ text_shades: [normal, light, lighter, lightest]
 ---
 
 ## Light Horizontal Rules
-<p class="text-light margin-bottom-md" markdown="1">Useful when you have a horizontal rule on a lighter background.</p>
+Useful when you have a horizontal rule on a lighter background.
+{: .section-description }
 
 <div class="utilities-typography-hr-box-light">
   <hr class="utilities-typography-hr hr-light" />

data/styleguide/components/icons.md

@@ -8,7 +8,8 @@ description: Shipyard comes with several default icons that you're welcome to us
 ---
 
 ### Common Icons
-<p class="text-light margin-bottom-md" markdown="1">The following icons are the most frequently used in just about any application.</p>
+The following icons are the most frequently used in just about any application.
+{: .section-description }
 
 <ul class="icon-list col-container">
   {% iconitem :plus, class: 'center' %}
@@ -19,12 +20,14 @@ description: Shipyard comes with several default icons that you're welcome to us
   {% iconitem :tag, class: 'center' %}
   {% iconitem :x, class: 'center' %}
   {% iconitem :arrow_down, class: 'center' %}
+  {% iconitem :check, class: 'center' %}
 </ul>
 
 ---
 
 ### Brand Icons
-<p class="text-light margin-bottom-md" markdown="1">If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.</p>
+If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.
+{: .section-description }
 
 <ul class="icon-list col-container">
   {% iconitem 'bitbucket-white', class: 'center icon-xl' %}
@@ -50,7 +53,8 @@ description: Shipyard comes with several default icons that you're welcome to us
 ---
 
 ### Multi-color Icons
-<p class="text-light margin-bottom-md" markdown="1">If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.</p>
+If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.
+{: .section-description }
 
 <ul class="icon-list col-container">
   {% iconitem 'email-color', class: 'icon-xl center' %}
@@ -62,7 +66,8 @@ description: Shipyard comes with several default icons that you're welcome to us
 ---
 
 ### Icon Sizes
-<p class="text-light margin-bottom-md">The icon size utility classes can be applied to any icon, and are useful when you want to override the default icon size.</p>
+The icon size utility classes can be applied to any icon, and are useful when you want to override the default icon size.
+{: .section-description }
 
 <ul class="icon-list col-container">
   {% iconitem :gear, class: 'center icon-xxs' %}
@@ -85,7 +90,8 @@ description: Shipyard comes with several default icons that you're welcome to us
 ---
 
 ### Centered Icons
-<p class="text-light margin-bottom-md" markdown="1">One of the most common problems when using an icon is that doesn't line up with the text content next to it. Don't worry though, we've got you covered — simply apply the `.align-middle` class to any icon to fix this issue.</p>
+One of the most common problems when using an icon is that doesn't line up with the text content next to it. Don't worry though, we've got you covered — simply apply the `.align-middle` class to any icon to fix this issue.
+{: .section-description }
 
 <div class="margin-bottom-lg">
   <button class="btn btn-secondary">{% icon :plus, class: 'align-middle icon-sm margin-right-xxs' %} Create</button>

data/styleguide/components/modals/_modal.html

@@ -9,46 +9,46 @@
           <div class="col">
             <label class="label">First Name</label>
             <div class="input-required">
-              <input type="text" class="input input-text input-full" />
+              <input type="text" class="input input-text" />
             </div>
           </div>
           <div class="col">
             <label class="label">Last Name</label>
             <div class="input-required">
-              <input type="text" class="input input-text input-full" />
+              <input type="text" class="input input-text" />
             </div>
           </div>
         </div>
         <div class="col-container margin-bottom-md">
           <div class="col col-100 col-x1-50 margin-bottom-sm margin-bottom-x1-none">
             <label class="label">Email Address</label>
-            <input type="text" class="input input-text input-full" />
+            <input type="text" class="input input-text" />
           </div>
           <div class="col col-100 col-x1-50">
             <label class="label">Phone Number</label>
             <div class="input-required">
-              <input type="text" class="input input-text input-full" />
+              <input type="text" class="input input-text" />
             </div>
           </div>
         </div>
         <div class="col-container margin-bottom-md">
           <div class="col col-100 margin-bottom-sm">
             <label class="label">Billing Address</label>
-            <input type="text" class="input input-text input-full" placeholder="Company Name" />
+            <input type="text" class="input input-text" placeholder="Company Name" />
           </div>
           <div class="col col-100 margin-bottom-sm">
-            <input type="text" class="input input-text input-full" placeholder="Street Address" />
+            <input type="text" class="input input-text" placeholder="Street Address" />
           </div>
           <div class="col col-100 col-x1-33 margin-bottom-sm">
             <div class="input-required">
-              <input type="text" class="input input-text input-full" placeholder="Postal Code" />
+              <input type="text" class="input input-text" placeholder="Postal Code" />
             </div>
           </div>
           <div class="col col-50 col-x1-33 margin-bottom-sm">
-            <input type="text" class="input input-text input-full" placeholder="City" />
+            <input type="text" class="input input-text" placeholder="City" />
           </div>
           <div class="col col-50 col-x1-33 margin-bottom-sm">
-            <input type="text" class="input input-text input-full" placeholder="State" />
+            <input type="text" class="input input-text" placeholder="State" />
           </div>
           <div class="col col-100">
             <div class="input-required">
@@ -67,14 +67,14 @@
         <div class="col-container margin-bottom-md">
           <div class="col">
             <label class="label">Tax Information</label>
-            <input type="text" class="input input-text input-full" placeholder="VAT Number" />
+            <input type="text" class="input input-text" placeholder="VAT Number" />
           </div>
         </div>
         <div class="col-container margin-bottom-sm margin-bottom-x1-none">
           <div class="col">
             <label class="label">Additional Invoice Information</label>
             <p class="label-note">This information will appear on each invoice. Don't include any confidential financial information.</p>
-            <input type="text" class="input input-text input-full" placeholder="e.g. Invoice notes, accounts payable info, additional address info, etc..." />
+            <input type="text" class="input input-text" placeholder="e.g. Invoice notes, accounts payable info, additional address info, etc..." />
           </div>
         </div>
       </form>

data/styleguide/components/modals/example-billing.html

@@ -35,25 +35,25 @@ title: Shipyard Modal Example
       </div>
       <form>
         <div class="input-required">
-          <input type="text" class="input input-text input-full" placeholder="Card Number" />
+          <input type="text" class="input input-text" placeholder="Card Number" />
         </div>
         <div class="col-container margin-top-md">
           <div class="col col-50 col-x1-33">
             <label class="label">Expiry Date</label>
             <div class="input-required">
-              <input type="text" class="input input-text input-full" placeholder="MM/YYYY" />
+              <input type="text" class="input input-text" placeholder="MM/YYYY" />
             </div>
           </div>
           <div class="col col-50 col-x1-33">
             <label class="label">CCV</label>
             <div class="input-required">
-              <input type="text" class="input input-text input-full" placeholder="3 or 4 digits" />
+              <input type="text" class="input input-text" placeholder="3 or 4 digits" />
             </div>
           </div>
           <div class="col col-100 col-x1-33 margin-top-md margin-top-x1-none margin-bottom-sm margin-bottom-x1-none">
             <label class="label">Zip Code</label>
             <div class="input-required">
-              <input type="text" class="input input-text input-full" />
+              <input type="text" class="input input-text" />
             </div>
           </div>
         </div>

data/styleguide/components/modals/example-survey.html

@@ -37,7 +37,7 @@ answers:
         </ul>
         <div class="input-group">
           <label class="label">Please provide additional details:</label>
-          <textarea class="input input-text input-full input-lg" placeholder="How could we have made your experience better?"></textarea>
+          <textarea class="input input-text input-lg" placeholder="How could we have made your experience better?"></textarea>
         </div>
       </form>
     </div>

data/styleguide/components/notes.md

@@ -8,7 +8,8 @@ description: Notes should be used to grab a user's attention along side of other
 ---
 
 ### Default `.note`
-<p class="text-light margin-bottom-sm">Used to display notes, tips, and other non-critical information.</p>
+Used to display notes, tips, and other non-critical information.
+{: .section-description }
 
 {% note %}
   <p markdown="1">
@@ -21,7 +22,8 @@ description: Notes should be used to grab a user's attention along side of other
 ---
 
 ### Info `.note-info`
-<p class="text-light margin-bottom-sm">Useful when drawing attention to non-critical information or actions we want the user to take.</p>
+Useful when drawing attention to non-critical information or actions we want the user to take.
+{: .section-description }
 
 {% note :info %}
   <p markdown="1">
@@ -34,7 +36,8 @@ description: Notes should be used to grab a user's attention along side of other
 ---
 
 ### Success `.note-success`
-<p class="text-light margin-bottom-sm">Useful when drawing attention to interactions that have produced successful results.</p>
+Useful when drawing attention to interactions that have produced successful results.
+{: .section-description }
 
 {% note :success %}
   <p markdown="1">
@@ -47,7 +50,8 @@ description: Notes should be used to grab a user's attention along side of other
 ---
 
 ### Warning `.note-warning`
-<p class="text-light margin-bottom-sm">Useful when drawing attention to critical information.</p>
+Useful when drawing attention to critical information.
+{: .section-description }
 
 {% note :warning %}
   <p markdown="1">

data/styleguide/components/radio-buttons.md

@@ -13,7 +13,8 @@ labels:
 ---
 
 ## Inline Radio-Button Lists
-<p class="text-light margin-bottom-md">Useful when you want to group a series of radio buttons together on a single line.</p>
+Useful when you want to group a series of radio buttons together on a single line.
+{: .section-description }
 
 <ul class="input-list margin-bottom-lg">
   {% for label in page.labels %}
@@ -36,7 +37,8 @@ labels:
 ---
 
 ## Stacked Radio-Button Lists
-<p class="text-light margin-bottom-md">Useful when you want to group a series of radio buttons together in a list (stacked by default).</p>
+Useful when you want to group a series of radio buttons together in a list (stacked by default).
+{: .section-description }
 
 <div class="col-container margin-bottom-sm margin-bottom-x1-lg">
   <div class="col col-100 col-x1-50 margin-bottom-sm margin-bottom-x1-none">
@@ -77,7 +79,9 @@ labels:
 ---
 
 ## Inverse Radio-Button Lists
-<p class="text-light margin-bottom-md">Useful when the radio buttons are displayed on a dark background.</p>
+Useful when the radio buttons are displayed on a dark background.
+{: .section-description }
+
 <div class="box-secondary box-padding bg-gray-darker">
   <ul class="input-list">
     {% for label in page.labels %}
@@ -100,8 +104,33 @@ labels:
 
 ---
 
+## Caution Radio-Button Lists
+Useful when you want to the user to proceed with caution about the choices they're making.
+{: .section-description }
+
+<ul class="input-list">
+  {% for label in page.labels %}
+    <li class="input-item">
+      <input id="radio-caution-{{ forloop.index }}" name="radio-caution-list" type="radio" class="input input-radio input-radio-caution" {% if forloop.index == 1 %}checked{% endif %} />
+      <label for="radio-caution-{{ forloop.index }}" class="input-label">{{ label }}</label>
+    </li>
+  {% endfor %}
+</ul>
+
+```html
+<ul class="input-list">
+  <li class="input-item">
+    <input id="radio-id" name="radio-name" type="radio" class="input input-radio input-radio-caution" checked />
+    <label for="radio-id" class="input-label">Radio Button Caution Label</label>
+  </li>
+</ul>
+```
+
+---
+
 ## Radio-Checkbox Button Lists
-<p class="text-light margin-bottom-md">Yep, that's exactly what it sounds like. It behaves like a radio button but looks a bit like a checkbox. Fancy!</p>
+Yep, that's exactly what it sounds like. It behaves like a radio button but looks a bit like a checkbox. Fancy!
+{: .section-description }
 
 <ul class="input-list">
   {% for label in page.labels %}