desy-html 16.0.3 → 17.0.0

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

@@ -1,382 +1,382 @@
-{% 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",
-      "href": "#"
-    })  }}
-  </li>
-  <li>
-    {{ componentButton({
-      "text": "Descargar la app"
-    })  }}
-  </li>
-</ul>
-{% endset %}
-
-{% macro postContent(id='id') %}
-<div class="flex flex-col">
-  <h3 id="titulo-card-{{ id }}" class="c-h3">Título de noticia</h3>
-  <p class="order-first c-paragraph-sm mb-base">
-    <svg viewBox="0 0 16 16" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Fecha de publicación: "><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4286 0C11.9019 0 12.2857 0.383755 12.2857 0.857143V1.71429H14C15.1046 1.71429 16 2.60971 16 3.71429V6.71526V8.14383V14C16 15.1046 15.1046 16 14 16H2C0.89543 16 0 15.1046 0 14V8.14383V6.71526V3.71429C0 2.60971 0.895431 1.71429 2 1.71429H3.71429V0.857143C3.71429 0.383755 4.09805 0 4.57143 0C5.04481 0 5.42857 0.383755 5.42857 0.857143V1.71429H10.5714V0.857143C10.5714 0.383755 10.9552 0 11.4286 0ZM3.71429 3.42857V4.28571C3.71429 4.7591 4.09805 5.14286 4.57143 5.14286C5.04481 5.14286 5.42857 4.7591 5.42857 4.28571V3.42857H10.5714V4.28571C10.5714 4.7591 10.9552 5.14286 11.4286 5.14286C11.9019 5.14286 12.2857 4.7591 12.2857 4.28571V3.42857H14C14.1578 3.42857 14.2857 3.55649 14.2857 3.71429V6.32171C14.1944 6.29822 14.0986 6.28571 14 6.28571H2C1.90134 6.28571 1.8056 6.29822 1.71429 6.32171V3.71429C1.71429 3.55649 1.84221 3.42857 2 3.42857H3.71429Z" fill="#1F2331"></path></svg>
-    <strong>18 octubre 2022</strong>
-  </p>
-  <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>
-</div>
-{{ verDetalleButton(id) | safe }}
-{% endmacro %}
-
-
-
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "p-base border border-neutral-base rounded-sm",
-      "caller": defaultContent | indent(4)
-    },
-    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Título en azul, negrita. Texto descriptivo en gris oscuro, peso normal, párrafos de tamaño regular. Padding interno moderado alrededor del contenido.",
-    "_generated": {
-      "hash": "a4bfad24a13b45b2e26564c0db6d836a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:34.866Z"
-    }
-  },
-  {
-    "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-sm relative hover:bg-neutral-light",
-      "caller": fullContent | indent(4)
-    },
-    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Título en azul, negrita. Texto descriptivo en gris oscuro, peso normal, párrafos de tamaño regular. Card presenta hover visual indicando interactividad completa.",
-    "_generated": {
-      "hash": "78c2100a696da1daaf14a516f17f84bb",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:34.866Z"
-    }
-  },
-  {
-    "name": "con icono",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "p-base border border-neutral-base rounded-sm",
-      "caller": withIconContent("1").val | indent(4)
-    },
-    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Icono de documento en gris oscuro alineado arriba. Título en negro negrita debajo del icono. Texto descriptivo en gris oscuro, peso normal. Enlace \"Más\" en azul con flecha derecha al final del contenido.",
-    "_generated": {
-      "hash": "b400fd036b9a543677f88af1f459b40f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:34.866Z"
-    }
-  },
-  {
-    "name": "sin bordes ni padding y con todo el card clicable",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "relative",
-      "caller": fullContent | indent(4)
-    },
-    "visualDescription": "Card con fondo blanco sin bordes visibles ni espaciado interno. Contiene un título en azul oscuro (peso normal) seguido de texto de párrafo en gris oscuro. El card es completamente clicable actuando como enlace.",
-    "_generated": {
-      "hash": "03ef0b31998b25ce3e3e868db94b4c9c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:44.939Z"
-    }
-  },
-  {
-    "name": "barra lateral simple",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton("2").val | indent(4)
-    },
-    "visualDescription": "Card con borde gris claro de 1px y fondo blanco. Incluye barra decorativa gris oscura horizontal en el borde superior, título en negro (peso negrita), texto de párrafo en gris oscuro, y enlace \"Más\" en azul con flecha. Espaciado interno consistente alrededor del contenido.",
-    "_generated": {
-      "hash": "a23b2e7251499c66302cfd72e46fb68a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:44.939Z"
-    }
-  },
-  {
-    "name": "con super",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "flex flex-col 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": "order-first h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
-        "attributes": {
-          "role": "img",
-          "aria-label": "Alt de la imagen"
-        }
-      }
-    },
-    "visualDescription": "Card con borde gris claro de 1px y fondo blanco. Contiene imagen placeholder gris con texto \"Imagen\" en blanco ocupando aproximadamente 40% superior del card, seguido de título en negro (peso negrita), texto de párrafo en gris oscuro, y enlace \"Más\" en azul con flecha. Espaciado interno alrededor del contenido de texto.",
-    "_generated": {
-      "hash": "8c47ba185d0e4b40267aaaa34f233292",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:44.939Z"
-    }
-  },
-  {
-    "name": "con sub",
-    "data": {
-      "classes": "lg:w-1/3",
-      "containerClasses": "flex flex-col 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"
-        }
-      }
-    },
-    "visualDescription": "Card con fondo blanco y borde gris delgado. Incluye barra horizontal gris oscura en el tope, seguida de título en negro negrita, bloque de texto párrafo gris oscuro, enlace azul con flecha, e imagen placeholder gris con texto blanco \"Imagen\" en la parte inferior.",
-    "_generated": {
-      "hash": "b9d48944fb50756c3579bba1c2f8277a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:54.694Z"
-    }
-  },
-  {
-    "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": "flex flex-col 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 order-first 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 order-first 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"
-        }
-      }
-    },
-    "visualDescription": "Card con fondo blanco y borde gris delgado, organizada en layout horizontal de dos columnas. Columna izquierda contiene imagen placeholder gris con texto blanco \"Imagen\". Columna derecha presenta barra horizontal gris oscura, título negro negrita, párrafo gris oscuro, y enlace azul con flecha.",
-    "_generated": {
-      "hash": "bd909379b51403d485308fa8f3ae8777",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:54.694Z"
-    }
-  },
-  {
-    "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": "flex flex-col 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 order-first 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"
-        }
-      }
-    },
-    "visualDescription": "Card con fondo blanco y borde gris delgado, organizada en layout horizontal de dos columnas. Columna izquierda contiene título negro negrita, párrafo de texto gris oscuro, y enlace azul con flecha. Columna derecha presenta imagen placeholder gris de mayor tamaño con texto blanco \"Imagen\".",
-    "_generated": {
-      "hash": "f0a07756c4f61dfcddf469e80d15110b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:51:54.694Z"
-    }
-  },
-  {
-    "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)
-    },
-    "visualDescription": "Card con fondo blanco y borde gris delgado. Contiene título \"Tus datos médicos e información personal\" en negro negrita, seguido de lista vertical de 5 enlaces azules subrayados (color #006BA6 aproximadamente). Sin espaciado interno aparente entre el borde y el contenido.",
-    "_generated": {
-      "hash": "e1bccc133d54f1bbae017ce84a02e0b7",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:52:08.348Z"
-    }
-  },
-  {
-    "name": "Bloque de página de inicio con botones",
-    "data": {
-      "containerClasses": "flex flex-col 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 order-first 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"
-        }
-      }
-    },
-    "visualDescription": "Card rectangular dividida en dos columnas: izquierda con fondo blanco, derecha con imagen placeholder gris con texto \"Imagen\" en blanco. Columna izquierda incluye icono de documento, título \"Tu área personal\" en negro negrita, párrafo de texto gris oscuro, y dos botones: uno teal (#007A7A) con texto blanco \"Acceder a Tu área personal\" y uno blanco con borde teal \"Descargar la app\".",
-    "_generated": {
-      "hash": "3ebcd5f37e5250b149e8a1db00fc75ff",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:52:08.348Z"
-    }
-  },
-  {
-    "name": "items en lista",
-    "description": "Image with fixed dimensions in desktop, text flexible.",
-    "data": {
-      "classes": "lg:w-3/4",
-      "containerClasses": "flex flex-col 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 order-first 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 order-first 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"
-        }
-      }
-    },
-    "visualDescription": "Card con borde gris delgado contiene imagen placeholder gris a la izquierda (proporción cuadrada) con texto \"Imagen\" en blanco. Sección derecha muestra icono calendario, fecha \"18 octubre 2022\" en gris oscuro, título \"Título de noticia\" en negro negrita, párrafo de texto gris oscuro (lorem ipsum), y enlace \"Ver detalle\" en teal con flecha.",
-    "_generated": {
-      "hash": "0b50cc63c9275fcccf3e9b866f3395fe",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:52:08.348Z"
-    }
-  },
-  {
-    "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)
-    },
-    "visualDescription": "Card rectangular con fondo gris claro, contiene un icono de documento en gris oscuro en la esquina superior izquierda. Debajo del icono hay un título en negrita negro, seguido de un párrafo de texto gris en tamaño regular que ocupa varias líneas. En la parte inferior izquierda hay un enlace en color azul turquesa con texto \"Más\" seguido de una flecha derecha.",
-    "_generated": {
-      "hash": "b442a2d8af731ed02a083d47df750d66",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:52:15.482Z"
-    }
-  }
+{% 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",
+      "href": "#"
+    })  }}
+  </li>
+  <li>
+    {{ componentButton({
+      "text": "Descargar la app"
+    })  }}
+  </li>
+</ul>
+{% endset %}
+
+{% macro postContent(id='id') %}
+<div class="flex flex-col">
+  <h3 id="titulo-card-{{ id }}" class="c-h3">Título de noticia</h3>
+  <p class="order-first c-paragraph-sm mb-base">
+    <svg viewBox="0 0 16 16" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Fecha de publicación: "><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4286 0C11.9019 0 12.2857 0.383755 12.2857 0.857143V1.71429H14C15.1046 1.71429 16 2.60971 16 3.71429V6.71526V8.14383V14C16 15.1046 15.1046 16 14 16H2C0.89543 16 0 15.1046 0 14V8.14383V6.71526V3.71429C0 2.60971 0.895431 1.71429 2 1.71429H3.71429V0.857143C3.71429 0.383755 4.09805 0 4.57143 0C5.04481 0 5.42857 0.383755 5.42857 0.857143V1.71429H10.5714V0.857143C10.5714 0.383755 10.9552 0 11.4286 0ZM3.71429 3.42857V4.28571C3.71429 4.7591 4.09805 5.14286 4.57143 5.14286C5.04481 5.14286 5.42857 4.7591 5.42857 4.28571V3.42857H10.5714V4.28571C10.5714 4.7591 10.9552 5.14286 11.4286 5.14286C11.9019 5.14286 12.2857 4.7591 12.2857 4.28571V3.42857H14C14.1578 3.42857 14.2857 3.55649 14.2857 3.71429V6.32171C14.1944 6.29822 14.0986 6.28571 14 6.28571H2C1.90134 6.28571 1.8056 6.29822 1.71429 6.32171V3.71429C1.71429 3.55649 1.84221 3.42857 2 3.42857H3.71429Z" fill="#1F2331"></path></svg>
+    <strong>18 octubre 2022</strong>
+  </p>
+  <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>
+</div>
+{{ verDetalleButton(id) | safe }}
+{% endmacro %}
+
+
+
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded-sm",
+      "caller": defaultContent | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Título en azul, negrita. Texto descriptivo en gris oscuro, peso normal, párrafos de tamaño regular. Padding interno moderado alrededor del contenido.",
+    "_generated": {
+      "hash": "a4bfad24a13b45b2e26564c0db6d836a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:34.866Z"
+    }
+  },
+  {
+    "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-sm relative hover:bg-neutral-light",
+      "caller": fullContent | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Título en azul, negrita. Texto descriptivo en gris oscuro, peso normal, párrafos de tamaño regular. Card presenta hover visual indicando interactividad completa.",
+    "_generated": {
+      "hash": "78c2100a696da1daaf14a516f17f84bb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:34.866Z"
+    }
+  },
+  {
+    "name": "con icono",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded-sm",
+      "caller": withIconContent("1").val | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco, borde gris claro de 1px. Icono en gris oscuro alineado arriba. Título en negro negrita debajo del icono. Texto descriptivo en gris oscuro, peso normal. Enlace en azul con flecha derecha al final del contenido.",
+    "_generated": {
+      "hash": "b400fd036b9a543677f88af1f459b40f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:34.866Z"
+    }
+  },
+  {
+    "name": "sin bordes ni padding y con todo el card clicable",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "relative",
+      "caller": fullContent | indent(4)
+    },
+    "visualDescription": "Card con fondo blanco sin bordes visibles ni espaciado interno. Contiene un título en azul oscuro (peso normal) seguido de texto de párrafo en gris oscuro. El card es completamente clicable actuando como enlace.",
+    "_generated": {
+      "hash": "03ef0b31998b25ce3e3e868db94b4c9c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:44.939Z"
+    }
+  },
+  {
+    "name": "barra lateral simple",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "flex flex-col p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "caller": withButton("2").val | indent(4)
+    },
+    "visualDescription": "Card con borde gris claro de 1px y fondo blanco. Incluye barra decorativa gris oscura horizontal en el borde superior, título en negro (peso negrita), texto de párrafo en gris oscuro, y enlace en azul con flecha. Espaciado interno consistente alrededor del contenido.",
+    "_generated": {
+      "hash": "a23b2e7251499c66302cfd72e46fb68a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:44.939Z"
+    }
+  },
+  {
+    "name": "con super",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "flex flex-col 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": "order-first h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
+        "attributes": {
+          "role": "img",
+          "aria-label": "Alt de la imagen"
+        }
+      }
+    },
+    "visualDescription": "Card con borde gris claro de 1px y fondo blanco. Contiene imagen placeholder en la parte superior ocupando aproximadamente 40% del card, seguido de título en negro (peso negrita), texto de párrafo en gris oscuro, y enlace en azul con flecha. Espaciado interno alrededor del contenido de texto.",
+    "_generated": {
+      "hash": "8c47ba185d0e4b40267aaaa34f233292",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:44.939Z"
+    }
+  },
+  {
+    "name": "con sub",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "flex flex-col 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"
+        }
+      }
+    },
+    "visualDescription": "Card con fondo blanco y borde gris delgado. Incluye barra horizontal gris oscura en el borde superior, seguida de título en negro negrita, bloque de texto párrafo gris oscuro, enlace azul con flecha, e imagen placeholder en la parte inferior.",
+    "_generated": {
+      "hash": "b9d48944fb50756c3579bba1c2f8277a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:54.694Z"
+    }
+  },
+  {
+    "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": "flex flex-col 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 order-first 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 order-first 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"
+        }
+      }
+    },
+    "visualDescription": "Card con fondo blanco y borde gris delgado, organizada en layout horizontal de dos columnas. Columna izquierda contiene imagen placeholder. Columna derecha presenta barra horizontal gris oscura, título negro negrita, párrafo gris oscuro, y enlace azul con flecha.",
+    "_generated": {
+      "hash": "bd909379b51403d485308fa8f3ae8777",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:54.694Z"
+    }
+  },
+  {
+    "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": "flex flex-col 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 order-first 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"
+        }
+      }
+    },
+    "visualDescription": "Card con fondo blanco y borde gris delgado, organizada en layout horizontal de dos columnas. Columna izquierda contiene título negro negrita, párrafo de texto gris oscuro, y enlace azul con flecha. Columna derecha presenta imagen placeholder de mayor tamaño.",
+    "_generated": {
+      "hash": "f0a07756c4f61dfcddf469e80d15110b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:51:54.694Z"
+    }
+  },
+  {
+    "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)
+    },
+    "visualDescription": "Card con fondo blanco y borde gris delgado. Contiene título en negro negrita, seguido de lista vertical de enlaces azules subrayados. Sin espaciado interno aparente entre el borde y el contenido.",
+    "_generated": {
+      "hash": "e1bccc133d54f1bbae017ce84a02e0b7",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:08.348Z"
+    }
+  },
+  {
+    "name": "Bloque de página de inicio con botones",
+    "data": {
+      "containerClasses": "flex flex-col 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 order-first 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"
+        }
+      }
+    },
+    "visualDescription": "Card rectangular dividida en dos columnas: izquierda con fondo blanco, derecha con imagen placeholder. Columna izquierda incluye icono, título en negro negrita, párrafo de texto gris oscuro, y dos botones con estilos diferenciados.",
+    "_generated": {
+      "hash": "3ebcd5f37e5250b149e8a1db00fc75ff",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:08.348Z"
+    }
+  },
+  {
+    "name": "items en lista",
+    "description": "Image with fixed dimensions in desktop, text flexible.",
+    "data": {
+      "classes": "lg:w-3/4",
+      "containerClasses": "flex flex-col 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 order-first 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 order-first 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"
+        }
+      }
+    },
+    "visualDescription": "Card con borde gris delgado contiene imagen placeholder a la izquierda (proporción cuadrada). Sección derecha muestra icono, fecha en gris oscuro, título en negro negrita, párrafo de texto gris oscuro, y enlace en color primario con flecha.",
+    "_generated": {
+      "hash": "0b50cc63c9275fcccf3e9b866f3395fe",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:08.348Z"
+    }
+  },
+  {
+    "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)
+    },
+    "visualDescription": "Card rectangular con fondo gris claro, contiene un icono en gris oscuro en la esquina superior izquierda. Debajo del icono hay un título en negrita negro, seguido de un párrafo de texto gris en tamaño regular que ocupa varias líneas. En la parte inferior izquierda hay un enlace en color azul turquesa con flecha.",
+    "_generated": {
+      "hash": "b442a2d8af731ed02a083d47df750d66",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:15.482Z"
+    }
+  }
 ] %}