Talke Component Library

Contacts Carousel 3 Cols: Three Items 

<div class="px-8 my-12" id="c598">
      <div class="mb-12">
          <div class="mx-auto text-center max-w-teaser-intro
  text-talke-blue
  
">
              <h1 class="mb-3 text-xl font-talke-semibold">
                  Quis speciosus
              </h1>
              <h2 class="mb-3 text-2xl uppercase font-talke-semibold">
                  Acceptus averto arguo nihil
              </h2>
              <p class="text-sm font-talke-regular text-talke-text-gray">
                  Velut somnus bonus sum campana chirographum aduro cui tempore tunc velum sodalitas talio coma titulus decumbo credo despecto creptio ceno.
              </p>
          </div>

      </div>
      <div class="mx-auto mb-12 text-2xl text-center max-w-content-max font-talke-light text-talke-blue">
          Chicago
      </div>
      <div class="splide splideContacts">
          <div class="mx-auto mb-12 splide__track max-w-content-max ">
              <ul class="splide__list !flex justify-between">
                  <li class="flex w-full splide__slide lg:max-w-carousel-slide">
                      <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                          <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                              <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/82/342/245" alt="" />
                          </div>
                          <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                              <div>
                                  <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                      Elena Grady
                                  </h1>
                                  <h2 class="mb-5 text-lg font-talke-semibold">
                                      Product Solutions Producer
                                  </h2>
                                  <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                      Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 396 711 216</a>
                                  </p>
                              </div>
                              <div class="text-lg font-talke-semibold text-talke-light-blue">
                                  E-Mail:<br>
                                  <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">elena.grady@talke.com</a>
                              </div>
                          </div>
                      </div>

                  </li>
                  <li class="flex w-full splide__slide lg:max-w-carousel-slide">
                      <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                          <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                              <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/93/342/245" alt="" />
                          </div>
                          <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                              <div>
                                  <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                      Andy Hoeger
                                  </h1>
                                  <h2 class="mb-5 text-lg font-talke-semibold">
                                      Human Optimization Developer
                                  </h2>
                              </div>
                              <div class="text-lg font-talke-semibold text-talke-light-blue">
                                  E-Mail:<br>
                                  <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">andy.hoeger@talke.com</a>
                              </div>
                          </div>
                      </div>

                  </li>
                  <li class="flex w-full splide__slide lg:max-w-carousel-slide">
                      <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                          <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                              <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/43/342/245" alt="" />
                          </div>
                          <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                              <div>
                                  <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                      Vivianne Johnson
                                  </h1>
                                  <h2 class="mb-5 text-lg font-talke-semibold">
                                      Regional Research Executive
                                  </h2>
                                  <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                      Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 277 498 725</a>
                                  </p>
                              </div>
                              <div class="text-lg font-talke-semibold text-talke-light-blue">
                                  E-Mail:<br>
                                  <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">vivianne.johnson@talke.com</a>
                              </div>
                          </div>
                      </div>

                  </li>
              </ul>
          </div>
          <div class="flex mx-auto justify-evenly splide__arrows max-w-content-max lg:hidden">
              <button class="flex items-center justify-center w-10 h-10 text-white rounded prev bg-talke-blue">
                  <svg class="shrink-0 h-2 w-auto fill-current -rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                      <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                  </svg>
              </button>
              <ul class="px-10 splide__pagination"></ul>
              <button class="flex items-center justify-center w-10 h-10 text-white rounded next bg-talke-blue">
                  <svg class="shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                      <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                  </svg>
              </button>
          </div>
      </div>
  </div>
 
{{#ifCond items.length "==" "3"}}
  {{assign "listClasses" "!flex justify-between"}}
  {{assign "slideClasses" "lg:max-w-carousel-slide"}}
  {{assign "arrowClasses" "lg:hidden"}}
{{/ifCond}}

{{#ifCond items.length "<=" "2"}}
  {{assign "listClasses" "md:!flex md:gap-8"}}
  {{assign "slideClasses" "md:w-carousel-slide"}}
  {{assign "trackClasses" "md:flex md:justify-around"}}
  {{assign "arrowClasses" "md:hidden"}}
{{/ifCond}}

<div class="px-8 my-12" id="{{id}}">
  <div class="mb-12">
    {{render "@teaser-intro"}}
  </div>
  <div class="mx-auto mb-12 text-2xl text-center max-w-content-max font-talke-light text-talke-blue">
    {{location}}
  </div>
  <div class="{{#ifCond items.length ">" 1}}splide{{/ifCond}} splideContacts">
    <div class="mx-auto mb-12 splide__track max-w-content-max {{trackClasses}}">
      <ul class="splide__list {{listClasses}}">
        {{#each items as |item|}}
        <li class="flex w-full splide__slide {{../slideClasses}}">
          {{render "@teaser-contact" this merge=true}}
        </li>
        {{/each}}
      </ul>
    </div>
    {{#ifCond items.length ">" 1}}
    <div class="flex mx-auto justify-evenly splide__arrows max-w-content-max {{arrowClasses}}">
      <button class="flex items-center justify-center w-10 h-10 text-white rounded prev bg-talke-blue">
        {{> @icon--navigationarrow additionalClasses="shrink-0 h-2 w-auto fill-current -rotate-90"}}
      </button>
      <ul class="px-10 splide__pagination"></ul>
      <button class="flex items-center justify-center w-10 h-10 text-white rounded next bg-talke-blue">
        {{> @icon--navigationarrow additionalClasses="shrink-0 h-2 w-auto fill-current rotate-90"}}
      </button>
    </div>
    {{/ifCond}}
  </div>
  </div>
 
{
  "id": "c598",
  "location": "Chicago",
  "numberOfItems": 3,
  "items": [
    {
      "imageId": 82,
      "name": "Elena Grady",
      "position": "Product Solutions Producer",
      "phone": "+49 396 711 216",
      "email": "elena.grady@talke.com"
    },
    {
      "imageId": 93,
      "name": "Andy Hoeger",
      "position": "Human Optimization Developer",
      "phone": "",
      "email": "andy.hoeger@talke.com"
    },
    {
      "imageId": 43,
      "name": "Vivianne Johnson",
      "position": "Regional Research Executive",
      "phone": "+49 277 498 725",
      "email": "vivianne.johnson@talke.com"
    }
  ]
}

No notes defined.