Talke Component Library

Teaserbox Small 

<div class="my-12 px-8" id="c121">
    <section class="mx-auto w-full max-w-content-max splide splideTeaserbox">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <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/26/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">
                                Sponte ipsum
                            </h2>
                            <h3 class="text-2xl uppercase mb-7 font-talke-semibold">
                                traho ulciscor
                            </h3>
                            <p class="text-sm transition-opacity opacity-0 group-hover:opacity-100 font-talke-regular">
                                Eius debitis adeptio cito mollitia vespillo absum beatus comptus cernuus dapifer universe capitulus demo benevolentia theologus uter ait crustulum tenus.
                            </p>
                        </div>
                    </a>

                </li>
                <li class="splide__slide">
                    <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/38/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">
                                Balbus deduco
                            </h2>
                            <h3 class="text-2xl uppercase mb-7 font-talke-semibold">
                                ducimus sopor
                            </h3>
                            <p class="text-sm transition-opacity opacity-0 group-hover:opacity-100 font-talke-regular">
                                Cum tremo centum statim textilis atqui balbus apparatus tubineus dapifer strenuus argentum perferendis arcesso annus ab vorago paulatim amet autus.
                            </p>
                        </div>
                    </a>

                </li>
                <li class="splide__slide">
                    <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/59/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">
                                Sol supra
                            </h2>
                            <h3 class="text-2xl uppercase mb-7 font-talke-semibold">
                                victoria vacuus
                            </h3>
                            <p class="text-sm transition-opacity opacity-0 group-hover:opacity-100 font-talke-regular">
                                Magnam urbs cognomen tabula desidero subnecto articulus asper auctor suadeo adduco vix illum vix trado crustulum eos spectaculum una unde.
                            </p>
                        </div>
                    </a>

                </li>
            </ul>
        </div>
    </section>
</div>
 
<div class="my-12 px-8" id="{{id}}">
  <section class="mx-auto w-full max-w-content-max splide splideTeaserbox">
      <div class="splide__track">
        <ul class="splide__list">
          {{#each items}}
            <li class="splide__slide">
              {{render "@teaser-small" this merge=true}}
            </li>
          {{/each}}
        </ul>
      </div>
  </section>
</div>
 
/* No context defined. */

No notes defined.