tabs/vertical.html

  1. ---
  2. default_tab_description_classes: "tab-description slate body-3 fs-4 lh-3 fw-400 m-0 pt-4 pb-2 absolute"
  3. ---
  4. {{#
  5. /**
  6. * @name tabs/vertical
  7. * @todo Document property vars/partial
  8. */
  9. #}}
  10. <div class="grid g-cols gap-m g-rows-fix">
  11. <div class="g-col-12 m--order-2 m--g-col-5 l--g-col-4">
  12. <div class="mw-32 mx-auto mt-6 m--mw-none m--mt-0">
  13. {{ tabs }}
  14. <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>
  15. <p class="tab-title m-0">{{ feature }}</p>
  16. {{ if tab_description }}<p class="{{ custom_tab_description_classes or default_tab_description_classes }}">{{ tab_description }}</p>{{ /if }}
  17. </a>
  18. {{ /tabs }}
  19. </div>
  20. </div>
  21. <div class="g-col-12 m--g-col-6 m--g-row-2 l--g-col-7 ta-center relative" tab-container>
  22. {{ tabs }}
  23. <div class="tab w-100" {{ if index===1 }} data-state="active" {{ else }} data-state="inactive" {{ /if }} tab>
  24. <img src="{{ tab_image }}" alt="">
  25. </div>
  26. {{ /tabs }}
  27. </div>
  28. {{# Optional checklist #}}
  29. {{ if checklist_item }}
  30. <div class="g-col-12 s--px-10 m--order-2 m--px-0 m--g-col-6 l--g-col-5">
  31. <ul class="list m-0 p-0">
  32. {{ checklist_item }}
  33. <li class="fs-4 lh-6 slate mb-3 flex ai-flex-start l--fs-5">
  34. <i class="icon-s fill-mint-100 mr-5 flex-shrink-0" aria-hidden="true">{{ theme:output src="images/check.svg" }}</i>
  35. {{ value }}
  36. </li>
  37. {{ /checklist_item }}
  38. </ul>
  39. </div>
  40. {{ /if }}
  41. </div>
  42. {{ section:page_scripts }}
  43. <script src="{{ theme:asset src='dist/tabs.bundle.js' cache_bust='true' }}"></script>
  44. {{ /section:page_scripts }}