desy-html 10.2.0 → 10.2.2

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

@@ -1,301 +1,301 @@
-{% set exampleComponent = "card" %}
-
-{% 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>
-{% endset %}
-
-{% set fullContent %}
-<h3 class="c-h3"><a href="#" class="c-link c-link--full">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>
-{% endset %}
-
-{% macro verButton(id='id') %}
-{{ 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-" + id,
-    "aria-labelledby": "boton-card-" + id + " titulo-card-" + id
-  }
-})  }}
-{% endmacro %}
-
-{% macro verDetalleButton(id='id') %}
-{{ 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-" + id,
-    "aria-labelledby": "boton-card-" + id + " titulo-card-" + id
-  }
-})  }}
-{% endmacro %}
-
-{% macro withIconContent(id='id') %}
-<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-{{ id }}" 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(id) | safe }}
-{% endmacro %}
-
-{% macro withButton(id='id') %}
-<h3 id="titulo-card-{{ id }}" 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(id) | safe }}
-{% endmacro %}
-
-{% 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>
-{% endset %}
-
-{% macro postContent(id='id') %}
-<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-{{ id }}" 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(id) | safe }}
-{% endmacro %}
-
-
-
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": defaultContent | indent(4)
-    }
-  },
-  {
-    "name": "todo el card clicable",
-    "description": 'Usa la clase <code>.c-link--full</code> en un único enlace dentro del card, junto con las clases <code>relative</code> y <code>hover:bg-neutral-light</code> en el parámetro <code>containerClasses</code> para hacer que el enlace ocupe todo el card y sea perceptible en el estado hover. Recuerda que sólo debe haber un enlace en este tipo de cards clicables.',
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light",
-      "caller": fullContent | indent(4)
-    }
-  },
-  {
-    "name": "con icono",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": withIconContent("1").val | indent(4)
-    }
-  },
-  {
-    "name": "sin bordes ni padding y con todo el card clicable",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "relative",
-      "caller": fullContent | indent(4)
-    }
-  },
-  {
-    "name": "barra lateral simple",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton("2").val | indent(4)
-    }
-  },
-  {
-    "name": "con super",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton("3").val | indent(4),
-      "super": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      }
-    }
-  },
-  {
-    "name": "con sub",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton("4").val | indent(4),
-      "sub": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      }
-    }
-  },
-  {
-    "name": "con imagen a la izquierda en escritorio",
-    "description": "En móvil la imagen aparece en el área super.",
-    "data": {
-      "classes": "lg:w-2/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton("5").val | indent(4),
-      "super": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      },
-      "left": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      }
-    }
-  },
-  {
-    "name": "con imagen a la derecha en escritorio",
-    "description": "En móvil la imagen aparece en el área super.",
-    "data": {
-      "classes": "lg:w-2/3",
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton("6").val | indent(4),
-      "super": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      },
-      "right": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      }
-    }
-  },
-  {
-    "name": "Bloque de página de inicio sin padding",
-    "data": {
-      "classes": "lg:w-1/2",
-      "containerClasses": "py-lg border-t-8 border-neutral-dark",
-      "caller": linksContent | indent(4)
-    }
-  },
-  {
-    "name": "Bloque de página de inicio con botones",
-    "data": {
-      "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": areaPersonalContent | indent(4),
-      "super": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
-        "classes": "lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      },
-      "right": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      }
-    }
-  },
-  {
-    "name": "items en lista",
-    "description": "Image with fixed dimensions in desktop, text flexible.",
-    "data": {
-      "classes": "lg:w-3/4",
-      "containerClasses": "p-lg bg-neutral-lighter",
-      "caller": postContent("7").val | indent(4),
-      "super": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "lg:hidden h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      },
-      "left": {
-        "backgroundFullColor": "transparent",
-        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
-        "classes": "hidden lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      }
-    }
-  },
-  {
-    "name": "bloque mini de página de inicio con icono",
-    "data": {
-      "classes": "lg:w-1/4",
-      "containerClasses": "p-base bg-neutral-lighter",
-      "caller": withIconContent("8").val | indent(4)
-    }
-  }
+{% set exampleComponent = "card" %}
+
+{% 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>
+{% endset %}
+
+{% set fullContent %}
+<h3 class="c-h3"><a href="#" class="c-link c-link--full">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>
+{% endset %}
+
+{% macro verButton(id='id') %}
+{{ 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-" + id,
+    "aria-labelledby": "boton-card-" + id + " titulo-card-" + id
+  }
+})  }}
+{% endmacro %}
+
+{% macro verDetalleButton(id='id') %}
+{{ 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-" + id,
+    "aria-labelledby": "boton-card-" + id + " titulo-card-" + id
+  }
+})  }}
+{% endmacro %}
+
+{% macro withIconContent(id='id') %}
+<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-{{ id }}" 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(id) | safe }}
+{% endmacro %}
+
+{% macro withButton(id='id') %}
+<h3 id="titulo-card-{{ id }}" 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(id) | safe }}
+{% endmacro %}
+
+{% 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>
+{% endset %}
+
+{% macro postContent(id='id') %}
+<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-{{ id }}" 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(id) | safe }}
+{% endmacro %}
+
+
+
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded",
+      "caller": defaultContent | indent(4)
+    }
+  },
+  {
+    "name": "todo el card clicable",
+    "description": 'Usa la clase <code>.c-link--full</code> en un único enlace dentro del card, junto con las clases <code>relative</code> y <code>hover:bg-neutral-light</code> en el parámetro <code>containerClasses</code> para hacer que el enlace ocupe todo el card y sea perceptible en el estado hover. Recuerda que sólo debe haber un enlace en este tipo de cards clicables.',
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light",
+      "caller": fullContent | indent(4)
+    }
+  },
+  {
+    "name": "con icono",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded",
+      "caller": withIconContent("1").val | indent(4)
+    }
+  },
+  {
+    "name": "sin bordes ni padding y con todo el card clicable",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "relative",
+      "caller": fullContent | indent(4)
+    }
+  },
+  {
+    "name": "barra lateral simple",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton("2").val | indent(4)
+    }
+  },
+  {
+    "name": "con super",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton("3").val | indent(4),
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "con sub",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton("4").val | indent(4),
+      "sub": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "con imagen a la izquierda en escritorio",
+    "description": "En móvil la imagen aparece en el área super.",
+    "data": {
+      "classes": "lg:w-2/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton("5").val | indent(4),
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "left": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "con imagen a la derecha en escritorio",
+    "description": "En móvil la imagen aparece en el área super.",
+    "data": {
+      "classes": "lg:w-2/3",
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton("6").val | indent(4),
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "right": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "Bloque de página de inicio sin padding",
+    "data": {
+      "classes": "lg:w-1/2",
+      "containerClasses": "py-lg border-t-8 border-neutral-dark",
+      "caller": linksContent | indent(4)
+    }
+  },
+  {
+    "name": "Bloque de página de inicio con botones",
+    "data": {
+      "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": areaPersonalContent | indent(4),
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
+        "classes": "lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "right": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "items en lista",
+    "description": "Image with fixed dimensions in desktop, text flexible.",
+    "data": {
+      "classes": "lg:w-3/4",
+      "containerClasses": "p-lg bg-neutral-lighter",
+      "caller": postContent("7").val | indent(4),
+      "super": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "lg:hidden h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      },
+      "left": {
+        "backgroundFullColor": "transparent",
+        "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
+        "classes": "hidden lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    }
+  },
+  {
+    "name": "bloque mini de página de inicio con icono",
+    "data": {
+      "classes": "lg:w-1/4",
+      "containerClasses": "p-base bg-neutral-lighter",
+      "caller": withIconContent("8").val | indent(4)
+    }
+  }
 ] %}

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

@@ -1,3 +1,3 @@
-{% macro componentCard(params) %}
-{% include "./_template.card.njk" %}
-{% endmacro %}
+{% macro componentCard(params) %}
+{% include "./_template.card.njk" %}
+{% endmacro %}