Close menu

Pattern Library

{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Kdo jsme' %}

<div class="__js-root">
  <ui-view-provider
    :initial="{candidates: true, program: false, other1: false, other2: false}" :sync-location="true"
    v-slot="{ isCurrentView, toggleView }"
  >
    {% include 'patterns/organisms/header/people_header.html' %}

    <main role="main" class="mb-20">
      <div class="container--wide">
        <div
          class="
            flex flex-wrap justify-center gap-4
            xl:justify-start
          "
        >
          <template v-if="!isCurrentView('teams')">
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 w-full">
              <template v-if="isCurrentView('candidates')">
                {% for content in people_candidates %}
                  {% include 'patterns/molecules/contact/contact_person_large_box.html' with name=content.name function=content.function %}
                {% endfor %}
              </template>
              <template v-if="isCurrentView('program')">
                {% for content in people_program %}
                  {% include 'patterns/molecules/contact/contact_person_large_box.html' with name=content.name function=content.function %}
                {% endfor %}
              </template>
              <template v-if="isCurrentView('other1')">
                {% for content in people_other_1 %}
                  {% include 'patterns/molecules/contact/contact_person_large_box.html' with name=content.name function=content.function %}
                {% endfor %}
              </template>
              <template v-if="isCurrentView('other2')">
                {% for content in people_other_2 %}
                  {% include 'patterns/molecules/contact/contact_person_large_box.html' with name=content.name function=content.function %}
                {% endfor %}
              </template>
            </div>
          </template>
          <template v-if="isCurrentView('teams')">
            {% for section in teams_sections %}
              {% if section.header %}
                <h2 class="head-6xl mt-5 mb-5">{{ section.header }}</h2>
              {% endif %}
              {% include 'patterns/organisms/cards/card_list.html' with cards=section.cards description_classes="!bg-grey-180" %}
            {% endfor %}
          </template>
        </div>
      </div>
    </main>
  </ui-view-provider>
</div>

{% include 'patterns/organisms/main_section/newsletter_section.html' %}
{% include 'patterns/organisms/layout/footer.html' %}
context:
  people_candidates:
   -
    name: 'Ivan Bartoš'
    function: 'Poslanec PSP ČR za Ústecký kraj'
   -
     name: 'Ivan Bartoš'
     function: 'Poslanec PSP ČR za Ústecký kraj'
   -
     name: 'Ivan Bartoš'
     function: 'Poslanec PSP ČR za Ústecký kraj'
   -
     name: 'Ivan Bartoš'
     function: 'Poslanec PSP ČR za Ústecký kraj'

  people_program:
   - name: 'Klára Kocmanová'
     function: 'poslankyně Parlamentu České republiky za Středočeský kraj'
   - name: 'Olga Richterová'
     function: 'poslankyně, místopředsedkyně PSP ČR'
   - name: 'Jakub Michálek'
     function: 'předseda poslaneckého klubu Pirátů'
   - name: 'Pepa Honzů'
     function: 'předseda poslaneckého klubu Pirátů'
   - name: 'Jakub Zajíček'
     function: 'předseda poslaneckého klubu Pirátů'
   - name: 'Ondra Chochol'
     function: 'předseda poslaneckého klubu Pirátů'


  people_other_1:
   - name: 'Pepa Honzů'
     function: 'předseda poslaneckého klubu Pirátů'
   - name: 'Jakub Zajíček'
     function: 'předseda poslaneckého klubu Pirátů'
   - name: 'Ondra Chochol'
     function: 'předseda poslaneckého klubu Pirátů'

  people_other_2:
    - name: 'Miloslav Procházka'
      function: 'předseda poslaneckého klubu Pirátů'
    - name: 'Ladislav Zechmeister'
      function: 'předseda poslaneckého klubu Pirátů'
    - name: 'Václav Bukva'
      function: 'předseda poslaneckého klubu Pirátů'

  teams_sections:
    -
      header: "Rezortní týmy"
      cards:
        -
          url: "https://example.com"
          image: "https://picsum.photos/1000"
          header: "Informatika"
          content: "Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Laoreet id donec ultrices tincidunt arcu non. Sem et tortor consequat id."
        -
          url: "https://example.com"
          image: "https://picsum.photos/1000"
          header: "Životní Prostředí"
          content: "Id velit ut tortor pretium viverra suspendisse potenti. Accumsan in nisl nisi scelerisque eu ultrices. Arcu odio ut sem nulla. Mollis nunc sed id semper risus in."
        -
          url: "https://example.com"
          image: "https://picsum.photos/1000"
          header: "Evropa, zahraničí, obrana"
          content: "Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Tellus elementum sagittis vitae et leo duis ut diam. Eu non diam phasellus vestibulum."
    -
      header: "Mezirezortní týmy"
      cards:
        -
          url: "https://example.com"
          image: "https://picsum.photos/1000"
          header: "Návykové chování"
          content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis ut diam quam nulla porttitor."
        -
          url: "https://example.com"
          image: "https://picsum.photos/1000"
          header: "Demokracie"
          content: "Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Laoreet id donec ultrices tincidunt arcu non. Sem et tortor consequat id."
        -
          url: "https://example.com"
          image: "https://picsum.photos/1000"
          header: "Lidská práva"
          content: "Id velit ut tortor pretium viverra suspendisse potenti. Accumsan in nisl nisi scelerisque eu ultrices. Arcu odio ut sem nulla. Mollis nunc sed id semper risus in."
        -
          url: "https://example.com"
          image: "https://picsum.photos/1000"
          header: "Bezbariérové Česko"
          content: "Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Tellus elementum sagittis vitae et leo duis ut diam. Eu non diam phasellus vestibulum."