{{#freestyle-usage "inline-definitions" title="Inline Definitions"}}
  <div class="boxed-section is-small">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Some Label</span>
      <span class="pair">
        <span class="term">Term Name</span>
        <span>Term Value</span>
      </span>
      <span class="pair">
        <span class="term">Running?</span>
        <span>Yes</span>
      </span>
      <span class="pair">
        <span class="term">Last Updated</span>
        <span>{{moment-format (now)}}</span>
      </span>
    </div>
  </div>
{{/freestyle-usage}}
{{#freestyle-annotation}}
  A way to tightly display key/value information. Typically seen at the top of pages.
{{/freestyle-annotation}}

{{#freestyle-usage "inline-definitions-variants" title="Inline Definitions Variants"}}
  <div class="boxed-section is-small is-success">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Success Label</span>
      <span class="pair">
        <span class="term">Term Name</span>
        <span>Term Value</span>
      </span>
      <span class="pair">
        <span class="term">Last Updated</span>
        <span>{{moment-format (now)}}</span>
      </span>
    </div>
  </div>
  <div class="boxed-section is-small is-warning">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Warning Label</span>
      <span class="pair">
        <span class="term">Term Name</span>
        <span>Term Value</span>
      </span>
      <span class="pair">
        <span class="term">Last Updated</span>
        <span>{{moment-format (now)}}</span>
      </span>
    </div>
  </div>
  <div class="boxed-section is-small is-danger">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Danger Label</span>
      <span class="pair">
        <span class="term">Term Name</span>
        <span>Term Value</span>
      </span>
      <span class="pair">
        <span class="term">Last Updated</span>
        <span>{{moment-format (now)}}</span>
      </span>
    </div>
  </div>
  <div class="boxed-section is-small is-info">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Info Label</span>
      <span class="pair">
        <span class="term">Term Name</span>
        <span>Term Value</span>
      </span>
      <span class="pair">
        <span class="term">Last Updated</span>
        <span>{{moment-format (now)}}</span>
      </span>
    </div>
  </div>
{{/freestyle-usage}}
{{#freestyle-annotation}}
  Inline definitions are meant to pair well with emotive color variations.
{{/freestyle-annotation}}