Talke Component Library

Textbox: Red 

<div class="w-full px-5 mx-auto text-white rounded py-7 max-w-text-box bg-talke-blue-70">
    <h2 class="mb-3 text-xl font-talke-semibold">Suffragium cito</h2>

    <h1 class="mb-2 text-2xl uppercase font-talke-semibold">Defero dapifer voluptatibus delinquo vinculum admoveo caritas porro</h1>

    <p class="text-lg font-talke-regular">Vulnus vomito tamen defero vapulus concedo culpo vix patrocinor numquam utilis thermae demulceo cunae adipisci aegrus porro pel modi conservo conqueror beatae caute cuppedia usque aduro degenero ager quam ante.</p>

    <div class="mt-8">

        <a class="cursor-pointer rounded px-5 py-3 text-lg transition-colors duration-300 font-talke-regular bg-talke-red hover:bg-talke-active-red text-white ">Vapulus annus</a>

    </div>

</div>
 
<div
  class="w-full px-5 mx-auto text-white rounded py-7 max-w-text-box bg-talke-blue-70"
>
  {{#if headlineSmall}}
    <h2 class="mb-3 text-xl font-talke-semibold">{{headlineSmall}}</h2>
  {{/if}}

  <h1 class="mb-2 text-2xl uppercase font-talke-semibold">{{headline}}</h1>

  <p class="text-lg font-talke-regular">{{text}}</p>

  <div class="mt-8">
    {{#ifCond _self.name "==" "red"}}
      {{render "@button--red"}}
    {{/ifCond}}
    {{#ifCond _self.name "==" "white"}}
      {{render "@button--white"}}
    {{/ifCond}}
    {{#ifCond _self.name "==" "teal"}}
      {{render "@button--teal"}}
    {{/ifCond}}
  </div>

</div>
 
{
  "headline": "Defero dapifer voluptatibus delinquo vinculum admoveo caritas porro",
  "headlineSmall": "Suffragium cito",
  "text": "Vulnus vomito tamen defero vapulus concedo culpo vix patrocinor numquam utilis thermae demulceo cunae adipisci aegrus porro pel modi conservo conqueror beatae caute cuppedia usque aduro degenero ager quam ante."
}

No notes defined.