shipyard-framework 0.5.87 → 0.6.0

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

@@ -1,19 +0,0 @@
----
-title: Shipyard Modal Example
----
-
-{% include page-heading.html page=page %}
-
-<div class="modal-container" modal="example-small">
-  <div class="modal modal-sm" role="dialog">
-    <div class="modal-content">
-      <div class="modal-title">
-        <h1 class="text-lg text-x1-xl">Trial Requested</h1>
-      </div>
-      <p class="text-light">Your request has been sent to our support team who will be in touch with you shortly to confirm the trial. In the meantime, you’ll stay on the configuration that your team was previously subscribed to.</p>
-    </div>
-    <div class="modal-ctas">
-      <button class="btn btn-primary btn-sm btn-x1-md" modal-close>Okay, thanks!</button>
-    </div>
-  </div>
-</div>

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

@@ -1,52 +0,0 @@
----
-title: Shipyard Modal Example
-answers:
-  - We're happy with Codeship, but we don't need it anymore.
-  - We've chosen another CI/CD provider.
-  - Codeship is too expensive for our needs.
-  - Codeship is missing a feature that we needed.
-  - We're unsatisfied with our experience.
----
-
-{% include page-heading.html page=page %}
-
-<div class="modal-container" modal="example-small">
-  <div class="modal modal-sm modal-billing" role="dialog">
-    <div class="alert alert-success mb-0 rounded-top medium text-sm">
-      We'd like to offer you
-      <span class="modal-downgrade-coupon code-inline strong"><span class="modal-downgrade-tag bg-green-dark mr-0 rounded-left">{% icon :tag, class: 'align-middle modal-downgrade-tag-icon' %}</span><span class="modal-downgrade-coupon-txt">50% OFF</span></span>
-      one month if you decide to stay.
-      <button class="alert-cta btn btn-cta btn-sm" modal-close>Apply Discount</button>
-    </div>
-    <div class="modal-content rounded-0">
-      <div class="modal-title">
-        <h1 class="text-lg text-x1-xl">Codeship Basic Downgrade</h1>
-      </div>
-      <p class="text-light mb-20">
-        We'd appreciate it if you would take a moment to share your thoughts
-        and experience on why Codeship wasn't a good fit for your team.
-      </p>
-      <form>
-        <ul class="input-list">
-          {% for answer in page.answers %}
-            <li class="input-item">
-              <input id="checkbox-{{ forloop.index }}" name="checkbox-name" type="checkbox" class="input input-checkbox" />
-              <label for="checkbox-{{ forloop.index }}" class="input-label">{{ answer }}</label>
-            </li>
-          {% endfor %}
-        </ul>
-        <div class="input-group">
-          <label class="label">Please provide additional details:</label>
-          <textarea class="input input-text input-lg" placeholder="How could we have made your experience better?"></textarea>
-        </div>
-      </form>
-    </div>
-    <div class="modal-ctas">
-      <button class="btn btn-caution btn-sm btn-x1-md mr-5 mr-x1-10" modal-close>
-        <span class="display-none display-x1-inline">Confirm</span> Downgrade
-      </button>
-      <button class="btn btn-cta btn-sm btn-x1-md mr-5 mr-x1-10" modal-close>Apply Discount</button>
-      <button class="btn btn-secondary btn-sm btn-x1-md" modal-close>Cancel</button>
-    </div>
-  </div>
-</div>

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

@@ -1,6 +0,0 @@
----
-title: Shipyard Modals
----
-
-{% include page-heading.html page=page %}
-{% include_relative _modal.html %}

data/styleguide/components/modals/index.md

