{% stories FoundationLogos with {
  "title": "Foundation/Logos",
  "parameters": {
    "docs": {
      "description": {
        "component": "Logos"
      }
    }
  }
} %}

{% story Logos with {
  "name": "Logos"
} %}

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Logo & Share Image</h1>
    </div>
  </div>


  <div class="row mt-5">
    <div class="col">
      <h2>Logo</h2>
    </div>
  </div>
  <div class="row mt-3 g-0">
    <div class="col">
      <div class="bg-light w-100 py-5 d-flex justify-content-center">
        <img class="m-5" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/varbase-logo-emblem-colored-266x46.png" alt="Colored Varbase Logo emblem" title="Colored Varbase Logo emblem"/>
      </div>
    </div>
    <div class="col">
      <div class="bg-primary w-100 py-5 d-flex justify-content-center">
        <img class="m-5" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/varbase-logo-emblem-white-266x46.png" alt="White Varbase Logo emblem" title="White Varbase Logo emblem"/>
      </div>
    </div>
  </div>

  <div class="row mt-5">
    <div class="col">
      <h2>Original Size</h2>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-12">
      <img class="ms-3" style="width: 118px;" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/varbase-logo-emblem-colored.svg" alt="Original Varbase Logo Size"/>
    </div>
  </div>

  <div class="row mt-5">
    <div class="col">
      <h2>Usage</h2>
      <p>Varbase’s Logo should always be use lowercase <b>v</b>. No capital <b>V</b></p>
    </div>
  </div>
  <div class="row mt-3 g-0">
    <div class="col">
      <div class="w-100 py-5 d-flex justify-content-center">
        <img class="m-5" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x//varbase-correct--logo-colored.png" alt="Correct Varbase logo" title="Correct Varbase logo" />
      </div>
    </div>
    <div class="col">
      <div class="w-100 py-5 d-flex justify-content-center">
        <img class="m-5" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/varbase-incorrect--logo-white.png" alt="Incorrect Varbase logo" title="Incorrect Varbase logo" />
      </div>
    </div>
  </div>

  <div class="row mt-5">
    <div class="col">
      <h2>Favicon</h2>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <img src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/fivecon-152x152.png" alt="Varbase Fivecon icon size 152x152" title="Varbase Fivecon icon size 152x152" />
      <img src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/fivecon-120x120.png" alt="Varbase Fivecon icon size 120x120" title="Varbase Fivecon icon size 120x120" />
      <img src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/fivecon-76x76.png" alt="Varbase Fivecon icon size 76x76" title="Varbase Fivecon icon size 76x76" />
      <img src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/fivecon-60x60.png" alt="Varbase Fivecon icon size 60x60" title="Varbase Fivecon icon size 60x60" />
      <img src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/fivecon-16x16.png" alt="Varbase Fivecon icon size 16x16" title="Varbase Fivecon icon size 16x16" />
    </div>
  </div>

  <div class="row mt-5">
    <div class="col">
      <h2>Share Image</h2>
      <img src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/varbase-social-share.png" alt="Varbase Social share image" title="Varbase Social share image" />
    </div>
  </div>
</div>


{% endstory %}

{% endstories %}
