desy-html 7.1.2 → 7.3.0

package/docs/ds/_ds.example.colores-neutros.njk

@@ -1,27 +1,27 @@
-<div class="grid grid-cols-8 gap-5 mb-sm">
-  <div class="col-span-4 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-    <div class="absolute flex inset-0 bg-black text-white"><div class="self-center text-center w-full">Black</div></div>
+<div class="grid grid-cols-6 lg:grid-cols-8 gap-5 mb-sm">
+  <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
+    <div class="absolute flex inset-0 bg-black text-white"><div class="self-center text-center w-full"><p>Black</p></div></div>
   </div>
-  <div class="flex col-span-4 lg:col-span-2">
+  <div class="flex col-span-3 lg:col-span-2">
     <div class="self-center text-sm">
-      Focus <br>
-      Aviso de precaución <br>
-      En espera
+      <p>Focus</p>
+      <p>Aviso de precaución</p>
+      <p>En espera</p>
     </div>
   </div>
   <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-    <div class="absolute flex inset-0 bg-neutral-lighter text-black"><div class="self-center text-center w-full">neutral-lighter <br><br>#f6f6f5</div></div>
+    <div class="absolute flex inset-0 bg-neutral-lighter text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-lighter</p><p>#f6f6f5</p></div></div>
   </div>
   <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-    <div class="absolute flex inset-0 bg-neutral-light text-black"><div class="self-center text-center w-full">neutral-light <br><br>#ededec</div></div>
+    <div class="absolute flex inset-0 bg-neutral-light text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-light</p><p>#ededec</p></div></div>
   </div>
   <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-    <div class="absolute flex inset-0 bg-neutral-base text-black"><div class="self-center text-center w-full">neutral-base <br><br>#92949B</div></div>
+    <div class="absolute flex inset-0 bg-neutral-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-base</p><p>#92949B</p></div></div>
   </div>
   <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-    <div class="absolute flex inset-0 bg-neutral-dark text-white"><div class="self-center text-center w-full">neutral-dark <br><br>#5e616b</div></div>
+    <div class="absolute flex inset-0 bg-neutral-dark text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-dark</p><p>#5e616b</p></div></div>
   </div>
   <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-    <div class="absolute flex inset-0 bg-black text-white"><div class="self-center text-center w-full">black <br><br>#1f2331</div></div>
+    <div class="absolute flex inset-0 bg-black text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">black</p><p>#1f2331</p></div></div>
   </div>
 </div>

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

@@ -2,8 +2,8 @@
     <div class="col-span-2 lg:col-span-4 bg-neutral-light h-12 flex items-center justify-center">100%</div>
     <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
     <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
-    <div class="col-span-2 lg:col-span-3 bg-blue-100 h-12 flex items-center justify-center">75%</div>
-    <div class="col-span-2 lg:col-span-1 bg-blue-100 h-12 flex items-center justify-center">25%</div>
+    <div class="col-span-2 lg:col-span-3 bg-primary-light h-12 flex items-center justify-center">75%</div>
+    <div class="col-span-2 lg:col-span-1 bg-primary-light h-12 flex items-center justify-center">25%</div>
     <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
     <div class="col-span-2 lg:col-span-3 bg-neutral-light h-12 flex items-center justify-center">75%</div>
     <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>

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

@@ -14,7 +14,7 @@
   </p>
   <p>The <code>@tailwindcss/typography</code> plugin is our attempt to give you what you <em>actually</em> want, without any of the downsides of doing something stupid like disabling our base styles.</p>
   <p>It adds a new <code>prose</code> class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:</p>
-  <pre><code class="language-html">&lt;article class="prose"&gt;
+  <pre><code class="language-markup">&lt;article class="prose"&gt;
   &lt;h1&gt;Garlic bread with cheese: What the science tells us&lt;/h1&gt;
   &lt;p&gt;
     For years parents have espoused the health benefits of eating garlic bread with cheese to their

package/docs/ds/_ds.macro.code-snippet.njk

@@ -1,13 +1,32 @@
+{% from "components/details/_macro.details.njk" import componentDetails %}
+{% from "components/tabs/_macro.tabs.njk" import componentTabs %}
+
 {% macro DSCodeSnippet(urlSnippet, params={}) %}
