---
default_tab_description_classes: "tab-description slate body-3 fs-4 lh-3 fw-400 m-0 pt-4 pb-2 absolute"
---
{{#
/**
 * @name tabs/vertical
 * @todo Document property vars/partial
 */
#}}
<div class="grid g-cols gap-m g-rows-fix">
  <div class="g-col-12 m--order-2 m--g-col-5 l--g-col-4">
    <div class="mw-32 mx-auto mt-6 m--mw-none m--mt-0">
      {{ tabs }}
        <a class="button-reset tab-control tab-control-{{ color }} bg-white bs-angel-soft bs-hover block w-100 ta-left px-4 py-4 mb-4 body-3 fw-500 br-1 bs-solid bw-2 bc-ocean-40 m--body-4 m--py-6" {{ if index===1 }} data-state="active" {{ else }} data-state="inactive" {{ /if }} tab-control>
          <p class="tab-title m-0">{{ feature }}</p>
          {{ if tab_description }}<p class="{{ custom_tab_description_classes or default_tab_description_classes }}">{{ tab_description }}</p>{{ /if }}
        </a>
      {{ /tabs }}
    </div>
  </div>

  <div class="g-col-12 m--g-col-6 m--g-row-2 l--g-col-7 ta-center relative" tab-container>
    {{ tabs }}
    <div class="tab w-100" {{ if index===1 }} data-state="active" {{ else }} data-state="inactive" {{ /if }} tab>
      <img src="{{ tab_image }}" alt="">
    </div>
    {{ /tabs }}
  </div>

  {{# Optional checklist #}}
  {{ if checklist_item }}
    <div class="g-col-12 s--px-10 m--order-2 m--px-0 m--g-col-6 l--g-col-5">
      <ul class="list m-0 p-0">
        {{ checklist_item }}
        <li class="fs-4 lh-6 slate mb-3 flex ai-flex-start l--fs-5">
          <i class="icon-s fill-mint-100 mr-5 flex-shrink-0" aria-hidden="true">{{ theme:output src="images/check.svg" }}</i>
          {{ value }}
        </li>
        {{ /checklist_item }}
      </ul>
    </div>
  {{ /if }}
</div>


{{ section:page_scripts }}
<script src="{{ theme:asset src='dist/tabs.bundle.js' cache_bust='true' }}"></script>
{{ /section:page_scripts }}