Talke Component Library

Teaser News: Default 

<a href="#" class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue">
    <div class="relative w-full overflow-hidden pb-[calc(100%_/_683_*_384)]">
        <img class="absolute inset-0 h-auto w-full scale-100 transition-transform duration-500 ease-in-out group-hover:scale-105" src="https://picsum.photos/id/66/683/384" alt="" />
    </div>
    <div class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5">
        <div>
            <h2 class="mb-3 font-talke-semibold text-lg">
                Traho clam
            </h2>
            <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
                Vix sto assentator tepesco
            </h1>
            <p class="mb-5 font-talke-regular text-lg">
                Deporto auxilium creator speciosus territo adaugeo vinco cursus adnuo utpote arma commemoro calamitas velit possimus expedita thesaurus summopere annus asperiores.
            </p>
        </div>
        <div class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit">
            Ex
        </div>
    </div>
</a>
 
<a
  href="#"
  class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue"
>
  {{#if imageId}}
    <div class="relative w-full overflow-hidden pb-[calc(100%_/_683_*_384)]">
      <img
        class="absolute inset-0 h-auto w-full scale-100 transition-transform duration-500 ease-in-out group-hover:scale-105"
        src="https://picsum.photos/id/{{imageId}}/683/384"
        alt=""
      />
    </div>
  {{else}}
    <div class="aspect-h-9 aspect-w-16 w-full">
      <iframe
        src="https://www.youtube-nocookie.com/embed/ioBnTsh_4YE?autohide=1&controls=1&iv_load_policy=3"
        allowfullscreen=""
        allow="fullscreen"
      ></iframe>
    </div>
  {{/if}}
  <div
    class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5"
  >
    <div>
      <h2 class="mb-3 font-talke-semibold text-lg">
        {{headlineSmall}}
      </h2>
      <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
        {{headlineLarge}}
      </h1>
      <p class="mb-5 font-talke-regular text-lg">
        {{bodyText}}
      </p>
    </div>
    <div
      class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit"
    >
      {{linkText}}
    </div>
  </div>
</a>
 
{
  "imageId": 66,
  "headlineSmall": "Traho clam",
  "headlineLarge": "Vix sto assentator tepesco",
  "bodyText": "Deporto auxilium creator speciosus territo adaugeo vinco cursus adnuo utpote arma commemoro calamitas velit possimus expedita thesaurus summopere annus asperiores.",
  "linkText": "Ex"
}

No notes defined.