<div class="showcase-container">

  <div class="showcase--large showcase--large--dark">

    <div class="c-control c-control--grey-700">
      <a class="c-control__button" href="#">
        <span class="c-control__label">700</span>
      </a>
    </div>

    <div class="c-control c-control--grey-700 c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">700 (Disabled)</span>
      </a>
    </div>

    <div class="c-control c-control--grey-700-border">
      <a class="c-control__button" href="#">
        <span class="c-control__label">700 with Border</span>
      </a>
    </div>

    <div class="c-control c-control--grey-700-border c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">700 with Border (Disabled)</span>
      </a>
    </div>

  </div>

  <div class="showcase--large showcase--large--dark">

    <div class="c-control c-control--grey-800">
      <a class="c-control__button" href="#">
        <span class="c-control__label">800</span>
      </a>
    </div>

    <div class="c-control c-control--grey-800 c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">800 (Disabled)</span>
      </a>
    </div>

    <div class="c-control c-control--grey-800-border">
      <a class="c-control__button" href="#">
        <span class="c-control__label">800 with Border</span>
      </a>
    </div>

    <div class="c-control c-control--grey-800-border c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">800 with Border (Disabled)</span>
      </a>
    </div>

  </div>

  <div class="showcase--large showcase--large--dark">

    <div class="c-control c-control--grey-900">
      <a class="c-control__button" href="#">
        <span class="c-control__label">900 </span>
      </a>
    </div>

    <div class="c-control c-control--grey-900 c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">900 (Disabled)</span>
      </a>
    </div>

    <div class="c-control c-control--grey-900-border">
      <a class="c-control__button" href="#">
        <span class="c-control__label">900 with Border</span>
      </a>
    </div>

    <div class="c-control c-control--grey-900-border c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">900 with Border (Disabled)</span>
      </a>
    </div>

  </div>

  <div class="showcase--large showcase--large--light">

    <div class="c-control c-control--white">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Stone</span>
      </a>
    </div>

    <div class="c-control c-control--white c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Stone (Disabled)</span>
      </a>
    </div>

    <div class="c-control c-control--white-border">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Stone with Border</span>
      </a>
    </div>

    <div class="c-control c-control--white-border c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Stone with Border (Disabled)</span>
      </a>
    </div>

  </div>

  <div class="showcase--large showcase--large--light">

    <div class="c-control c-control--white-secondary">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Stone</span>
      </a>
    </div>

    <div class="c-control c-control--white-secondary c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Stone (Disabled)</span>
      </a>
    </div>

    <div class="c-control c-control--white-secondary-border">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Stone with Border</span>
      </a>
    </div>

    <div class="c-control c-control--white-secondary-border c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Stone with Border (Disabled)</span>
      </a>
    </div>

  </div>

  <div class="showcase--large showcase--large--dark">

    <div class="c-control c-control--red">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Red</span>
      </a>
    </div>

    <div class="c-control c-control--red c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Red (Disabled)</span>
      </a>
    </div>

    <div class="c-control c-control--red-border">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Red with Border</span>
      </a>
    </div>

    <div class="c-control c-control--red-border c-control--disabled">
      <a class="c-control__button" href="#">
        <span class="c-control__label">Red with Border (Disabled)</span>
      </a>
    </div>

  </div>

  <div class="showcase--medium">

    <div class="c-control c-control--autowidth c-control--grey-700 c-control--login">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#anonymous"></use>
        </svg>
        <span class="c-control__label">Sign in</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--grey-700 c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#registered"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--grey-700 c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

  </div>

  <div class="showcase--medium">

    <div class="c-control c-control--autowidth c-control--grey-800 c-control--login">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#anonymous"></use>
        </svg>
        <span class="c-control__label">Sign in</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--grey-800 c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#registered"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--grey-800 c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

  </div>

  <div class="showcase--medium">

    <div class="c-control c-control--autowidth c-control--grey-900 c-control--login">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#anonymous"></use>
        </svg>
        <span class="c-control__label">Sign in</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--grey-900 c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#registered"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--grey-900 c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

  </div>

  <div class="showcase--medium">

    <div class="c-control c-control--autowidth c-control--white c-control--login">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#anonymous"></use>
        </svg>
        <span class="c-control__label">Sign in</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--white c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#registered"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--white c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

  </div>

  <div class="showcase--medium">

    <div class="c-control c-control--autowidth c-control--red c-control--login">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#anonymous"></use>
        </svg>
        <span class="c-control__label">Sign in</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--red c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#registered"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

    <div class="c-control c-control--autowidth c-control--red c-control--login c-control--subscribed">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
        <span class="c-control__label">Chester R.</span>
      </a>
    </div>

  </div>

  <div class="showcase--small">

    <div class="c-control c-control--icononly c-control--grey-700">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-700-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-800">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-800-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-900">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-900-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--white">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--white-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--red">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--red-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#close-x"></use>
        </svg>
      </a>
    </div>

  </div>

  <div class="showcase--small">

    <div class="c-control c-control--icononly c-control--grey-700">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-700-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-800">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-800-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-900">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-900-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--white">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--white-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--red">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--red-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#icon-whatsapp"></use>
        </svg>
      </a>
    </div>

  </div>

  <div class="showcase--small">

    <div class="c-control c-control--icononly c-control--grey-700">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-700-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-800">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-800-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-900">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-900-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--white">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--white-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--red">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--red-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#search"></use>
        </svg>
      </a>
    </div>

  </div>

  <div class="showcase--small">

    <div class="c-control c-control--icononly c-control--grey-700">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-700-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-800">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-800-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-900">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--grey-900-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--white">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--white-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--red">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

    <div class="c-control c-control--icononly c-control--red-border">
      <a class="c-control__button" href="#">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#subscribed"></use>
        </svg>
      </a>
    </div>

  </div>

  <div class="showcase--small showcase--small--dark">

    <div class="c-control c-control--grey-800 c-control--arrow c-control--arrow--left">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-left"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--grey-800 c-control--arrow c-control--arrow--right">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-right"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--grey-800 c-control--arrow c-control--arrow--left c-control--disabled">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-left"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--grey-800 c-control--arrow c-control--arrow--right c-control--disabled">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-right"></use>
        </svg>
      </button>
    </div>

  </div>

  <div class="showcase--small showcase--small--light">

    <div class="c-control c-control--white c-control--arrow c-control--arrow--left">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-left"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--white c-control--arrow c-control--arrow--right">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-right"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--white c-control--arrow c-control--arrow--left c-control--disabled">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-left"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--white c-control--arrow c-control--arrow--right c-control--disabled">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-right"></use>
        </svg>
      </button>
    </div>

  </div>

  <div class="showcase--small">

    <div class="c-control c-control--accordion">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-down"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--accordion c-accordion--level-2">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-down"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--accordion c-accordion--level-3">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-down"></use>
        </svg>
      </button>
    </div>

    <div class="c-control c-control--accordion c-accordion--level-4">
      <button class="c-control__button" type="button">
        <svg class="c-control__icon" role="img" pointer-events="none" focusable="false" aria-hidden="true">
          <use xlink:href="{{ basePath }}/assets/patterns/images/sprite.svg#nav-arrow-down"></use>
        </svg>
      </button>
    </div>

  </div>

  <div class="showcase--small">

    <div class="c-control c-control--text-resizer">
      <button class="c-control__button" aria-label="text size default">A</button>
    </div>

    <div class="c-control c-control--text-resizer c-control--text-resizer--plus-2">
      <button class="c-control__button" aria-label="text size plus 2">A</button>
    </div>

    <div class="c-control c-control--text-resizer c-control--text-resizer--plus-4">
      <button class="c-control__button" aria-label="text size plus 4">A</button>
    </div>

    <div class="c-control c-control--text-resizer c-control--text-resizer--plus-6">
      <button class="c-control__button" aria-label="text size plus 4">A</button>
    </div>

    <ul class="c-text-resizer">
      <li class="c-text-resizer__item">
        <div class="c-control c-control--text-resizer">
          <button class="c-control__button c-control__button--text-resizer" aria-label="text size default">A</button>
        </div>
        <span class="c-text-resizer__label">0</span>
      </li>
      <li class="c-text-resizer__item">
        <div class="c-control c-control--text-resizer c-control--text-resizer--plus-2">
          <button class="c-control__button c-control__button--text-resizer" aria-label="text size plus 2">A</button>
        </div>
        <span class="c-text-resizer__label">+2</span>
      </li>
      <li class="c-text-resizer__item">
        <div class="c-control c-control--text-resizer c-control--text-resizer--plus-4">
          <button class="c-control__button c-control__button--text-resizer" aria-label="text size plus 4">A</button>
        </div>
        <span class="c-text-resizer__label">+4</span>
      </li>
      <li class="c-text-resizer__item">
        <div class="c-control c-control--text-resizer c-control--text-resizer--plus-6">
          <button class="c-control__button c-control__button--text-resizer" aria-label="text size plus 6">A</button>
        </div>
        <span class="c-text-resizer__label">+6</span>
      </li>
    </ul>

  </div>

</div>
