Talke Component Library

Teaser Small 

<a href="" class="relative flex flex-col overflow-hidden text-white rounded group h-80 bg-talke-blue pt-48 hover:pt-0 transition-all duration-500 w-48">
    <img class="absolute inset-0 w-full h-auto" src="https://picsum.photos/id/67/200/200" alt="" />
    <div class="relative flex-grow px-3 pt-3 pb-3 transition-all duration-300 rounded bg-talke-blue -top-1 group-hover:pt-8">
        <h2 class="mb-2 text-lg font-talke-semibold">
            Eaque vespillo
        </h2>
        <h3 class="text-2xl uppercase mb-7 font-talke-semibold">
            Asporto audeo
        </h3>
        <p class="text-sm transition-opacity opacity-0 group-hover:opacity-100 font-talke-regular">
            Pax depraedor nisi crastinus teneo terebro eaque confido consectetur tabella stultus tutamen demoror succurro aperio vestrum crapula nulla undique error.
        </p>
    </div>
</a>
 
<a
  href=""
  class="relative flex flex-col overflow-hidden text-white rounded group h-80 bg-talke-blue pt-48 hover:pt-0 transition-all duration-500 w-48"
>
  <img
    class="absolute inset-0 w-full h-auto"
    src="https://picsum.photos/id/{{imageId}}/200/200"
    alt=""
  />
  <div
    class="relative flex-grow px-3 pt-3 pb-3 transition-all duration-300 rounded bg-talke-blue -top-1 group-hover:pt-8"
  >
    <h2 class="mb-2 text-lg font-talke-semibold">
      {{headlineSmall}}
    </h2>
    <h3 class="text-2xl uppercase mb-7 font-talke-semibold">
      {{headlineLarge}}
    </h3>
    <p
      class="text-sm transition-opacity opacity-0 group-hover:opacity-100 font-talke-regular"
    >
      {{bodyText}}
    </p>
  </div>
</a>
 
{
  "imageId": 67,
  "headlineSmall": "Eaque vespillo",
  "headlineLarge": "Asporto audeo",
  "bodyText": "Pax depraedor nisi crastinus teneo terebro eaque confido consectetur tabella stultus tutamen demoror succurro aperio vestrum crapula nulla undique error."
}

No notes defined.