desy-html 7.1.1 → 7.2.0

package/src/templates/components/card/_examples.card.njk

@@ -3,92 +3,92 @@
 {% from "components/button/_macro.button.njk" import componentButton %}
 
 {% set defaultContent %}
-  <h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
-  <div class="prose max-w-none">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
-  </div>
+<h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
+<div class="prose max-w-none">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
 {% endset %}
 
 {% set linksContent %}
-  <h2 class="c-h1">Tus datos médicos e información personal</h2>
-  <ul class="text-lg">
-    <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
-    <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
-    <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
-    <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
-    <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
-  </ul>
+<h2 class="c-h1">Tus datos médicos e información personal</h2>
+<ul class="text-lg">
+  <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
+  <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
+  <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
+  <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
+  <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
+</ul>
 {% endset %}
 
 {% set verButton %}
-  {{ componentButton({
-    "html": "Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
-    "classes": "c-button--transparent",
-    "href": "#",
-    "attributes": {
-      "id": "boton-card-1",
-      "aria-labelledby": "boton-card-1 titulo-card-1"
-    }
-  })  }}
+{{ componentButton({
+  "html": "Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
+  "classes": "c-button--transparent",
+  "href": "#",
+  "attributes": {
+    "id": "boton-card-1",
+    "aria-labelledby": "boton-card-1 titulo-card-1"
+  }
+})  }}
 {% endset %}
 
 {% set verDetalleButton %}
-  {{ componentButton({
-    "html": "Ver detalle <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
-    "classes": "c-button--transparent",
-    "href": "#",
-    "attributes": {
-      "id": "boton-card-1",
-      "aria-labelledby": "boton-card-1 titulo-card-1"
-    }
-  })  }}
+{{ componentButton({
+  "html": "Ver detalle <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
+  "classes": "c-button--transparent",
+  "href": "#",
+  "attributes": {
+    "id": "boton-card-1",
+    "aria-labelledby": "boton-card-1 titulo-card-1"
+  }
+})  }}
 {% endset %}
 
 {% set withIconContent %}
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
-  <h3 id="titulo-card-1" class="c-h3">Título card</h3>
-  <div class="prose max-w-none mb-base">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
-  </div>
-  {{ verButton | safe }}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
+<h3 id="titulo-card-1" class="c-h3">Título card</h3>
+<div class="prose max-w-none mb-base">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
+{{ verButton | safe }}
 {% endset %}
 
 {% set withButton %}
-  <h3 id="titulo-card-1" class="c-h3">Título card</h3>
-  <div class="prose max-w-none mb-base">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
-  </div>
-  {{ verButton | safe }}
+<h3 id="titulo-card-1" class="c-h3">Título card</h3>
+<div class="prose max-w-none mb-base">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
+{{ verButton | safe }}
 {% endset %}
 
 {% set areaPersonalContent %}
-  <h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
-  <p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
-  <ul class="flex flex-wrap gap-base">
-    <li>
-      {{ componentButton({
-        "text": "Acceder a Tu área personal",
-        "classes": "c-button--primary"
-      })  }}
-    </li>
-    <li>
-      {{ componentButton({
-        "text": "Descargar la app"
-      })  }}
-    </li>
-  </ul>
+<h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
+<p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
+<ul class="flex flex-wrap gap-base">
+  <li>
+    {{ componentButton({
+      "text": "Acceder a Tu área personal",
+      "classes": "c-button--primary"
+    })  }}
+  </li>
+  <li>
+    {{ componentButton({
+      "text": "Descargar la app"
+    })  }}
+  </li>
+</ul>
 {% endset %}
 
 {% set postContent %}
-  <p class="c-paragraph-sm mb-base">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
-    <strong>18 octubre 2022</strong>
-  </p>
-  <h3 id="titulo-card-1" class="c-h3">Título de noticia</h3>
-  <div class="prose max-w-none mb-base">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
-  </div>
-  {{ verDetalleButton | safe }}
+<p class="c-paragraph-sm mb-base">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
+  <strong>18 octubre 2022</strong>
+</p>
+<h3 id="titulo-card-1" class="c-h3">Título de noticia</h3>
+<div class="prose max-w-none mb-base">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
+{{ verDetalleButton | safe }}
 {% endset %}
 
 