-{% set codeSnippetVariable %}{% include urlSnippet %}{% endset %}
-<div class="c-code-snippet">
-  <button class="inline-block ml-sm text-base text-primary-base font-normal hover:text-primary-dark underline cursor-pointer c-code-snippet__button">
-    <span class="c-code-snippet__show">Mostrar</span><span class="c-code-snippet__hide hidden">Ocultar</span> código
-  </button>
-  <div class="c-markup hidden">
+  {% set codeSnippetVariable %}{% include urlSnippet %}{% endset %}
+  {% set htmlContent %}
     <div class="py-base">
-      <pre><code class="language-html">{{ codeSnippetVariable|escape }}</code></pre>
+      <pre><code class="language-markup text-sm">{{ codeSnippetVariable|escape }}</code></pre>
     </div>
-  </div>
-</div>
+  {% endset %}
+  {% call componentDetails({
+    "summary": {
+      "html": 'Mostrar código<span class="sr-only">del ejemplo: ' + params + '</span>',
+      "classes": "c-link text-sm"
+    }
+  })  %}
+    {{ componentTabs({
+      "tablistAriaLabel": "Tab example",
+      "idPrefix": "tab-" + params,
+      "classes": "c-tabs--scroll",
+      "items": [
+        {
+          "text": "HTML",
+          "panel": {
+            "html": htmlContent | trim | safe
+          }
+        }
+      ]
+    })  }}
+{% endcall %}
+
 {% endmacro %}

package/docs/ds/_ds.section.color.njk

@@ -15,7 +15,7 @@
   {% include "ds/_ds.example.color-de-interaccion.njk" %}
   <div class="my-lg">
     {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
-    {{ DSCodeSnippet("ds/_ds.example.color-de-interaccion.njk") }}
+    {{ DSCodeSnippet("ds/_ds.example.color-de-interaccion.njk", "color-de-interaccion") }}
   </div>
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
@@ -23,68 +23,10 @@
     title: "Colores de soporte"
   }) }}
   <p class="c-paragraph-base">Son los colores utilizados para diversos usos.</p>
-  <div class="grid grid-cols-6 gap-5 mb-sm">
-    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-warning-base text-black"><div class="self-center text-center w-full">Warning</div></div>
-    </div>
-    <div class="flex col-span-3 lg:col-span-2">
-      <div class="self-center text-sm">
-        Focus <br>
-        Aviso de precaución <br>
-        En espera
-      </div>
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-warning-light text-black"><div class="self-center text-center w-full">warning-light <br><br>#fef6b2</div></div>
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-warning-base text-black"><div class="self-center text-center w-full">warning-base <br><br>#fdcb33</div></div>
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-warning-dark text-black"><div class="self-center text-center w-full">warning-dark <br><br>#b88e12</div></div>
-    </div>
-  </div>
-  <div class="grid grid-cols-6 gap-5 mb-sm">
-    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-success-base text-black"><div class="self-center text-center w-full">Success</div></div>
-    </div>
-    <div class="col-span-3 lg:col-span-2">
-      <div class="self-center text-sm">
-        Confirmación <br>
-        Publicado <br>
-        Correcto
-      </div>
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-success-light text-black"><div class="self-center text-center w-full">success-light <br><br>#dcf8e2</div></div>
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-success-base text-black"><div class="self-center text-center w-full">success-base <br><br>#24d14c</div></div>
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-success-dark font-semibold text-black"><div class="self-center text-center w-full">success-dark <br><br>#1aa23a</div></div>
-    </div>
-  </div>
-  <div class="grid grid-cols-6 gap-5 mb-sm">
-    <div class="col-span-3 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-info-base text-black"><div class="self-center text-center w-full">Info</div></div>
-    </div>
-    <div class="col-span-3 lg:col-span-2">
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-info-light text-black"><div class="self-center text-center w-full">info-light <br><br>#feebcc</div></div>
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-info-base text-black"><div class="self-center text-center w-full">info-base <br><br>#fa9902</div></div>
-    </div>
-    <div class="col-span-2 lg:col-span-1 aspect-w-1 aspect-h-1 relative rounded overflow-hidden">
-      <div class="absolute flex inset-0 bg-info-dark font-semibold text-black"><div class="self-center text-center w-full">info-dark <br><br>#c97a00</div></div>
-    </div>
-  </div>
   {% include "ds/_ds.example.colores-de-soporte.njk" %}
   <div class="my-lg">
     {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
-    {{ DSCodeSnippet("ds/_ds.example.colores-de-soporte.njk") }}
+    {{ DSCodeSnippet("ds/_ds.example.colores-de-soporte.njk", "colores-de-soporte") }}
   </div>
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
@@ -95,7 +37,7 @@
   {% include "ds/_ds.example.colores-neutros.njk" %}
   <div class="my-lg">
     {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
-    {{ DSCodeSnippet("ds/_ds.example.colores-neutros.njk") }}
+    {{ DSCodeSnippet("ds/_ds.example.colores-neutros.njk", "colores-neutros") }}
   </div>
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
@@ -106,7 +48,7 @@
   {% include "ds/_ds.example.colores-cabecera.njk" %}
   <div class="my-lg">
     {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
-    {{ DSCodeSnippet("ds/_ds.example.colores-cabecera.njk") }}
+    {{ DSCodeSnippet("ds/_ds.example.colores-cabecera.njk", "colores-de-cabecera") }}
   </div>
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
@@ -117,7 +59,7 @@
   {% include "ds/_ds.example.border.njk" %}
   <div class="my-lg">
     {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
-    {{ DSCodeSnippet("ds/_ds.example.border.njk") }}
+    {{ DSCodeSnippet("ds/_ds.example.border.njk", "border") }}
   </div>
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
@@ -126,7 +68,7 @@
   }) }}
   <p class="mb-base">El contraste de color entre el texto y los elementos interactivos debe cumplir el mínimo AA de WCAG para herramientas internas del gobierno y AAA para herramientas a las que tenga acceso la ciudadanía.</p>
   <p class="mb-base">El texto sobre masa de color en principio solo se usa en los botones principales, pero en caso de usarse, el peso de fuente debe ser Semibold y un tamaño mínimo de texto de 16px.</p>
