Talke Component Library

Teaser Contact 

<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/12/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">
                Julianne Corwin
            </h1>
            <h2 class="mb-5 text-lg font-talke-semibold">
                Central Operations Manager
            </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 345 686 165</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:#">julianne.corwin@talke.com</a>
        </div>
    </div>
</div>
 
<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/{{imageId}}/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">
        {{name}}
      </h1>
      <h2 class="mb-5 text-lg font-talke-semibold">
        {{position}}
      </h2>
      {{#if phone}}
      <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:#">{{phone}}</a>
      </p>
      {{/if}}
    </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:#">{{email}}</a>
    </div>
  </div>
</div>
 
{
  "imageId": 12,
  "name": "Julianne Corwin",
  "position": "Central Operations Manager",
  "phone": "+49 345 686 165",
  "email": "julianne.corwin@talke.com"
}

No notes defined.