desy-html 7.1.1 → 7.2.0

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

@@ -16,27 +16,23 @@
   {{ DSSubsectionTitle({
     title: "Estilos de base"
   }) }}
-  <div class="flex items-center mb-8">
-    <div class="w-1/6 mr-8">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg mb-xl">
+    <div>
       <p>Esto simula un <strong class="font-bold">Encabezado</strong>.</p>
     </div>
-    <div>
+    <div class="lg:col-span-3">
       <p class="text-neutral-dark text-sm"><code>span.font-bold</code> - <code>bold</code></p>
     </div>
-  </div>
-  <div class="flex items-center mb-8">
-    <div class="w-1/6 mr-8">
+    <div>
       <p>Esto es un <strong>strong</strong> en un texto.</p>
     </div>
-    <div>
+    <div class="lg:col-span-3">
       <p class="text-neutral-dark text-sm"><code>strong</code> - <code>semibold</code></p>
     </div>
-  </div>
-  <div class="flex items-center mb-8">
-    <div class="w-1/6 mr-8">
+    <div>
       <p>Esto es un <em>em</em> en un texto.</p>
     </div>
-    <div>
+    <div class="lg:col-span-3">
       <p class="text-neutral-dark text-sm"><code>em</code> - <code>normal</code> - <code>italic</code></p>
     </div>
   </div>
@@ -87,27 +83,23 @@
   {{ DSSubsectionTitle({
     title: "Enlaces"
   }) }}
-  <div class="flex flex-wrap items-center mb-8">
-    <div class="w-1/3 mr-8">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+    <div class="col-span-2 lg:col-span-2">
       <p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
     </div>
-    <div>
+    <div 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>
     </div>
-  </div>
-  <div class="flex flex-wrap items-center mb-8">
-    <div class="w-1/3 mr-8">
+    <div 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 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> en un texto.</p>
     </div>
-    <div>
+    <div 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>
     </div>
-  </div>
-  <div class="flex flex-wrap items-center mb-8">
-    <div class="w-1/3 mr-8">
+    <div 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>
     </div>
-    <div>
+    <div 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>
     </div>
   </div>
@@ -115,72 +107,70 @@
   {{ DSSubsectionTitle({
     title: "Párrafos"
   }) }}
-  <div class="flex mb-8">
-    <div class="w-1/2 mr-8">
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
+    <div 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>
     </div>
-    <div>
+    <div 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>
     </div>
-  </div>
-  <div class="flex mb-8">
-    <div class="w-1/2 mr-8">
+    <div 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>
     </div>
-    <div>
+    <div 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>
     </div>
-  </div>
-  <div class="flex mb-8">
-    <div class="w-1/2 mr-8">
+    <div 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>
     </div>
-    <div>
+    <div 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>
     </div>
-  </div>
-  <div class="flex mb-8">
-    <div class="w-1/2 mr-8">
+    <div 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>
     </div>
-    <div>
+    <div 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>.625rem</code> - <code>10px</code></p>
     </div>
-  </div>
-  <div class="flex mb-8">
-    <div class="w-1/2 mr-8">
+    <div 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>
     </div>
-    <div>
+    <div 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>.625rem</code> - <code>10px</code></p>
     </div>
-  </div>
-  <div class="flex mb-8">
-    <div class="w-1/2 mr-8">
+    <div 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>
     </div>
-    <div>
+    <div class="col-span-2 lg:col-span-2 mb-lg">
       <p class="text-neutral-dark text-sm">Lista. <br><code>.c-ul</code></p>
     </div>
-  </div>
-  <div class="flex mb-8">
-    <div class="w-1/2 mr-8">
+    <div 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>
+    </div>
+    <div 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>
+    </div>
+    <div 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>
     </div>
-    <div>
+    <div 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>
     </div>
   </div>
   <div class="my-lg">
     {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
-    {{ DSCodeSnippet("ds/_ds.example.textos.njk") }}
+    {{ DSCodeSnippet("ds/_ds.example.textos.njk", "textos") }}
   </div>
 </div>