desy-html 7.3.0 → 7.4.0

package/src/templates/components/button-loader/_examples.button-loader.njk

@@ -1,17 +1,17 @@
 {% set exampleComponent = "button-loader" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
-      "text": "Default"
+      "text": "Por defecto"
     }
   },
   {
-    "name": "default with loading state",
-    "description": "Simulate triggering the loading state",
+    "name": "Por defecto con el estado cargando",
+    "description": "Simula activar el estado cargando",
     "data": {
       "name": "loading",
-      "text": "Loading",
+      "text": "Cargando",
       "state": "is-loading",
       "classes": "c-button-loader--is-loading",
       "loader": {
@@ -20,11 +20,11 @@
     }
   },
   {
-    "name": "default with success state",
-    "description": "Simulate triggering the success state that only displays for seconds, then reverts to initial state",
+    "name": "Por defecto con estado éxito",
+    "description": "Simula activar el estado éxito que sólo se muestra durante unos segundos, luego vuelve al estado inicial.",
     "data": {
-      "name": "success",
-      "text": "Success",
+      "name": "éxito",
+      "text": "Éxito",
       "state": "is-success",
       "success" : {
         "text": "Acción realizada con éxito"
@@ -33,58 +33,58 @@
     }
   },
   {
-    "name": "default with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class",
+    "name": "por defecto con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
     "data": {
       "name": "active",
-      "text": "Active",
+      "text": "Activo",
       "classes": "ds-active"
     }
   },
   {
-    "name": "default with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class",
+    "name": "por defecto con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
     "data": {
       "name": "hover",
-      "text": "Hovered",
+      "text": "Hover",
       "classes": "ds-hover"
     }
   },
   {
-    "name": "default with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class",
+    "name": "por defecto con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "name": "focus",
-      "text": "Focussed",
+      "text": "Focus",
       "classes": "ds-focus"
     }
   },
   {
-    "name": "default disabled",
+    "name": "por defecto deshabilitado",
     "data": {
-      "text": "Disabled",
+      "text": "Deshabilitado",
       "disabled": true
     }
   },
   {
-    "name": "primary",
+    "name": "primario",
     "data": {
-      "text": "Primary",
+      "text": "Primario",
       "classes": "c-button-loader--primary"
     }
   },
   {
-    "name": "primary with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class",
+    "name": "primario con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
     "data": {
       "name": "active",
-      "text": "Active",
+      "text": "Activo",
       "classes": "c-button-loader--primary ds-active"
     }
   },
   {
-    "name": "primary with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class",
+    "name": "primario con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
     "data": {
       "name": "hover",
       "text": "Hover",
@@ -92,8 +92,8 @@
     }
   },
   {
-    "name": "primary with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class",
+    "name": "primario con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "name": "focus",
       "text": "Focus",
@@ -101,32 +101,32 @@
     }
   },
   {
-    "name": "primary disabled",
+    "name": "primario deshabilitado",
     "data": {
-      "text": "Disabled",
+      "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button-loader--primary"
     }
   },
   {
-    "name": "alert",
+    "name": "alerta",
     "data": {
-      "text": "Alert",
+      "text": "Alerta",
       "classes": "c-button-loader--alert"
     }
   },
   {
-    "name": "alert with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class",
+    "name": "alerta con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
     "data": {
       "name": "active",
-      "text": "Active",
+      "text": "Activo",
       "classes": "c-button-loader--alert ds-active"
     }
   },
   {
-    "name": "alert with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class",
+    "name": "alerta con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
     "data": {
       "name": "hover",
       "text": "Hover",
@@ -134,8 +134,8 @@
     }
   },
   {
-    "name": "alert with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class",
+    "name": "alerta con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "name": "focus",
       "text": "Focus",
@@ -143,32 +143,32 @@
     }
   },
   {
-    "name": "alert disabled",
+    "name": "alerta deshabilitado",
     "data": {
-      "text": "Disabled",
+      "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button-loader--alert"
     }
   },
   {
-    "name": "transparent",
+    "name": "transparente",
     "data": {
-      "text": "Transparent",
+      "text": "Transparente",
       "classes": "c-button-loader--transparent"
     }
   },
   {
-    "name": "transparent with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class",
+    "name": "transparente con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
     "data": {
       "name": "active",
-      "text": "Active",
+      "text": "Activo",
       "classes": "c-button-loader--transparent ds-active"
     }
   },
   {
-    "name": "transparent with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class",
+    "name": "transparente con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
     "data": {
       "name": "hover",
       "text": "Hover",
@@ -176,8 +176,8 @@
     }
   },
   {
-    "name": "transparent with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class",
+    "name": "transparente con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "name": "focus",
       "text": "Focus",
@@ -185,59 +185,59 @@
     }
   },
   {
-    "name": "transparent disabled",
+    "name": "transparente deshabilitado",
     "data": {
-      "text": "Disabled",
+      "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button-loader--transparent"
     }
   },
   {
-    "name": "small",
+    "name": "peque",
     "data": {
-      "text": "Small",
+      "text": "Peque",
       "classes": "c-button-loader--sm"
     }
   },
   {
-    "name": "link",
+    "name": "enlace",
     "data": {
-      "text": "Link button",
+      "text": "Botón enlace",
       "href": "/"
     }
   },
   {
-    "name": "link with target blank",
+    "name": "botón enlace con target blank",
     "data": {
-      "text": "Link button with target",
+      "text": "Botón enlace con target",
       "href": "http://www.google.com",
       "target": "_blank"
     }
   },
   {
-    "name": "link disabled",
+    "name": "enlace deshabilitado",
     "data": {
-      "text": "Disabled link button",
+      "text": "Botón enlace deshabilitado",
       "href": "/",
       "disabled": true
     }
   },
   {
-    "name": "button with right icon",
+    "name": "botón con icono a la derecha",
     "data": {
-      "html": 'Button with icon<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="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
+      "html": 'Botón con icono<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="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
       "href": "/"
     }
   },
   {
-    "name": "button with left icon",
+    "name": "botón con icono a la izquierda",
     "data": {
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>Button with icon',
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>Botón con icono',
       "href": "/"
     }
   },
   {
-    "name": "button with only icon",
+    "name": "botón sólo con icono",
     "data": {
       "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
       "href": "/",
@@ -245,7 +245,7 @@
     }
   },
   {
-    "name": "button small with only icon",
+    "name": "button peque sólo con icono",
     "data": {
       "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
       "href": "/",
@@ -257,21 +257,21 @@
     "data": {
       "element": "input",
       "name": "send-form",
-      "text": "Submit"
+      "text": "Enviar"
     }
   },
   {
-    "name": "input disabled",
+    "name": "input deshabilitado",
     "data": {
       "element": "input",
-      "text": "Submit",
+      "text": "Enviar",
       "disabled": true
     }
   },
   {
-    "name": "prevent double click",
+    "name": "prevenir doble click",
     "data": {
-      "text": "Submit",
+      "text": "Enviar",
       "preventDoubleClick": true
     }
   }

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

@@ -20,46 +20,46 @@
 </ul>
 {% endset %}
 
-{% set verButton %}
+{% 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>",
+  "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"
+    "id": "boton-card-" + id,
+    "aria-labelledby": "boton-card-" + id + " titulo-card-" + id
   }
 })  }}
