const Styleguide = `

<vue-template>

  <h1 class="display-6 mb-5">Styleguide</h1>

  <hr class="my-6">

  <p class="docs-name mt-6 mb-4">Logo</p>

  <div class="row">
    <div class="col-12 col-sm-6">
      <img src="dist/img/logo.svg" style="height: 80px;">
    </div>
    <div class="col-12 col-sm-6">
      <img src="dist/img/favicon-demo.svg" style="height: 75px;">
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">CI Colors</p>

  <div class="docs-colors">
    <div class="docs-color docs-ui-violet">
      <div class="docs-color-title">Violet</div>
      <div class="docs-color-colors">
        <div>#8099e9</div>
      </div>
    </div>
    <div class="docs-color docs-ui-green">
      <div class="docs-color-title">Green</div>
      <div class="docs-color-colors">
        <div>#60b79d</div>
      </div>
    </div>
  </div>

  <p class="docs-name mt-6 mb-4">UI Colors</p>

  <div class="docs-colors">
    <div class="docs-color">
      <div class="docs-color-title">Gray</div>
      <div class="docs-color-colors">
        <div style="background: var(--gray-0);"></div>
        <div style="background: var(--gray-1);"></div>
        <div style="background: var(--gray-2);"></div>
        <div style="background: var(--gray-3);"></div>
        <div style="background: var(--gray-4);"></div>
        <div style="background: var(--gray-5);"></div>
        <div style="background: var(--gray-6);"></div>
        <div style="background: var(--gray-7);"></div>
        <div style="background: var(--gray-8);"></div>
        <div style="background: var(--gray-9);"></div>
        <div style="background: var(--gray-10);"></div>
        <div style="background: var(--gray-11);"></div>
        <div style="background: var(--gray-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Stone</div>
      <div class="docs-color-colors">
        <div style="background: var(--stone-0);"></div>
        <div style="background: var(--stone-1);"></div>
        <div style="background: var(--stone-2);"></div>
        <div style="background: var(--stone-3);"></div>
        <div style="background: var(--stone-4);"></div>
        <div style="background: var(--stone-5);"></div>
        <div style="background: var(--stone-6);"></div>
        <div style="background: var(--stone-7);"></div>
        <div style="background: var(--stone-8);"></div>
        <div style="background: var(--stone-9);"></div>
        <div style="background: var(--stone-10);"></div>
        <div style="background: var(--stone-11);"></div>
        <div style="background: var(--stone-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Red</div>
      <div class="docs-color-colors">
        <div style="background: var(--red-0);"></div>
        <div style="background: var(--red-1);"></div>
        <div style="background: var(--red-2);"></div>
        <div style="background: var(--red-3);"></div>
        <div style="background: var(--red-4);"></div>
        <div style="background: var(--red-5);"></div>
        <div style="background: var(--red-6);"></div>
        <div style="background: var(--red-7);"></div>
        <div style="background: var(--red-8);"></div>
        <div style="background: var(--red-9);"></div>
        <div style="background: var(--red-10);"></div>
        <div style="background: var(--red-11);"></div>
        <div style="background: var(--red-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Pink</div>
      <div class="docs-color-colors">
        <div style="background: var(--pink-0);"></div>
        <div style="background: var(--pink-1);"></div>
        <div style="background: var(--pink-2);"></div>
        <div style="background: var(--pink-3);"></div>
        <div style="background: var(--pink-4);"></div>
        <div style="background: var(--pink-5);"></div>
        <div style="background: var(--pink-6);"></div>
        <div style="background: var(--pink-7);"></div>
        <div style="background: var(--pink-8);"></div>
        <div style="background: var(--pink-9);"></div>
        <div style="background: var(--pink-10);"></div>
        <div style="background: var(--pink-11);"></div>
        <div style="background: var(--pink-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Purple</div>
      <div class="docs-color-colors">
        <div style="background: var(--purple-0);"></div>
        <div style="background: var(--purple-1);"></div>
        <div style="background: var(--purple-2);"></div>
        <div style="background: var(--purple-3);"></div>
        <div style="background: var(--purple-4);"></div>
        <div style="background: var(--purple-5);"></div>
        <div style="background: var(--purple-6);"></div>
        <div style="background: var(--purple-7);"></div>
        <div style="background: var(--purple-8);"></div>
        <div style="background: var(--purple-9);"></div>
        <div style="background: var(--purple-10);"></div>
        <div style="background: var(--purple-11);"></div>
        <div style="background: var(--purple-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Violet</div>
      <div class="docs-color-colors">
        <div style="background: var(--violet-0);"></div>
        <div style="background: var(--violet-1);"></div>
        <div style="background: var(--violet-2);"></div>
        <div style="background: var(--violet-3);"></div>
        <div style="background: var(--violet-4);"></div>
        <div style="background: var(--violet-5);"></div>
        <div style="background: var(--violet-6);"></div>
        <div style="background: var(--violet-7);"></div>
        <div style="background: var(--violet-8);"></div>
        <div style="background: var(--violet-9);"></div>
        <div style="background: var(--violet-10);"></div>
        <div style="background: var(--violet-11);"></div>
        <div style="background: var(--violet-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Indigo</div>
      <div class="docs-color-colors">
        <div style="background: var(--indigo-0);"></div>
        <div style="background: var(--indigo-1);"></div>
        <div style="background: var(--indigo-2);"></div>
        <div style="background: var(--indigo-3);"></div>
        <div style="background: var(--indigo-4);"></div>
        <div style="background: var(--indigo-5);"></div>
        <div style="background: var(--indigo-6);"></div>
        <div style="background: var(--indigo-7);"></div>
        <div style="background: var(--indigo-8);"></div>
        <div style="background: var(--indigo-9);"></div>
        <div style="background: var(--indigo-10);"></div>
        <div style="background: var(--indigo-11);"></div>
        <div style="background: var(--indigo-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Blue</div>
      <div class="docs-color-colors">
        <div style="background: var(--blue-0);"></div>
        <div style="background: var(--blue-1);"></div>
        <div style="background: var(--blue-2);"></div>
        <div style="background: var(--blue-3);"></div>
        <div style="background: var(--blue-4);"></div>
        <div style="background: var(--blue-5);"></div>
        <div style="background: var(--blue-6);"></div>
        <div style="background: var(--blue-7);"></div>
        <div style="background: var(--blue-8);"></div>
        <div style="background: var(--blue-9);"></div>
        <div style="background: var(--blue-10);"></div>
        <div style="background: var(--blue-11);"></div>
        <div style="background: var(--blue-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Cyan</div>
      <div class="docs-color-colors">
        <div style="background: var(--cyan-0);"></div>
        <div style="background: var(--cyan-1);"></div>
        <div style="background: var(--cyan-2);"></div>
        <div style="background: var(--cyan-3);"></div>
        <div style="background: var(--cyan-4);"></div>
        <div style="background: var(--cyan-5);"></div>
        <div style="background: var(--cyan-6);"></div>
        <div style="background: var(--cyan-7);"></div>
        <div style="background: var(--cyan-8);"></div>
        <div style="background: var(--cyan-9);"></div>
        <div style="background: var(--cyan-10);"></div>
        <div style="background: var(--cyan-11);"></div>
        <div style="background: var(--cyan-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Teal</div>
      <div class="docs-color-colors">
        <div style="background: var(--teal-0);"></div>
        <div style="background: var(--teal-1);"></div>
        <div style="background: var(--teal-2);"></div>
        <div style="background: var(--teal-3);"></div>
        <div style="background: var(--teal-4);"></div>
        <div style="background: var(--teal-5);"></div>
        <div style="background: var(--teal-6);"></div>
        <div style="background: var(--teal-7);"></div>
        <div style="background: var(--teal-8);"></div>
        <div style="background: var(--teal-9);"></div>
        <div style="background: var(--teal-10);"></div>
        <div style="background: var(--teal-11);"></div>
        <div style="background: var(--teal-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Green</div>
      <div class="docs-color-colors">
        <div style="background: var(--green-0);"></div>
        <div style="background: var(--green-1);"></div>
        <div style="background: var(--green-2);"></div>
        <div style="background: var(--green-3);"></div>
        <div style="background: var(--green-4);"></div>
        <div style="background: var(--green-5);"></div>
        <div style="background: var(--green-6);"></div>
        <div style="background: var(--green-7);"></div>
        <div style="background: var(--green-8);"></div>
        <div style="background: var(--green-9);"></div>
        <div style="background: var(--green-10);"></div>
        <div style="background: var(--green-11);"></div>
        <div style="background: var(--green-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Lime</div>
      <div class="docs-color-colors">
        <div style="background: var(--lime-0);"></div>
        <div style="background: var(--lime-1);"></div>
        <div style="background: var(--lime-2);"></div>
        <div style="background: var(--lime-3);"></div>
        <div style="background: var(--lime-4);"></div>
        <div style="background: var(--lime-5);"></div>
        <div style="background: var(--lime-6);"></div>
        <div style="background: var(--lime-7);"></div>
        <div style="background: var(--lime-8);"></div>
        <div style="background: var(--lime-9);"></div>
        <div style="background: var(--lime-10);"></div>
        <div style="background: var(--lime-11);"></div>
        <div style="background: var(--lime-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Yellow</div>
      <div class="docs-color-colors">
        <div style="background: var(--yellow-0);"></div>
        <div style="background: var(--yellow-1);"></div>
        <div style="background: var(--yellow-2);"></div>
        <div style="background: var(--yellow-3);"></div>
        <div style="background: var(--yellow-4);"></div>
        <div style="background: var(--yellow-5);"></div>
        <div style="background: var(--yellow-6);"></div>
        <div style="background: var(--yellow-7);"></div>
        <div style="background: var(--yellow-8);"></div>
        <div style="background: var(--yellow-9);"></div>
        <div style="background: var(--yellow-10);"></div>
        <div style="background: var(--yellow-11);"></div>
        <div style="background: var(--yellow-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Orange</div>
      <div class="docs-color-colors">
        <div style="background: var(--orange-0);"></div>
        <div style="background: var(--orange-1);"></div>
        <div style="background: var(--orange-2);"></div>
        <div style="background: var(--orange-3);"></div>
        <div style="background: var(--orange-4);"></div>
        <div style="background: var(--orange-5);"></div>
        <div style="background: var(--orange-6);"></div>
        <div style="background: var(--orange-7);"></div>
        <div style="background: var(--orange-8);"></div>
        <div style="background: var(--orange-9);"></div>
        <div style="background: var(--orange-10);"></div>
        <div style="background: var(--orange-11);"></div>
        <div style="background: var(--orange-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Choco</div>
      <div class="docs-color-colors">
        <div style="background: var(--choco-0);"></div>
        <div style="background: var(--choco-1);"></div>
        <div style="background: var(--choco-2);"></div>
        <div style="background: var(--choco-3);"></div>
        <div style="background: var(--choco-4);"></div>
        <div style="background: var(--choco-5);"></div>
        <div style="background: var(--choco-6);"></div>
        <div style="background: var(--choco-7);"></div>
        <div style="background: var(--choco-8);"></div>
        <div style="background: var(--choco-9);"></div>
        <div style="background: var(--choco-10);"></div>
        <div style="background: var(--choco-11);"></div>
        <div style="background: var(--choco-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Brown</div>
      <div class="docs-color-colors">
        <div style="background: var(--brown-0);"></div>
        <div style="background: var(--brown-1);"></div>
        <div style="background: var(--brown-2);"></div>
        <div style="background: var(--brown-3);"></div>
        <div style="background: var(--brown-4);"></div>
        <div style="background: var(--brown-5);"></div>
        <div style="background: var(--brown-6);"></div>
        <div style="background: var(--brown-7);"></div>
        <div style="background: var(--brown-8);"></div>
        <div style="background: var(--brown-9);"></div>
        <div style="background: var(--brown-10);"></div>
        <div style="background: var(--brown-11);"></div>
        <div style="background: var(--brown-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Sand</div>
      <div class="docs-color-colors">
        <div style="background: var(--sand-0);"></div>
        <div style="background: var(--sand-1);"></div>
        <div style="background: var(--sand-2);"></div>
        <div style="background: var(--sand-3);"></div>
        <div style="background: var(--sand-4);"></div>
        <div style="background: var(--sand-5);"></div>
        <div style="background: var(--sand-6);"></div>
        <div style="background: var(--sand-7);"></div>
        <div style="background: var(--sand-8);"></div>
        <div style="background: var(--sand-9);"></div>
        <div style="background: var(--sand-10);"></div>
        <div style="background: var(--sand-11);"></div>
        <div style="background: var(--sand-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Camo</div>
      <div class="docs-color-colors">
        <div style="background: var(--camo-0);"></div>
        <div style="background: var(--camo-1);"></div>
        <div style="background: var(--camo-2);"></div>
        <div style="background: var(--camo-3);"></div>
        <div style="background: var(--camo-4);"></div>
        <div style="background: var(--camo-5);"></div>
        <div style="background: var(--camo-6);"></div>
        <div style="background: var(--camo-7);"></div>
        <div style="background: var(--camo-8);"></div>
        <div style="background: var(--camo-9);"></div>
        <div style="background: var(--camo-10);"></div>
        <div style="background: var(--camo-11);"></div>
        <div style="background: var(--camo-12);"></div>
      </div>
    </div>
    <div class="docs-color">
      <div class="docs-color-title">Jungle</div>
      <div class="docs-color-colors">
        <div style="background: var(--jungle-0);"></div>
        <div style="background: var(--jungle-1);"></div>
        <div style="background: var(--jungle-2);"></div>
        <div style="background: var(--jungle-3);"></div>
        <div style="background: var(--jungle-4);"></div>
        <div style="background: var(--jungle-5);"></div>
        <div style="background: var(--jungle-6);"></div>
        <div style="background: var(--jungle-7);"></div>
        <div style="background: var(--jungle-8);"></div>
        <div style="background: var(--jungle-9);"></div>
        <div style="background: var(--jungle-10);"></div>
        <div style="background: var(--jungle-11);"></div>
        <div style="background: var(--jungle-12);"></div>
      </div>
    </div>
  </div>

</vue-template>

`;