@@ -99,7 +99,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": defaultContent
+      "caller": defaultContent | indent(4)
     }
   },
   {
@@ -107,7 +107,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": withIconContent
+      "caller": withIconContent | indent(4)
     }
   },
   {
@@ -115,7 +115,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton
+      "caller": withButton | indent(4)
     }
   },
   {
@@ -123,7 +123,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton,
+      "caller": withButton | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -140,7 +140,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton,
+      "caller": withButton | indent(4),
       "sub": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -158,7 +158,7 @@
     "data": {
       "classes": "lg:w-2/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton,
+      "caller": withButton | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -185,7 +185,7 @@
     "data": {
       "classes": "lg:w-2/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton,
+      "caller": withButton | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -211,14 +211,14 @@
     "data": {
       "classes": "lg:w-1/2",
       "containerClasses": "py-lg border-t-8 border-neutral-dark",
-      "caller": linksContent
+      "caller": linksContent | indent(4)
     }
   },
   {
     "name": "home block with buttons",
     "data": {
       "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": areaPersonalContent,
+      "caller": areaPersonalContent | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
@@ -245,7 +245,7 @@
     "data": {
       "classes": "lg:w-3/4",
       "containerClasses": "p-lg bg-neutral-lighter",
-      "caller": postContent,
+      "caller": postContent | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -271,7 +271,7 @@
     "data": {
       "classes": "lg:w-1/4",
       "containerClasses": "p-base bg-neutral-lighter",
-      "caller": withIconContent
+      "caller": withIconContent | indent(4)
     }
   }
 ] %}

package/src/templates/components/card/_template.card.njk

@@ -2,33 +2,33 @@
 <div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
     {% if params.super %}
-      <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.super.html | safe if params.super.html}}
-      </div>
+    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.super.html | safe if params.super.html}}
+    </div>
     {% endif %}
     <div class="flex">
       {% if params.left %}
-        <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-          {{ params.left.html | safe if params.left.html}}
-        </div>
+      <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.left.html | safe if params.left.html}}
+      </div>
       {% endif %}
       <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
         {% if caller %}
-        {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+        {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
         {% elseif params.caller %}
-        {{ params.caller | safe }}
+        {{ params.caller | safe | indent(4) }}
         {% endif %}
       </div>
       {% if params.right %}
-        <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-          {{ params.right.html | safe if params.right.html}}
-        </div>
+      <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.right.html | safe if params.right.html}}
+      </div>
       {% endif %}
     </div>
     {% if params.sub %}
-      <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.sub.html | safe if params.sub.html}}
-      </div>
+    <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.sub.html | safe if params.sub.html}}
+    </div>
     {% endif %}
   </div>
 </div>

package/src/templates/components/character-count/_template.character-count.njk

@@ -2,10 +2,7 @@
 {% from "../hint/_macro.hint.njk" import componentHint %}
 
 <!-- character-count -->
-<div
-{%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
-{%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
-{%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
+<div {%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %} {%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %} {%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
   {{ componentTextarea({
     id: params.id,
     name: params.name,
@@ -29,7 +26,7 @@
     disabled: params.disabled,
     errorMessage: params.errorMessage,
     attributes: params.attributes
-  }) }}
+  }) | indent(2) }}
   {{ componentHint({
     text: 'Puedes escribir hasta ' + (params.maxlength or params.maxwords) + (' palabras' if params.maxwords else ' caracteres'),
     id: params.id + '-info',
@@ -37,6 +34,6 @@
     attributes: {
       'aria-live': 'polite'
     }
-  }) }}
+  }) | indent(2) }}
 </div>
 <!-- /character-count -->

package/src/templates/components/checkboxes/_examples.checkboxes.njk

@@ -1,3 +1,42 @@
+{% from "components/input/_macro.input.njk" import componentInput %}
+
+{% set telefonoContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono"
+    },
+    "id": "telefono-a",
+    "name": "telefono-name"
+  })  }}
+{% endset %}
+
+{% set mobileContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono móvil"
+    },
+    "id": "mobile-a",
+    "name": "mobile-name"
+  })  }}
+{% endset %}
+
+{% set mobileErrorContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono móvil"
+    },
+    "id": "input-with-error-message-a",
+    "name": "test-name",
+    "errorMessage": {
+      "text": "Error: Este campo no puede estar vacío"
+    }
+  })  }}
+{% endset %}
+
+
+
+
+
 {% set exampleComponent = "checkboxes" %}
 {% set examples =  [{
     "name": "default",
@@ -125,7 +164,7 @@
           "text": "Verify with Phone",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": telefonoContent
           }
         },
         {
@@ -461,21 +500,21 @@
           "value": "email",
           "text": "Email",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": mobileContent
           }
         },
         {
           "value": "phone",
           "text": "Phone",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": telefonoContent
           }
         },
         {
           "value": "text",
           "text": "Text message",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent
           }
         }
       ]