-{% endset %}
+{% endmacro %}
 
-{% set verDetalleButton %}
+{% 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>",
+  "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"
+    "id": "boton-card-" + id,
+    "aria-labelledby": "boton-card-" + id + " titulo-card-" + id
   }
 })  }}
-{% endset %}
+{% endmacro %}
 
-{% set withIconContent %}
+{% 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-1" class="c-h3">Título card</h3>
+<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 | safe }}
-{% endset %}
+{{ verButton(id) | safe }}
+{% endmacro %}
 
-{% set withButton %}
-<h3 id="titulo-card-1" class="c-h3">Título card</h3>
+{% 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 | safe }}
-{% endset %}
+{{ 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>
@@ -79,23 +79,23 @@
 </ul>
 {% endset %}
 
-{% set postContent %}
+{% 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-1" class="c-h3">Título de noticia</h3>
+<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 | safe }}
-{% endset %}
+{{ verDetalleButton(id) | safe }}
+{% endmacro %}
 
 
 
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded",
@@ -103,27 +103,27 @@
     }
   },
   {
-    "name": "with icon",
+    "name": "con icono",
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": withIconContent | indent(4)
+      "caller": withIconContent("1").val | indent(4)
     }
   },
   {
-    "name": "simple sidebar",
+    "name": "barra lateral simple",
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton | indent(4)
+      "caller": withButton("2").val | indent(4)
     }
   },
   {
-    "name": "with super",
+    "name": "con super",
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton | indent(4),
+      "caller": withButton("3").val | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -136,11 +136,11 @@
     }
   },
   {
-    "name": "with sub",
+    "name": "con sub",
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton | indent(4),
+      "caller": withButton("4").val | indent(4),
       "sub": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -153,12 +153,12 @@
     }
   },
   {
-    "name": "with img left in desktop",
-    "description": "In mobile the img is in super area.",
+    "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 | indent(4),
+      "caller": withButton("5").val | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -180,12 +180,12 @@
     }
   },
   {
-    "name": "with img right in desktop",
-    "description": "In mobile the img is in super area.",
+    "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 | indent(4),
+      "caller": withButton("6").val | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -207,7 +207,7 @@
     }
   },
   {
-    "name": "home block without padding",
+    "name": "Bloque de página de inicio sin padding",
     "data": {
       "classes": "lg:w-1/2",
       "containerClasses": "py-lg border-t-8 border-neutral-dark",
@@ -215,7 +215,7 @@
     }
   },
   {
-    "name": "home block with buttons",
+    "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),
@@ -240,12 +240,12 @@
     }
   },
   {
-    "name": "items in list",
+    "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 | indent(4),
+      "caller": postContent("7").val | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -267,11 +267,11 @@
     }
   },
   {
-    "name": "home mini block with icon",
+    "name": "bloque mini de página de inicio con icono",
     "data": {
       "classes": "lg:w-1/4",
       "containerClasses": "p-base bg-neutral-lighter",
-      "caller": withIconContent | indent(4)
+      "caller": withIconContent("8").val | indent(4)
     }
   }
 ] %}