desy-html 12.0.0 → 12.1.0

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

@@ -1,287 +1,287 @@
-{% from "_macro.component-example.njk" import componentExample %}
-{% from "_macro.show-html-from-file.njk" import showHtmlFromFile %}
-
-<!--  _ds.section.textos.njk -->
-
-<div class="container mx-auto">
-
-  <div class="pb-lg"></div>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Fuentes"
-  }) }}
-  <p>La tipografía principal es <a class="c-link" href="https://fonts.google.com/specimen/Open+Sans?sidebar.open&selection.family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700">Open Sans</a> en sus pesos Bold, Semibold y Regular. Utilizar en la medida de lo posible, el código que ofrece Google Fonts para integrarlo.</p>
-  <div class="pb-2xl"></div>
-  {{ DSSubsectionTitle({
-    title: "Estilos de base"
-  }) }}
-  <ul class="divide-y divide-neutral-base ">
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
-        <dt>
-          <p>Esto simula un <strong class="font-bold">Encabezado</strong>.</p>
-        </dt>
-        <dd class="lg:col-span-3">
-          <p class="text-neutral-dark text-sm"><code>span.font-bold</code> - <code>bold</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
-        <dt>
-          <p>Esto es un <strong>strong</strong> en un texto.</p>
-        </dt>
-        <dd class="lg:col-span-3">
-          <p class="text-neutral-dark text-sm"><code>strong</code> - <code>semibold</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
-        <dt>
-          <p>Esto es un <em>em</em> en un texto.</p>
-        </dt>
-        <dd class="lg:col-span-3">
-          <p class="text-neutral-dark text-sm"><code>em</code> - <code>normal</code> - <code>italic</code></p>
-        </dd>
-      </dl>
-    </li>
-  </ul>
-  <div class="pb-2xl"></div>
-
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Encabezados"
-  }) }}
-  <ul class="divide-y divide-neutral-base">
-    <li>
-      <dl class="flex flex-wrap items-center my-base">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h0 mb-base">Encabezado 0 (h1)</p>
-        </dt>
-        <dd class="lg:flex-1">
-          <p class="text-neutral-dark text-sm"><code>.c-h0</code> - <code>bold</code> - <code>black</code> - font-size: <code>2.5rem</code> - <code>40px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>50px</code> - margin-bottom: <code>.mb-8</code> - <code>2rem</code> - <code>32px</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="flex flex-wrap items-center my-base">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h1 mb-base">Encabezado 1 (h1)</p>
-        </dt>
-        <dd class="lg:flex-1">
-          <p class="text-neutral-dark text-sm"><code>.c-h1</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-3xl</code> - <code>1.875rem</code> - <code>30px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>37.5px</code> - margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="flex flex-wrap items-center my-base">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h2 mb-base">Encabezado 2 (h2)</p>
-        </dt>
-        <dd class="lg:flex-1">
-          <p class="text-neutral-dark text-sm"><code>.c-h2</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-2xl</code> - <code>1.5rem</code> - <code>24px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>30px</code> - margin-bottom: <code>.mb-base</code> - <code>1</code> - <code>16px</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="flex flex-wrap items-center my-base">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h3 mb-base">Encabezado 3 (h3)</p>
-        </dt>
-        <dd class="lg:flex-1">
-          <p class="text-neutral-dark text-sm"><code>.c-h3</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>22.5px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5rem</code> - <code>8px</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="flex flex-wrap items-center my-4">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h4 mb-base">Encabezado 4 (h4)</p>
-        </dt>
-        <dd class="lg:flex-1">
-          <p class="text-neutral-dark text-sm"><code>.c-h4</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5</code> - <code>8px</code></p>
-        </dd>
-      </dl>
-    </li>
-  </ul>
-  <div class="pb-2xl"></div>
-
-    {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Párrafos"
-  }) }}
-  <ul class="divide-y divide-neutral-base">
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-lg">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm">Párrafo destacado. <br><code>.c-paragraph-lg</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> <br> line-height: <code>1.75rem</code> - <code>28px</code> <br> margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-base">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm">Párrafo por defecto. <br><code>.c-paragraph-base</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-base text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm">Párrafo secundario. <br><code>.c-paragraph-base.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-sm">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm">Párrafo pequeño. <br><code>.c-paragraph-sm</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p class="c-paragraph-sm text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
-          <p class="text-neutral-dark text-sm">Párrafo pequeño secundario. <br><code>.c-paragraph-sm.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
-        </dd>
-      </dl>
-    </li>
-  </ul>
-  <div class="pb-2xl"></div>
-
-  {{ DSSubsectionTitle({
-    title: "Enlaces"
-  }) }}
-  <ul class="divide-y divide-neutral-base">
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p >Esto es un <a href="#" class="c-link c-link--alert">enlace</a> en una notificación de error.</p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--alert</code> - <code>normal</code> - <code>underline</code> - <code>alert-base</code> - hover: <code>alert-dark</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark">Esto es un <a href="#" class="c-link c-link--neutral">enlace</a> en un texto secundario.</p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--neutral</code> - <code>normal</code> - <code>underline</code> - <code>neutral-dark</code> - hover: <code>black</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2">
-          <p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--no-underline</code> - <code>normal</code> - <code>no-underline</code> - <code>text-primary-base</code> - hover: <code>primary-dark.underline</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
-        <dt class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
-          <a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2">
-          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--full</code> + contenedor <code>.relative.hover:bg-neutral-light</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>bg-neutral-light</code></p>
-        </dd>
-      </dl>
-    </li>
-  </ul>
-  <div class="pb-2xl"></div>
-
-
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Listas"
-  }) }}
-  <ul class="divide-y divide-neutral-base">
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
-        <dt class="col-span-2 lg:col-span-2">
-          <ul class="c-ul">
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-          </ul>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
-          <p class="text-neutral-dark text-sm">Lista. <br><code>.c-ul</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
-        <dt class="col-span-2 lg:col-span-2">
-          <ul class="c-ul c-ul--no-bullets">
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-          </ul>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
-          <p class="text-neutral-dark text-sm">Lista sin bolas. <br><code>.c-ul.c-ul--no-bullets</code></p>
-        </dd>
-      </dl>
-    </li>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
-        <dt class="col-span-2 lg:col-span-2">
-          <ul class="c-ol">
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
-          </ul>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
-          <p class="text-neutral-dark text-sm">Lista ordenada. <br><code>.c-ol</code></p>
-        </dd>
-      </dl>
-    </li>
-  </ul>
-  <div class="pb-2xl"></div>
-
-  {{ showHtmlFromFile("ds/_ds.example.textos.njk") }}
-</div>
+{% from "_macro.component-example.njk" import componentExample %}
+{% from "_macro.show-html-from-file.njk" import showHtmlFromFile %}
+
+<!--  _ds.section.textos.njk -->
+
+<div class="container mx-auto">
+
+  <div class="pb-lg"></div>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Fuentes"
+  }) }}
+  <p>La tipografía principal es <a class="c-link" href="https://fonts.google.com/specimen/Open+Sans?sidebar.open&selection.family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700">Open Sans</a> en sus pesos Bold, Semibold y Regular. Utilizar en la medida de lo posible, el código que ofrece Google Fonts para integrarlo.</p>
+  <div class="pb-2xl"></div>
+  {{ DSSubsectionTitle({
+    title: "Estilos de base"
+  }) }}
+  <ul class="divide-y divide-neutral-base ">
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
+        <dt>
+          <p>Esto simula un <strong class="font-bold">Encabezado</strong>.</p>
+        </dt>
+        <dd class="lg:col-span-3">
+          <p class="text-neutral-dark text-sm"><code>span.font-bold</code> - <code>bold</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
+        <dt>
+          <p>Esto es un <strong>strong</strong> en un texto.</p>
+        </dt>
+        <dd class="lg:col-span-3">
+          <p class="text-neutral-dark text-sm"><code>strong</code> - <code>semibold</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg my-base">
+        <dt>
+          <p>Esto es un <em>em</em> en un texto.</p>
+        </dt>
+        <dd class="lg:col-span-3">
+          <p class="text-neutral-dark text-sm"><code>em</code> - <code>normal</code> - <code>italic</code></p>
+        </dd>
+      </dl>
+    </li>
+  </ul>
+  <div class="pb-2xl"></div>
+
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Encabezados"
+  }) }}
+  <ul class="divide-y divide-neutral-base">
+    <li>
+      <dl class="flex flex-wrap items-center my-base">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h0 mb-base">Encabezado 0 (h1)</p>
+        </dt>
+        <dd class="lg:flex-1">
+          <p class="text-neutral-dark text-sm"><code>.c-h0</code> - <code>bold</code> - <code>black</code> - font-size: <code>2.5rem</code> - <code>40px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>50px</code> - margin-bottom: <code>.mb-8</code> - <code>2rem</code> - <code>32px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="flex flex-wrap items-center my-base">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h1 mb-base">Encabezado 1 (h1)</p>
+        </dt>
+        <dd class="lg:flex-1">
+          <p class="text-neutral-dark text-sm"><code>.c-h1</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-3xl</code> - <code>1.875rem</code> - <code>30px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>37.5px</code> - margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="flex flex-wrap items-center my-base">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h2 mb-base">Encabezado 2 (h2)</p>
+        </dt>
+        <dd class="lg:flex-1">
+          <p class="text-neutral-dark text-sm"><code>.c-h2</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-2xl</code> - <code>1.5rem</code> - <code>24px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>30px</code> - margin-bottom: <code>.mb-base</code> - <code>1</code> - <code>16px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="flex flex-wrap items-center my-base">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h3 mb-base">Encabezado 3 (h3)</p>
+        </dt>
+        <dd class="lg:flex-1">
+          <p class="text-neutral-dark text-sm"><code>.c-h3</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>22.5px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5rem</code> - <code>8px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="flex flex-wrap items-center my-4">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h4 mb-base">Encabezado 4 (h4)</p>
+        </dt>
+        <dd class="lg:flex-1">
+          <p class="text-neutral-dark text-sm"><code>.c-h4</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5</code> - <code>8px</code></p>
+        </dd>
+      </dl>
+    </li>
+  </ul>
+  <div class="pb-2xl"></div>
+
+    {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Párrafos"
+  }) }}
+  <ul class="divide-y divide-neutral-base">
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p class="c-paragraph-lg">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm">Párrafo destacado. <br><code>.c-paragraph-lg</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> <br> line-height: <code>1.75rem</code> - <code>28px</code> <br> margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p class="c-paragraph-base">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm">Párrafo por defecto. <br><code>.c-paragraph-base</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p class="c-paragraph-base text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm">Párrafo secundario. <br><code>.c-paragraph-base.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> <br>line-height: <code>1.5rem</code> - <code>24px</code> <br> margin-bottom: <code>.mb-base</code> - <code>1rem</code> - <code>16px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p class="c-paragraph-sm">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm">Párrafo pequeño. <br><code>.c-paragraph-sm</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p class="c-paragraph-sm text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2 mb-lg">
+          <p class="text-neutral-dark text-sm">Párrafo pequeño secundario. <br><code>.c-paragraph-sm.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
+        </dd>
+      </dl>
+    </li>
+  </ul>
+  <div class="pb-2xl"></div>
+
+  {{ DSSubsectionTitle({
+    title: "Enlaces"
+  }) }}
+  <ul class="divide-y divide-neutral-base">
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p >Esto es un <a href="#" class="c-link c-link--alert">enlace</a> en una notificación de error.</p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--alert</code> - <code>normal</code> - <code>underline</code> - <code>alert-base</code> - hover: <code>alert-dark</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark">Esto es un <a href="#" class="c-link c-link--neutral">enlace</a> en un texto secundario.</p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--neutral</code> - <code>normal</code> - <code>underline</code> - <code>neutral-dark</code> - hover: <code>black</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--no-underline</code> - <code>normal</code> - <code>no-underline</code> - <code>text-primary-base</code> - hover: <code>primary-dark.underline</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
+          <a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--full</code> + contenedor <code>.relative.hover:bg-neutral-light</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>bg-neutral-light</code></p>
+        </dd>
+      </dl>
+    </li>
+  </ul>
+  <div class="pb-2xl"></div>
+
+
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Listas"
+  }) }}
+  <ul class="divide-y divide-neutral-base">
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
+        <dt class="col-span-2 lg:col-span-2">
+          <ul class="c-ul">
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+          </ul>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2 mb-lg">
+          <p class="text-neutral-dark text-sm">Lista. <br><code>.c-ul</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
+        <dt class="col-span-2 lg:col-span-2">
+          <ul class="c-ul c-ul--no-bullets">
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+          </ul>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2 mb-lg">
+          <p class="text-neutral-dark text-sm">Lista sin bolas. <br><code>.c-ul.c-ul--no-bullets</code></p>
+        </dd>
+      </dl>
+    </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-lg">
+        <dt class="col-span-2 lg:col-span-2">
+          <ul class="c-ol">
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+            <li>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </li>
+          </ul>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2 mb-lg">
+          <p class="text-neutral-dark text-sm">Lista ordenada. <br><code>.c-ol</code></p>
+        </dd>
+      </dl>
+    </li>
+  </ul>
+  <div class="pb-2xl"></div>
+
+  {{ showHtmlFromFile("ds/_ds.example.textos.njk") }}
+</div>