@@ -496,7 +535,7 @@
           "value": "email",
           "text": "Email",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": mobileContent
           }
         },
         {
@@ -504,14 +543,14 @@
           "text": "Phone",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": telefonoContent
           }
         },
         {
           "value": "text",
           "text": "Text message",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent
           }
         }
       ]
@@ -535,7 +574,7 @@
           "value": "email",
           "text": "Email",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": mobileContent
           }
         },
         {
@@ -543,14 +582,14 @@
           "text": "Phone",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold  text-alert-base \">Error: Problem with input</span>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
+            "html": mobileErrorContent
           }
         },
         {
           "value": "text",
           "text": "Text message",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent
           }
         }
       ]

package/src/templates/components/checkboxes/_template.checkboxes.njk

@@ -29,6 +29,7 @@
 {% if params.hint %}
   {% set hintId = idPrefix + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+
   {{ componentHint({
     id: hintId,
     classes: params.hint.classes,
@@ -37,6 +38,7 @@
     text: params.hint.text
   }) | indent(2) | trim }}
 {% endif %}
+
 {% if params.errorMessage %}
   {% set errorId = idPrefix + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
@@ -69,8 +71,8 @@
         {% set hasHint = true if item.hint.text or item.hint.html %}
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
-        {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {% else %} c-checkboxes__conditional-hidden {% endif %}">
+        {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) %}
+    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {% else %} c-checkboxes__conditional-hidden{% endif %}">
       <div class="relative flex items-start py-base">
         <div class="flex items-center mx-sm">
           <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
@@ -89,7 +91,7 @@
             classes: (item.label.classes if item.label.classes),
             attributes: item.label.attributes,
             for: id
-          }) | indent(6) | trim }}
+          }) | indent(10) | trim }}
           {% if hasHint %}
           {{ componentHint({
             id: itemHintId,
@@ -97,14 +99,14 @@
             attributes: item.hint.attributes,
             html: item.hint.html,
             text: item.hint.text
-          }) | indent(6) | trim }}
+          }) | indent(10) | trim }}
           {% endif %}
         </div>
       </div>
       {% if item.conditional.html %}
-        <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="{{ conditionalId }}">
-          {{ item.conditional.html | safe }}
-        </div>
+      <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="{{ conditionalId }}">
+        {{ item.conditional.html | safe | indent(10) }}
+      </div>
       {% endif %}
     {% endif %}
     </div>
@@ -112,8 +114,7 @@
   </div>
 {% endset -%}
 
-<!-- checkboxes -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+{% set checkboxesContent %}
   {% if params.fieldset %}
     {% call componentFieldset({
       describedBy: describedBy,
@@ -123,10 +124,15 @@
       legend: params.fieldset.legend,
       headingLevel: params.fieldset.headingLevel
     }) %}
-    {{ innerHtml | trim | safe }}
+    {{ innerHtml | safe }}
     {% endcall %}
   {% else %}
-    {{ innerHtml | trim | safe }}
+    {{ innerHtml | safe }}
   {% endif %}
+{% endset %}
+
+<!-- checkboxes -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ checkboxesContent | safe |indent(2) | trim }}
 </div>
 <!-- /checkboxes -->

package/src/templates/components/collapsible/_template.collapsible.njk

@@ -1,8 +1,8 @@
 <!-- collapsible -->
 <div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {% if params.open %} data-expanded="true" {% endif %} data-module="c-collapsible">
-	<button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
-  <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
-  <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  hidden" aria-hidden="true">Ocultar</span>
+  <button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
+    <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
+    <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  hidden" aria-hidden="true">Ocultar</span>
   </button>
   <div aria-hidden="true" class="c-collapsible__content hidden py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}>
     {% if params.html %}
@@ -14,4 +14,4 @@
     {% endif %}
   </div>
 </div>
-<!-- /collapsible -->
+<!-- /collapsible -->