@@ -1,41 +0,0 @@
----
-title: Shipyard Modals
-description: Modals are triggered by applying the following attribute to any button or link (e.g. `modal-trigger="login"`).
-sass_file: shipyard/components/_modals
----
-
-{% include page-heading.html page=page %}
-
----
-
-<div class="col-container-x1-nowrap">
-  <div class="col col-100">
-    <h3 class="col-100">Building Modals</h3>
-    <p class="text-light mb-15">Useful when you need to draw attention to information that requires additional action.</p>
-  </div>
-  <div class="col">
-    <button class="btn btn-sm btn-x1-md btn-secondary white-space-nowrap" modal-trigger="example">Demo Modal</button>
-  </div>
-</div>
-
-```html
-<div class="modal-container">
-  <div class="modal" role="dialog">
-    <div class="modal-content">
-      <div class="modal-title">
-        <!-- Modal Title -->
-      </div>
-      <!-- Modal Content -->
-    </div>
-    <div class="modal-ctas">
-      {% btn Save, :primary %}
-      {% btn Cancel, :secondary %}
-    </div>
-  </div>
-</div>
-```
-
----
-
-{% include css-stats.html %}
-{% include_relative _modal.html css_class="display-none" %}

data/styleguide/components/notes.md

@@ -1,67 +0,0 @@
----
-title: Shipyard Notes
-description: Notes should be used to grab a user's attention along side of other content.
-sass_file: shipyard/components/_notes
----
-
-{% include page-heading.html page=page %}
-
----
-
-### Default `.note`
-Used to display notes, tips, and other non-critical information.
-{: .section-description }
-
-{% note %}
-  <p markdown="1">
-    Ten other people are also viewing tickets for [this flight](#).
-    Use the code `Travel_Light_2017` before you book your flight.
-  </p>
-  {% btn Call to Action, :sm, class: 'note-cta' %}
-{% endnote %}
-
----
-
-### Info `.note-info`
-Useful when drawing attention to non-critical information or actions we want the user to take.
-{: .section-description }
-
-{% note :info %}
-  <p markdown="1">
-    Ten other people are also viewing tickets for [this flight](#).
-    Use the code `Travel_Light_2017` before you book your flight.
-  </p>
-  {% btn Call to Action, :sm, class: 'note-cta' %}
-{% endnote %}
-
----
-
-### Success `.note-success`
-Useful when drawing attention to interactions that have produced successful results.
-{: .section-description }
-
-{% note :success %}
-  <p markdown="1">
-    Pack your bags! You'll be on the next flight to Hawaii.
-    Use the code `Travel_Light_2017` on your next flight. In the meantime you can [invite a friend](#) to this flight.
-  </p>
-  {% btn Call to Action, :sm, class: 'note-cta' %}
-{% endnote %}
-
----
-
-### Warning `.note-warning`
-Useful when drawing attention to critical information.
-{: .section-description }
-
-{% note :warning %}
-  <p markdown="1">
-    There are only 2 seats left on this flight! We recommend to [book your tickets](#) as soon as possible.
-    Use the code `Travel_Light_2017` before you book your flight.
-  </p>
-  {% btn Call to Action, :sm, class: 'note-cta' %}
-{% endnote %}
-
----
-
-{% include css-stats.html %}

data/styleguide/components/radio-buttons.md

@@ -1,195 +0,0 @@
----
-title: Radio Buttons
-labels:
-  - Nulla vitae elit libero, a pharetra augue.
-  - Cras mattis consectetur purus sit amet fermentum.
-  - Cum sociis natoque penatibus et magnis dis parturient montes.
-  - Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.
-  - Donec id elit non mi porta gravida at eget metus.
----
-
-{% include page-heading.html page=page %}
-
----
-
-## Inline Radio-Button Lists
-Useful when you want to group a series of radio buttons together on a single line.
-{: .section-description }
-
-<ul class="input-list mb-30">
-  {% for label in page.labels %}
-    <li class="input-item-inline">
-      <input id="radio-inline-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
-      <label for="radio-inline-{{ forloop.index }}" class="input-label">Inline Label</label>
-    </li>
-  {% endfor %}
-</ul>
-
-```html
-<ul class="input-list">
-  <li class="input-item-inline">
-    <input id="radio-id" name="radio-name" type="radio" class="input input-radio" checked />
-    <label for="radio-id" class="input-label">Radio Button Label</label>
-  </li>
-</ul>
-```
-
----
-
-## Stacked Radio-Button Lists
-Useful when you want to group a series of radio buttons together in a list (stacked by default).
-{: .section-description }
-
-<div class="col-container mb-15 mb-x1-30">
-  <div class="col col-100 col-x1-50 mb-15 mb-x1-0">
-    <div class="rounded bg-white box-padding">
-      <ul class="input-list">
-        {% for label in page.labels %}
-          <li class="input-item">
-            <input id="radio-light-{{ forloop.index }}" name="radio-light-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
-            <label for="radio-light-{{ forloop.index }}" class="input-label">{{ label }}</label>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  </div>
-  <div class="col col-100 col-x1-50">
-    <div class="box-secondary box-padding">
-      <ul class="input-list">
-        {% for label in page.labels %}
-          <li class="input-item">
-            <input id="radio-dark-{{ forloop.index }}" name="radio-dark-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
-            <label for="radio-dark-{{ forloop.index }}" class="input-label">{{ label }}</label>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  </div>
-</div>
-
-```html
-<ul class="input-list">
-  <li class="input-item">
-    <input id="radio-id" name="radio-name" type="radio" class="input input-radio" checked />
-    <label for="radio-id" class="input-label">Radio Button Label</label>
-  </li>
-</ul>
-```
-
----
-
-## Inverse Radio-Button Lists
-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 %}
-      <li class="input-item">
-        <input id="radio-inverse-{{ forloop.index }}" name="radio-inverse-list" type="radio" class="input input-radio input-radio-inverse" {% if forloop.index == 1 %}checked{% endif %} />
-        <label for="radio-inverse-{{ forloop.index }}" class="input-label-inverse">{{ label }}</label>
-      </li>
-    {% endfor %}
-  </ul>
-</div>
-
-```html
-<ul class="input-list">
-  <li class="input-item">
-    <input id="radio-id" name="radio-name" type="radio" class="input input-radio input-radio-inverse" checked />
-    <label for="radio-id" class="input-label-inverse">Radio Button Inverse Label</label>
-  </li>
-</ul>
-```
-
----
-
-## 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
-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 %}
-    <li class="input-item">
-      <input id="radio-checkbox-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
-      <label for="radio-checkbox-{{ 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-checkbox" checked />
-    <label for="radio-id" class="input-label">Radio Button Label</label>
-  </li>
-</ul>
-```
-
----
-
-## Radio Buttons Nested in Buttons
-{: .mb-20 }
-
-<button class="btn btn-secondary mr-10 mb-10">
-  <input type="radio" class="input input-radio mr-5" />
-  Unchecked
-</button>
-<button class="btn btn-secondary mr-10 mb-10">
-  <input type="radio" class="input input-radio mr-5" checked />
-  Checked
-</button>
-<button class="btn btn-secondary mr-10 mb-10">
-  <input type="radio" class="input input-radio-checkbox mr-5" checked />
-  Checked w/ Icon
-</button>
-<button class="btn btn-cta mr-10 mb-10">
-  <input type="radio" class="input input-radio input-radio-inverse mr-5" />
-  Inverse Unchecked
-</button>
-<button class="btn btn-cta mr-10 mb-10">
-  <input type="radio" class="input input-radio input-radio-inverse mr-5" checked />
-  Inverse Checked
-</button>
-<button class="btn btn-cta mr-10 mb-10">
-  <input type="radio" class="input input-radio-checkbox input-radio-inverse mr-10" checked />
-  Inverse Checked w/ Icon
-</button>
-
-```html
-<!-- Secondary button with a radio button in the unchecked state. -->
-<button class="btn btn-secondary">
-  <input type="radio" class="input input-radio mr-5" />
-  Button Text
-</button>
-
-<!-- CTA button with a radio-checkbox in the checked state. -->
-<button class="btn btn-cta">
-  <input type="radio" class="input input-radio-checkbox input-radio-inverse mr-5" checked />
-  Button Text
-</button>
-```

data/styleguide/components/statuses.md

@@ -1,324 +0,0 @@
----
-title: Shipyard Statuses
-sass_file: shipyard/components/_statuses
-statuses: [skipped, waiting, running, success, idle, error, fail]
----
-
-{% include page-heading.html page=page %}
-
----
-
-### Status Dots `.status-xs`
-Useful in tight spaces where it's still important to show status, but not important enough to compete for attention with other elements on the page.
-{: .section-description }
-
-<div class="mb-25">
-  {% for status in page.statuses -%}
-    <button class="btn btn-secondary btn-xs btn-rounded mr-5">
-      <span class="status status-xs status-{{ status }}"></span>
-      <span class="text-sm medium ml-xs text-{{ status }}">{{ status | capitalize }}</span>
-    </button>
-  {% endfor %}
-</div>
-
-```html
-{%- for status in page.statuses %}
-<span class="status status-xs status-{{ status }}"></span>
-<span class="text-{{ status }}">{{ status }}</span>
-{% endfor -%}
-```
-
----
-
-### Status Circles `.status-sm`
-Useful when next to standard text where where it's important to show the status of a particular object.
-{: .section-description }
-
-{% for status in page.statuses -%}
-  <button class="btn btn-secondary btn-sm btn-rounded mr-5">
-    <span class="status status-{{ status }} status-sm"></span>
-    <span class="text-md medium ml-xs text-{{ status }}">{{ status | capitalize }}</span>
-  </button>
-{% endfor %}
-
-```html
-{%- for status in page.statuses %}
-<span class="status status-sm status-{{ status }}"></span>
-<span class="text-{{ status }}">{{ status }}</span>
-{% endfor -%}
-```
-
----
-
-### Status Icons `.status-md`
-Useful when next to standard text where where it's important to show the status of a particular object.
-{: .section-description }
-
-<button tooltip="skipped" class="mr-5">
-  <span class="status status-skipped status-md">{% icon :skipped, prefix: 'status-md', class: 'status-icon' %}</span>
-</button>
-<button tooltip="waiting" class="mr-5">
-  <span class="status status-waiting status-md">{% icon 'waiting', prefix: 'status-md', class: 'status-icon' %}</span>
-</button>
-<button tooltip="running" class="mr-5">
-  <span class="status status-running status-md">{% icon :running, prefix: 'status-md', class: 'status-icon' %}</span>
-</button>
-<button tooltip="success" class="mr-5">
-  <span class="status status-success status-md">{% icon :success, prefix: 'status-md', class: 'status-icon' %}</span>
-</button>
-<button tooltip="idle" class="mr-5">
-  <span class="status status-idle status-md">{% icon :idle, prefix: 'status-md', class: 'status-icon' %}</span>
-</button>
-<button tooltip="error" class="mr-5">
-  <span class="status status-error status-md">{% icon :error, prefix: 'status-md', class: 'status-icon' %}</span>
-</button>
-<button tooltip="fail" class="mr-5">
-  <span class="status status-fail status-md">{% icon :fail, prefix: 'status-md', class: 'status-icon' %}</span>
-</button>
-
-```erb
-{%- for status in page.statuses %}
-<span class="status status-md status-{{ status }}">
-  <%= icon :{{ status }}, prefix: 'status-md', class: 'status-icon' %>
-</span>
-{% endfor -%}
-```
-
----
-
-### Inverse Status Icons `.status-inverse.status-md`
-Useful when next to standard text where where it's important to show the status of a particular object.
-{: .section-description }
-
-<div class="col-container m-0 align-center mb-30">
-  <div class="status-skipped-bg p-20 pl-0 pr-0 col rounded rounded-left" tooltip="skipped">
-    <span class="status status-inverse status-skipped status-md">
-      {% icon :skipped, prefix: 'status-md', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-waiting-bg p-20 pl-0 pr-0 col" tooltip="waiting">
-    <span class="status status-inverse status-waiting status-md">
-      {% icon 'waiting', prefix: 'status-md', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-running-bg p-20 pl-0 pr-0 col" tooltip="running">
-    <span class="status status-inverse status-running status-md">
-      {% icon :running, prefix: 'status-md', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-success-bg p-20 pl-0 pr-0 col" tooltip="success">
-    <span class="status status-inverse status-success status-md">
-      {% icon :success, prefix: 'status-md', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-idle-bg p-20 pl-0 pr-0 col" tooltip="idle">
-    <span class="status status-inverse status-idle status-md">
-      {% icon :idle, prefix: 'status-md', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-error-bg p-20 pl-0 pr-0 col" tooltip="error">
-    <span class="status status-inverse status-error status-md">
-      {% icon :error, prefix: 'status-md', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-fail-bg p-20 pl-0 pr-0 col rounded rounded-right" tooltip="fail">
-    <span class="status status-inverse status-fail status-md">
-      {% icon :fail, prefix: 'status-md', class: 'status-icon' %}
-    </span>
-  </div>
-</div>
-
-```erb
-{%- for status in page.statuses %}
-<span class="status status-inverse status-md status-{{ status }}">
-  <%= icon :{{ status }}, prefix: 'status-md', class: 'status-icon' %>
-</span>
-{% endfor -%}
-```
-
----
-
-### Large Status Icons `.status-lg`
-Useful when next to standard text where where it's important to show the status of a particular object.
-{: .section-description }
-
-<button tooltip="skipped" class="mr-5">
-  <span class="status status-skipped status-lg">{% icon :skipped, prefix: 'status-lg', class: 'status-icon' %}</span>
-</button>
-<button tooltip="waiting" class="mr-5">
-  <span class="status status-waiting status-lg">{% icon 'waiting', prefix: 'status-lg', class: 'status-icon' %}</span>
-</button>
-<button tooltip="running" class="mr-5">
-  <span class="status status-running status-lg">{% icon :running, prefix: 'status-lg', class: 'status-icon' %}</span>
-</button>
-<button tooltip="success" class="mr-5">
-  <span class="status status-success status-lg">{% icon :success, prefix: 'status-lg', class: 'status-icon' %}</span>
-</button>
-<button tooltip="idle" class="mr-5">
-  <span class="status status-idle status-lg">{% icon :idle, prefix: 'status-lg', class: 'status-icon' %}</span>
-</button>
-<button tooltip="error" class="mr-5">
-  <span class="status status-error status-lg">{% icon :error, prefix: 'status-lg', class: 'status-icon' %}</span>
-</button>
-<button tooltip="fail" class="mr-5">
-  <span class="status status-fail status-lg">{% icon :fail, prefix: 'status-lg', class: 'status-icon' %}</span>
-</button>
-
-```erb
-{%- for status in page.statuses %}
-<span class="status status-lg status-{{ status }}">
-  <%= icon :{{ status }}, prefix: 'status-lg', class: 'status-icon' %>
-</span>
-{% endfor -%}
-```
-
----
-
-### Large, Inverse Status Icons `.status-inverse.status-lg`
-Useful when next to standard text where where it's important to show the status of a particular object.
-{: .section-description }
-
-<div class="col-container m-0 align-center mb-30">
-  <div class="status-skipped-bg p-20 pl-0 pr-0 col rounded rounded-left" tooltip="skipped">
-    <span class="status status-inverse status-skipped status-lg">
-      {% icon :skipped, prefix: 'status-lg', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-waiting-bg p-20 pl-0 pr-0 col" tooltip="waiting">
-    <span class="status status-inverse status-waiting status-lg">
-      {% icon 'waiting', prefix: 'status-lg', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-running-bg p-20 pl-0 pr-0 col" tooltip="running">
-    <span class="status status-inverse status-running status-lg">
-      {% icon :running, prefix: 'status-lg', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-success-bg p-20 pl-0 pr-0 col" tooltip="success">
-    <span class="status status-inverse status-success status-lg">
-      {% icon :success, prefix: 'status-lg', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-idle-bg p-20 pl-0 pr-0 col" tooltip="idle">
-    <span class="status status-inverse status-idle status-lg">
-      {% icon :idle, prefix: 'status-lg', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-error-bg p-20 pl-0 pr-0 col" tooltip="error">
-    <span class="status status-inverse status-error status-lg">
-      {% icon :error, prefix: 'status-lg', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-fail-bg p-20 pl-0 pr-0 col rounded rounded-right" tooltip="fail">
-    <span class="status status-inverse status-fail status-lg">
-      {% icon :fail, prefix: 'status-lg', class: 'status-icon' %}
-    </span>
-  </div>
-</div>
-
-```erb
-{%- for status in page.statuses %}
-<span class="status status-lg status-{{ status }}">
-  <%= icon :{{ status }}, prefix: 'status-lg', class: 'status-icon' %>
-</span>
-{% endfor -%}
-```
-
----
-
-### X-Large Status Icons `.status-xl`
-Useful when next to standard text where where it's important to show the status of a particular object.
-{: .section-description }
-
-<button tooltip="skipped" class="mr-5">
-  <span class="status status-skipped status-xl">{% icon :skipped, prefix: 'status-xl', class: 'status-icon' %}</span>
-</button>
-<button tooltip="waiting" class="mr-5">
-  <span class="status status-waiting status-xl">{% icon 'waiting', prefix: 'status-xl', class: 'status-icon' %}</span>
-</button>
-<button tooltip="running" class="mr-5">
-  <span class="status status-running status-xl">{% icon :running, prefix: 'status-xl', class: 'status-icon' %}</span>
-</button>
-<button tooltip="success" class="mr-5">
-  <span class="status status-success status-xl">{% icon :success, prefix: 'status-xl', class: 'status-icon' %}</span>
-</button>
-<button tooltip="idle" class="mr-5">
-  <span class="status status-idle status-xl">{% icon :idle, prefix: 'status-xl', class: 'status-icon' %}</span>
-</button>
-<button tooltip="error" class="mr-5">
-  <span class="status status-error status-xl">{% icon :error, prefix: 'status-xl', class: 'status-icon' %}</span>
-</button>
-<button tooltip="fail">
-  <span class="status status-fail status-xl">{% icon :fail, prefix: 'status-xl', class: 'status-icon' %}</span>
-</button>
-
-```erb
-{%- for status in page.statuses %}
-<span class="status status-xl status-{{ status }}">
-  <%= icon :{{ status }}, prefix: 'status-xl', class: 'status-icon' %>
-</span>
-{% endfor -%}
-```
-
----
-
-### X-Large, Inverse Status Icons `.status-inverse.status-xl`
-Useful when next to standard text where where it's important to show the status of a particular object.
-{: .section-description }
-
-<div class="col-container m-0 align-center mb-30">
-  <div class="status-skipped-bg p-10 p-x1-20 pl-0 pr-0 col rounded rounded-left" tooltip="skipped">
-    <span class="status status-inverse status-skipped status-xl">
-      {% icon :skipped, prefix: 'status-xl', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-waiting-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="waiting">
-    <span class="status status-inverse status-waiting status-xl">
-      {% icon 'waiting', prefix: 'status-xl', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-running-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="running">
-    <span class="status status-inverse status-running status-xl">
-      {% icon :running, prefix: 'status-xl', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-success-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="success">
-    <span class="status status-inverse status-success status-xl">
-      {% icon :success, prefix: 'status-xl', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-idle-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="idle">
-    <span class="status status-inverse status-idle status-xl">
-      {% icon :idle, prefix: 'status-xl', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-error-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="error">
-    <span class="status status-inverse status-error status-xl">
-      {% icon :error, prefix: 'status-xl', class: 'status-icon' %}
-    </span>
-  </div>
-  <div class="status-fail-bg p-10 p-x1-20 pl-0 pr-0 col rounded rounded-right" tooltip="fail">
-    <span class="status status-inverse status-fail status-xl">
-      {% icon :fail, prefix: 'status-xl', class: 'status-icon' %}
-    </span>
-  </div>
-</div>
-
-```erb
-{%- for status in page.statuses %}
-<span class="status status-inverse status-xl status-{{ status }}">
-  <%= icon :{{ status }}, prefix: 'status-xl', class: 'status-icon' %>
-</span>
-{% endfor -%}
-```
-
----
-
-### Utility CSS
-```css
-{% sass_output -%}
-```
-
----
-
-{% include css-stats.html %}