Pattern Library

<template v-if="isCurrentView('view1') || isCurrentView('view2')">
  <ui-faq-section-header
    iteration="{{ iteration }}"
    name="{{ section_name }}"
  ></ui-faq-section-header>

  <div class="faq-answer bg-grey-150 pt-16" id="faq{{ iteration }}">
    <div class="container--wide !mb-16">
      <div class="
        flex gap-16 items-start flex-col-reverse

        lg:flex-row

        faq-answer--content
      ">
        <div class="flex flex-col w-full gap-8">
          {% for question in questions %}
            <div class="flex flex-col gap-5">
              <h2 class="text-5xl font-alt">{{ question.title }}</h2>

              <div>
                <span class="bg-black text-white text-sm px-4 py-1.5">
                  {{ question.tag }}
                </span>
              </div>

              <p class="text-black leading-7 text-lg">
                {{ question.answer }}
              </p>
            </div>
          {% endfor %}
        </div>

        <div
          class="
            flex gap-8 w-full items-center
            faq-answer--person
          "
        >
          <div
            class="
              flex flex-col justify-end items-end h-64 ml-[-5.5rem]

              lg:h-96 lg:ml-0

              faq-answer--person--text
            "
          >
            <div class="font-alt text-5xl whitespace-nowrap leading-10">
              Odpovídá
            </div>
            <div class="head-3xl whitespace-nowrap leading-8">
              {{ name }}
            </div>
            <div class="whitespace-nowrap">
              {{ position }}
            </div>
          </div>

          <img
            class="lg:h-96 h-64"
            src="{{ image_src }}"
          >
        </div>
      </div>
    </div>
  </div>
</template>