-  <div class="grid grid-cols-5 gap-5 mb-lg">
+  <div class="grid grid-cols-3 lg:grid-cols-5 gap-5 mb-lg">
     <div class="p-4 bg-primary-base font-semibold text-white">
       Texto
     </div>
@@ -144,7 +86,7 @@
     </div>
   </div>
   <p class="mb-base">En los mensajes destacados utiliza los colores claros con texto negro.</p>
-  <div class="grid grid-cols-5 gap-5 mb-base">
+  <div class="grid grid-cols-3 lg:grid-cols-5 gap-5 mb-base">
     <div class="p-4 bg-primary-light">
       Texto
     </div>

package/docs/ds/_ds.section.espaciado.njk

@@ -13,7 +13,7 @@
   }) }}
   <div class="prose">
     <p>
-      Utiliza en la medida de lo posible estos valores, que se aplicarán automáticamente por Tailwind a height, max-height, margin, padding, gap e inset.
+      Utiliza en la medida de lo posible estos valores, que se aplicarán automáticamente por Tailwind CSS a height, max-height, margin, padding, gap e inset.
     </p>
     <table>
       <thead>
@@ -167,7 +167,7 @@
   }) }}
   <div class="prose max-w-none">
     <p>
-      desy-html usa los valores de Tailwind y adicionalmente estos otros:
+      desy-html usa los valores de Tailwind CSS y adicionalmente estos otros:
     </p>
     <table>
       <thead>
@@ -211,300 +211,9 @@
   </div>
   <div class="pb-xl"></div>
   {{ DSSubsectionTitle({
-    title: "Espaciado por defecto de Tailwind CSS"
+    title: "Más espaciados"
   }) }}
   <div class="prose">
