article#sizing.u-mt-10
  h2.u-size-xl # Sizing
  p.u-mt-2
    | A set of sizing utility classes that can be applied to any component with 
    code.e-code u-size-{xx}
    | .
  .u-my-10
    button.c-button.c-button--info.u-size-xs(type="button") Extra Small
    button.c-button.c-button--info.u-size-sm.u-ml-4(type="button") Small
    button.c-button.c-button--info.u-size-md.u-ml-4(type="button") Medium
    button.c-button.c-button--info.u-size-lg.u-ml-4(type="button") Large
    button.c-button.c-button--info.u-size-xl.u-ml-4(type="button") Extra Large
  script.language-markup.u-mt-4(type='text/plain').
    <button class="c-button c-button--info u-size-xs" type="button">Extra Small</button>
    <button class="c-button c-button--info u-size-sm" type="button">Small</button>
    <button class="c-button c-button--info u-size-md" type="button">Medium</button>
    <button class="c-button c-button--info u-size-lg" type="button">Large</button>
    <button class="c-button c-button--info u-size-xl" type="button">Extra Large</button>