desy-html 10.2.2 → 11.0.2

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

@@ -1,259 +1,259 @@
-{% 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">
-  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-  {{ DSSectionTitle({
-    title: "Textos"
-  }) }}
-  <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-lg"></div>
-  {{ DSSubsectionTitle({
-    title: "Estilos de base"
-  }) }}
-  <ul>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
-        <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 mb-xl">
-        <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 mb-xl">
-        <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>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Encabezados"
-  }) }}
-  <ul>
-    <li>
-      <dl class="flex flex-wrap items-center mb-8">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h0">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 mb-8">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h1">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 mb-8">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h2">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 mb-8">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h3">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 mb-8">
-        <dt class="lg:w-1/3 lg:mr-8">
-          <p class="c-h4">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>
-  {{ DSSubsectionTitle({
-    title: "Enlaces"
-  }) }}
-  <ul>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
-        <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 mb-lg">
-          <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 mb-lg">
-        <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 mb-lg">
-          <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 mb-lg">
-        <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 mb-lg">
-          <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 mb-lg">
-        <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">Contenedor con enlace</a>
-        </dt>
-        <dd class="col-span-2 lg:col-span-2 mb-lg">
-          <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>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Párrafos"
-  }) }}
-  <ul>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
-        <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 mb-lg">
-          <p class="text-neutral-dark text-sm">Párrafo destacados. <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 mb-lg">
-        <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 mb-lg">
-          <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 mb-lg">
-        <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 mb-lg">
-          <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 mb-lg">
-        <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 mb-lg">
-          <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 mb-lg">
-        <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>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Listas"
-  }) }}
-  <ul>
-    <li>
-      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-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 mb-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 mb-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>
-  {{ 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">
+  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+  {{ DSSectionTitle({
+    title: "Textos"
+  }) }}
+  <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-lg"></div>
+  {{ DSSubsectionTitle({
+    title: "Estilos de base"
+  }) }}
+  <ul>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
+        <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 mb-xl">
+        <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 mb-xl">
+        <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>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Encabezados"
+  }) }}
+  <ul>
+    <li>
+      <dl class="flex flex-wrap items-center mb-8">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h0">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 mb-8">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h1">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 mb-8">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h2">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 mb-8">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h3">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 mb-8">
+        <dt class="lg:w-1/3 lg:mr-8">
+          <p class="c-h4">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>
+  {{ DSSubsectionTitle({
+    title: "Enlaces"
+  }) }}
+  <ul>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+        <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 mb-lg">
+          <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 mb-lg">
+        <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 mb-lg">
+          <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 mb-lg">
+        <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 mb-lg">
+          <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 mb-lg">
+        <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">Contenedor con enlace</a>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2 mb-lg">
+          <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>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Párrafos"
+  }) }}
+  <ul>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+        <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 mb-lg">
+          <p class="text-neutral-dark text-sm">Párrafo destacados. <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 mb-lg">
+        <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 mb-lg">
+          <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 mb-lg">
+        <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 mb-lg">
+          <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 mb-lg">
+        <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 mb-lg">
+          <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 mb-lg">
+        <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>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Listas"
+  }) }}
+  <ul>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-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 mb-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 mb-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>
+  {{ showHtmlFromFile("ds/_ds.example.textos.njk") }}
+</div>

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

@@ -1,31 +1,31 @@
-{% from "_macro.component-example.njk" import componentExample %}
-{% from "_macro.show-html-from-file.njk" import showHtmlFromFile %}
-
-<!--  _ds.section.typography.njk -->
-
-<div class="container mx-auto">
-  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
-  {{ DSSectionTitle({
-    title: "Tipografía en texto renderizado"
-  }) }}
-  <div class="pb-lg"></div>
-  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
-  {{ DSSubsectionTitle({
-    title: "Tailwindcss typography plugin"
-  }) }}
-
-  <p class="c-paragraph-base">Para dar estilos por defecto a contenido html sin clases que proviene de markdown o de wysiwyg, utilizamos un plugin de Tailwindcss: <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">tailwindcss-typography<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>. Basta con añadir al contenedor la clase <code>.prose</code>. También hay variantes de estos estilos que pueden usarse con breakpoints, por ejemplo: <code>prose prose-sm lg:prose-base max-w-none lg:max-w-none mx-auto</code>. Leer la <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">documentación<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>.</p>
-  <div class="pb-lg"></div>
-  {% from "components/details/_macro.details.njk" import componentDetails %}
-  {% call componentDetails({
-    "summary": {
-      "html": "Ver ejemplo"
-    }
-  })  %}
-    {% call componentExample()  %}
-      {% include "ds/_ds.example.typography.njk" %}
-    {% endcall %}
-    {{ showHtmlFromFile("ds/_ds.example.typography.njk") }}
-  {% endcall %}
-
-</div>
+{% from "_macro.component-example.njk" import componentExample %}
+{% from "_macro.show-html-from-file.njk" import showHtmlFromFile %}
+
+<!--  _ds.section.typography.njk -->
+
+<div class="container mx-auto">
+  {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+  {{ DSSectionTitle({
+    title: "Tipografía en texto renderizado"
+  }) }}
+  <div class="pb-lg"></div>
+  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+  {{ DSSubsectionTitle({
+    title: "Tailwindcss typography plugin"
+  }) }}
+
+  <p class="c-paragraph-base">Para dar estilos por defecto a contenido html sin clases que proviene de markdown o de wysiwyg, utilizamos un plugin de Tailwindcss: <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">tailwindcss-typography<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>. Basta con añadir al contenedor la clase <code>.prose</code>. También hay variantes de estos estilos que pueden usarse con breakpoints, por ejemplo: <code>prose prose-sm lg:prose-base max-w-none lg:max-w-none mx-auto</code>. Leer la <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">documentación<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>.</p>
+  <div class="pb-lg"></div>
+  {% from "components/details/_macro.details.njk" import componentDetails %}
+  {% call componentDetails({
+    "summary": {
+      "html": "Ver ejemplo"
+    }
+  })  %}
+    {% call componentExample()  %}
+      {% include "ds/_ds.example.typography.njk" %}
+    {% endcall %}
+    {{ showHtmlFromFile("ds/_ds.example.typography.njk") }}
+  {% endcall %}
+
+</div>