Talke Component Library

Text: Text With Image 

<div class="my-12 text-talke-text-gray space-y-14">
    <div class="px-8 mx-auto max-w-text-box">
        <h1 class="mb-5 text-2xl uppercase font-talke-semibold text-talke-headline">
            Cogito solvo valetudo taceo advenio abstergo aegre consequatur
        </h1>
        <div class="richtext">
            <p class="contenttext">
                Cupio templum curto iste angulus vallum viridis admiratio cras averto. Arbitro vulgo tondeo doloremque sol.Cunabula umerus spiculum aveho venustas verto. <a href="#">Tendo sopor</a>. Toties architecto nobis tolero comis aurum colo statua deduco tutis. Demum benigne harum amplus somnus error atavus thermae condico.
            </p>
            <p class="contenttext">
                Antiquus arma dens labore vacuus impedit. Tepidus corona centum arguo tamdiu suscipio damno solium cavus ipsam.Atqui caterva comminor sequi cruciamentum amet. <a href="#">Cunae tempora</a>. Attollo statim supellex explicabo adsidue bonus vilis celebrer umerus. Argentum repudiandae amo terror clarus suspendo ubi summopere cibo.
            </p>
            <p class="contenttext">
                Expedita curriculum ubi supellex. Bos tonsor acsi teneo calcar vinculum.Anser demonstro adamo viriliter vallum carpo. <a href="#">Capitulus sponte</a>. Despecto suasoria consequatur aureus summa ventus spero verbera neque pariatur. Perspiciatis ipsa stillicidium virtus eius.
            </p>
        </div>
        <figure>
            <img class="w-full h-auto mt-5" src="https://picsum.photos/525/440" alt="" />
            <figcaption class="mt-2 text-xs">
                &copy; Ea cuius apud
            </figcaption>
        </figure>
    </div>
</div>
 
{{#ifCond mask '==' 'blue'}}
{{#> @mask--blue}}
<div class="text-white space-y-14 py-mask">
  {{> content}}
  {{#if multiple}}
  {{> content}}
  {{/if}}
</div>
{{/@mask--blue}}
{{/ifCond}}

{{#ifCond mask '==' 'white'}}
{{#> @mask--white}}
<div class="text-talke-text-gray space-y-14 py-mask">
  {{> content}}
</div>
{{/@mask--white}}
{{/ifCond}}

{{#unless mask}}
<div class="my-12 text-talke-text-gray space-y-14">
  {{> content}}
</div>
{{/unless}}

{{#*inline "content"}}
<div class="px-8 mx-auto max-w-text-box">
  <h1 class="mb-5 text-2xl uppercase font-talke-semibold text-talke-headline">
    {{headline}}
  </h1>
  <div class="richtext">
    {{#if blockquote}}
    {{> text-with-blockquote}}
    {{else}}
    {{> text}}
    {{/if}}
  </div>
  {{#if image}}
  <figure>
    <img class="w-full h-auto mt-5"
      src="https://picsum.photos/525/440"
      alt="" />
    <figcaption class="mt-2 text-xs">
      {{{imageCredit}}}
    </figcaption>
  </figure>
  {{/if}}
  {{#if video}}
  <h2 class="mt-8 mb-3 text-2xl text-talke-blue font-talke-light">{{videoHeadline}}</h2>
  <div class="aspect-w-16 aspect-h-9">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
  </div>
  <p class="mt-2 text-xs">
    {{{imageCredit}}}
  </p>
  {{/if}}
</div>
{{/inline}}

{{#*inline "text"}}
{{#each paragraphs}}
<p class="contenttext">
  {{{text}}}
</p>
{{/each}}
{{/inline}}

{{#*inline "text-with-blockquote"}}
{{#each paragraphs}}
{{#ifCond type '==' 'paragraph'}}
<p class="contenttext">
  {{{text}}}
</p>
{{/ifCond}}
{{#ifCond type '==' 'blockquote'}}
<blockquote class="text-2xl text-talke-blue font-talke-light">
  <p>
    „{{blockquote}}“ - {{author}}
  </p>
</blockquote>
{{/ifCond}}
{{/each}}
{{/inline}}
 
{
  "id": "c169",
  "headline": "Cogito solvo valetudo taceo advenio abstergo aegre consequatur",
  "videoHeadline": "Depereo curis tunc thesis arca pauci",
  "paragraphs": [
    {
      "text": "Cupio templum curto iste angulus vallum viridis admiratio cras averto. Arbitro vulgo tondeo doloremque sol.Cunabula umerus spiculum aveho venustas verto. <a href=\"#\">Tendo sopor</a>. Toties architecto nobis tolero comis aurum colo statua deduco tutis. Demum benigne harum amplus somnus error atavus thermae condico.",
      "blockquote": "Vesper careo soluta tam doloremque cavus atrox conservo tredecim certe.",
      "author": "Mr. Rafael Kilback PhD",
      "type": "paragraph"
    },
    {
      "text": "Antiquus arma dens labore vacuus impedit. Tepidus corona centum arguo tamdiu suscipio damno solium cavus ipsam.Atqui caterva comminor sequi cruciamentum amet. <a href=\"#\">Cunae tempora</a>. Attollo statim supellex explicabo adsidue bonus vilis celebrer umerus. Argentum repudiandae amo terror clarus suspendo ubi summopere cibo.",
      "blockquote": "Aestus speciosus conservo ancilla inventore urbs triumphus.",
      "author": "Candace Ernser",
      "type": "blockquote"
    },
    {
      "text": "Expedita curriculum ubi supellex. Bos tonsor acsi teneo calcar vinculum.Anser demonstro adamo viriliter vallum carpo. <a href=\"#\">Capitulus sponte</a>. Despecto suasoria consequatur aureus summa ventus spero verbera neque pariatur. Perspiciatis ipsa stillicidium virtus eius.",
      "blockquote": "Adinventitias ambulo commemoro ducimus quaerat supellex aeger casus vicinus.",
      "author": "Nicholas Bashirian",
      "type": "paragraph"
    }
  ],
  "imageCredit": "&copy; Ea cuius apud",
  "image": true,
  "blockquote": false,
  "video": false,
  "mask": false
}

No notes defined.