-    <table>
-      <thead>
-        <tr>
-          <th>Nombre</th>
-          <th>Tamaño</th>
-          <th>Pixels</th>
-          <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>0</td>
-          <td>0px</td>
-          <td>0px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 0px;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>px</td>
-          <td>1px</td>
-          <td>1px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 1px;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>0.5</td>
-          <td>0.125rem</td>
-          <td>2px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 0.125rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>1</td>
-          <td>0.25rem</td>
-          <td>4px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 0.25rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>1.5</td>
-          <td>0.375rem</td>
-          <td>6px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 0.375rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>0.5rem</td>
-          <td>8px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 0.5rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>2.5</td>
-          <td>0.625rem</td>
-          <td>10px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 0.625rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>0.75rem</td>
-          <td>12px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 0.75rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>3.5</td>
-          <td>0.875rem</td>
-          <td>14px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 0.875rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>4</td>
-          <td>1rem</td>
-          <td>16px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 1rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>5</td>
-          <td>1.25rem</td>
-          <td>20px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 1.25rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>6</td>
-          <td>1.5rem</td>
-          <td>24px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 1.5rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>7</td>
-          <td>1.75rem</td>
-          <td>28px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 1.75rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>8</td>
-          <td>2rem</td>
-          <td>32px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 2rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>9</td>
-          <td>2.25rem</td>
-          <td>36px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 2.25rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>10</td>
-          <td>2.5rem</td>
-          <td>40px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 2.5rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>11</td>
-          <td>2.75rem</td>
-          <td>44px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 2.75rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>12</td>
-          <td>3rem</td>
-          <td>48px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 3rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>14</td>
-          <td>3.5rem</td>
-          <td>56px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 3.5rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>16</td>
-          <td>4rem</td>
-          <td>64px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 4rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>20</td>
-          <td>5rem</td>
-          <td>80px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 5rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>24</td>
-          <td>6rem</td>
-          <td>96px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 6rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>28</td>
-          <td>7rem</td>
-          <td>112px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 7rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>32</td>
-          <td>8rem</td>
-          <td>128px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 8rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>36</td>
-          <td>9rem</td>
-          <td>144px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 9rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>40</td>
-          <td>10rem</td>
-          <td>160px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 10rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>44</td>
-          <td>11rem</td>
-          <td>176px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 11rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>48</td>
-          <td>12rem</td>
-          <td>192px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 12rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>52</td>
-          <td>13rem</td>
-          <td>208px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 13rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>56</td>
-          <td>14rem</td>
-          <td>224px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 14rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>60</td>
-          <td>15rem</td>
-          <td>240px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 15rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>64</td>
-          <td>16rem</td>
-          <td>256px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 16rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>72</td>
-          <td>18rem</td>
-          <td>288px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 18rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>80</td>
-          <td>20rem</td>
-          <td>320px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 20rem;"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>96</td>
-          <td>24rem</td>
-          <td>384px</td>
-          <td class="hidden sm:table-cell">
-            <div class="h-4 bg-primary-light" style="width: 24rem;"></div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <p>Si necesitas más espaciados, usa los <a href="https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale">espaciados por defecto de Tailwind CSS<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a>.</p>
   </div>
 </div>

package/docs/ds/_ds.section.layout.njk

@@ -4,7 +4,7 @@
 <div class="container mx-auto">
   {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
   {{ DSSectionTitle({
-    title: "Layout"
+    title: "Breakpoints y retícula"
   }) }}
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
@@ -32,12 +32,12 @@
   {{ DSSubsectionTitle({
     title: "Pantallas grandes - escritorio"
   }) }}
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-xl mt-base">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-xl mt-base mb-xl">
     <div class="col-span-2 lg:col-span-4 bg-neutral-light h-12 flex items-center justify-center">100%</div>
     <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
     <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
-    <div class="col-span-2 lg:col-span-3 bg-blue-100 h-12 flex items-center justify-center">75%</div>
-    <div class="col-span-2 lg:col-span-1 bg-blue-100 h-12 flex items-center justify-center">25%</div>
+    <div class="col-span-2 lg:col-span-3 bg-primary-light h-12 flex items-center justify-center">75%</div>
+    <div class="col-span-2 lg:col-span-1 bg-primary-light h-12 flex items-center justify-center">25%</div>
     <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
     <div class="col-span-2 lg:col-span-3 bg-neutral-light h-12 flex items-center justify-center">75%</div>
     <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
@@ -67,6 +67,6 @@
   <div class="pb"></div>
   <div class="my-lg">
     {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
-    {{ DSCodeSnippet("ds/_ds.example.layout.njk") }}
+    {{ DSCodeSnippet("ds/_ds.example.layout.njk", "layout") }}
   </div>
 </div>