Visual Select Button

v0.0.0

Use the Visual Select Button inside the element with class vi-visual-select-container.

The buttons contain a minimal width. When not enough space in the container, the buttons wrap, but keep the width of the smallest button.

<!-- Visual Select Container  -->
<div class="vi-visual-select-container">
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      swag
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      keytar
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      mixtape
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      offal
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      meh
    </p>
  </button>
</div>

Color #

Use --accent-1 modifier to vi-select-visual-container class to change the color.

<!-- Visual Select Container (mods: --accent-1) -->
<div class="vi-visual-select-container vi-visual-select-container--accent-1">
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      authentic
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      try-hard
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      biodiesel
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      8-bit
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      portland
    </p>
  </button>
</div>

Disabled #

Use --disabled modifier to vi-select-visual-button OR attribute disabled to disable the button.

<!-- Visual Select Container  -->
<div class="vi-visual-select-container">
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button" disabled>
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      ramps
    </p>
  </button>
  <!-- Visual Select Button (mods: --disabled) -->
  <button class="vi-visual-select-button vi-visual-select-button--disabled">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      lumbersexual
    </p>
  </button>
</div>

Multiselect #

With the --multiselect modifier to vi-select-visual-container multiple selections can be made.

<!-- Visual Select Container (mods: --multiselect) -->
<div class="vi-visual-select-container vi-visual-select-container--multiselect">
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      squid
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      sustainable
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      keffiyeh
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      drinking
    </p>
  </button>
  <!-- Visual Select Button  -->
  <button class="vi-visual-select-button">
    <div class="vi-visual-select-button__image-container mx-auto">
      <svg aria-label="coins" class="vi-icon" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M65 1c-1.3 0-31.6.1-31.6 8.5v35.1h-.3c-1.3 0-31.6.1-31.6 8.5v37.4c0 1.9 1.5 3.3 3.9 4.5 1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.2.3 8.6.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8 2.4-1.1 3.9-2.6 3.9-4.5V80.4h.3c1.3 0 31.6-.1 31.6-8.5V9.5C96.6 1.1 66.3 1 65 1zm0 3.8c16.6 0 26.5 2.9 27.7 4.6-1 1.4-7.7 3.6-19 4.4-2.7.2-5.6.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4C38.5 7.7 48.4 4.8 65 4.8zM42.5 15.7c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V22c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.8 3.4 1.3 5.3 1.8zM92.7 30v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V30zm0 12.5V47c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3h-.7c-2.6-5.3-19.1-6.6-27-6.9V39c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v3.5zm0 12.5v4.5c-1 1.4-7.7 3.6-19 4.4-2.7.1-5.6.2-8.7.2h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V55zm-32 23c-.4.6-1.9 1.3-4.3 2.1-3.2 1-8.2 1.9-14.7 2.3-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.7.3 8.3.3 8.7.3h1c1.3 0 3.8-.1 6.7-.3.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8V78zM33 48.4h.7c1.2 0 2.4 0 3.5.1 1.1 0 2.1.1 3.1.1 8 .5 13.9 1.6 17.3 2.8 1.7.6 2.8 1.2 3.1 1.7-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1H33c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4 1.2-1.7 11.1-4.6 27.7-4.6zM10.6 59.3c4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3h1c.7 0 1.8 0 3.2-.1 1 0 2.2-.1 3.5-.2.3 0 .6 0 .9-.1 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1c-.4.6-1.9 1.3-4.2 2h-.2.1c-3.2 1-8.2 1.9-14.7 2.3-1.4.1-2.9.2-4.5.2-1.1 0-2.2.1-3.4.1h-.8c-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.6.9 3.4 1.5 5.4 2zm50.1 31.2c-1 1.4-7.7 3.6-19 4.4-2.6.2-5.5.3-8.7.3-3.1 0-6-.1-8.7-.3-11.3-.8-18-2.9-19-4.4v-8.1c1.5.7 3.3 1.3 5.3 1.8 4.3 1 9.5 1.6 13.7 1.9 4.6.3 8.3.3 8.7.3s4 0 8.7-.3c4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1zm32-18.6c-1.2 1.7-11.1 4.6-27.7 4.6h-.3v-8.7h.3c.4 0 4 0 8.7-.3 4.3-.3 9.4-.8 13.7-1.9 2-.5 3.8-1.1 5.3-1.8v8.1z"></path>
      </svg>
    </div>
    <p class="vi-visual-select-button__text text-center vi-typesystem--small mb-0">
      sartorial
    </p>
  </button>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  15 Sep 2023 - Fixed buttons flickering and misalignment on resize.
  2 Dec 2022 - Typo


Changes

  22 Nov 2022 - DC Inserted new code by Georgi Velev


Added

  Initial draft