desy-html 10.2.2 → 11.0.1

package/docs/ds/_ds.example.breadcrumbs.njk

@@ -1,65 +1,65 @@
-{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
-
-{{ componentBreadcrumbs({
-  "items": [
-    {
-      "text": "Inicio",
-      "href": "/"
-    },
-    {
-      "text": "Sección",
-      "href": "/section"
-    },
-    {
-      "text": "Sub-sección",
-      "href": "/section/sub-section"
-    },
-    {
-      "text": "Sub Sub-sección",
-      "href": "/section/sub-section/sub-sub-section"
-    }
-  ],
-  "classes": "mb-xl"
-})  }}
-{{ componentBreadcrumbs({
-  "items": [
-    {
-      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-      "href": "/"
-    },
-    {
-      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-      "href": "/"
-    },
-    {
-      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-      "href": "/"
-    },
-    {
-      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-      "href": "/"
-    }
-  ],
-  "classes": "mb-xl"
-})  }}
-{{ componentBreadcrumbs({
-  "classes": "c-breadcrumbs--truncated mb-xl",
-  "items": [
-    {
-      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-      "href": "/"
-    },
-    {
-      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-      "href": "/"
-    },
-    {
-      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-      "href": "/"
-    },
-    {
-      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-      "href": "/"
-    }
-  ]
-})  }}
+{% from "components/breadcrumbs/_macro.breadcrumbs.njk" import componentBreadcrumbs %}
+
+{{ componentBreadcrumbs({
+  "items": [
+    {
+      "text": "Inicio",
+      "href": "/"
+    },
+    {
+      "text": "Sección",
+      "href": "/section"
+    },
+    {
+      "text": "Sub-sección",
+      "href": "/section/sub-section"
+    },
+    {
+      "text": "Sub Sub-sección",
+      "href": "/section/sub-section/sub-sub-section"
+    }
+  ],
+  "classes": "mb-xl"
+})  }}
+{{ componentBreadcrumbs({
+  "items": [
+    {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+      "href": "/"
+    },
+    {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+      "href": "/"
+    },
+    {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+      "href": "/"
+    },
+    {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+      "href": "/"
+    }
+  ],
+  "classes": "mb-xl"
+})  }}
+{{ componentBreadcrumbs({
+  "classes": "c-breadcrumbs--truncated mb-xl",
+  "items": [
+    {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+      "href": "/"
+    },
+    {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+      "href": "/"
+    },
+    {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+      "href": "/"
+    },
+    {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+      "href": "/"
+    }
+  ]
+})  }}

package/docs/ds/_ds.example.card.njk

@@ -1,199 +1,199 @@
-{% from "components/card/_macro.card.njk" import componentCard %}
-{% 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 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 %}
-
-{% 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"
-    }
-  })  }}
-{% 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"
-    }
-  })  }}
-{% 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 }}
-{% 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 }}
-{% 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>
-{% 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 }}
-{% endset %}
-
-
-<div class="grid lg:grid-cols-3 gap-xl mb-lg">
-  <div>
-    {% call componentCard({
-      "containerClasses": "p-base border border-neutral-base rounded"
-    })  %}
-      {{ defaultContent | safe }}
-    {% endcall %}
-  </div>
-  <div>
-    {% call componentCard({
-      "containerClasses": "p-base border border-neutral-base rounded"
-    })  %}
-      {{ withIconContent | safe }}
-    {% endcall %}
-  </div>
-  <div>
-    {% call componentCard({
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark"
-    })  %}
-      {{ withButton | safe }}
-    {% endcall %}
-  </div>
-</div>
-<div class="grid lg:grid-cols-3 gap-xl mb-lg">
-  <div>
-    {% call componentCard({
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "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"
-        }
-      }
-    })  %}
-      {{ withButton | safe }}
-    {% endcall %}
-  </div>
-  <div>
-    {% call componentCard({
-      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "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"
-        }
-      }
-    })  %}
-      {{ withButton | safe }}
-    {% endcall %}
-  </div>
-</div>
-{% call componentCard({
-  "classes": "lg:w-2/3 mb-lg",
-  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-  "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"
-    }
-  }
-})  %}
-  {{ withButton | safe }}
-{% endcall %}
-
-{% call componentCard({
-  "classes": "lg:w-2/3 mb-lg",
-  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-  "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"
-    }
-  }
-})  %}
-  {{ withButton | safe }}
+{% from "components/card/_macro.card.njk" import componentCard %}
+{% 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 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 %}
+
+{% 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"
+    }
+  })  }}
+{% 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"
+    }
+  })  }}
+{% 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 }}
+{% 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 }}
+{% 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>
+{% 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 }}
+{% endset %}
+
+
+<div class="grid lg:grid-cols-3 gap-xl mb-lg">
+  <div>
+    {% call componentCard({
+      "containerClasses": "p-base border border-neutral-base rounded"
+    })  %}
+      {{ defaultContent | safe }}
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentCard({
+      "containerClasses": "p-base border border-neutral-base rounded"
+    })  %}
+      {{ withIconContent | safe }}
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentCard({
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark"
+    })  %}
+      {{ withButton | safe }}
+    {% endcall %}
+  </div>
+</div>
+<div class="grid lg:grid-cols-3 gap-xl mb-lg">
+  <div>
+    {% call componentCard({
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "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"
+        }
+      }
+    })  %}
+      {{ withButton | safe }}
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentCard({
+      "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+      "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"
+        }
+      }
+    })  %}
+      {{ withButton | safe }}
+    {% endcall %}
+  </div>
+</div>
+{% call componentCard({
+  "classes": "lg:w-2/3 mb-lg",
+  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+  "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"
+    }
+  }
+})  %}
+  {{ withButton | safe }}
+{% endcall %}
+
+{% call componentCard({
+  "classes": "lg:w-2/3 mb-lg",
+  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
+  "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"
+    }
+  }
+})  %}
+  {{ withButton | safe }}
 {% endcall %}