Items en lista #
Image with fixed dimensions in desktop, text flexible.
Ejemplo: "Items en lista", de código HTML, para maquetar el componente: "Card", versión: 12.1.0, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- card -->
<div class="lg:w-3/4">
<div class="flex flex-col p-lg bg-neutral-lighter">
<div class="flex">
<div class="flex-1">
<div class="flex flex-col">
<h3 id="titulo-card-7" class="c-h3">Título de noticia</h3>
<p class="order-first c-paragraph-sm mb-base">
<svg viewBox="0 0 16 16" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Fecha de publicación: ">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4286 0C11.9019 0 12.2857 0.383755 12.2857 0.857143V1.71429H14C15.1046 1.71429 16 2.60971 16 3.71429V6.71526V8.14383V14C16 15.1046 15.1046 16 14 16H2C0.89543 16 0 15.1046 0 14V8.14383V6.71526V3.71429C0 2.60971 0.895431 1.71429 2 1.71429H3.71429V0.857143C3.71429 0.383755 4.09805 0 4.57143 0C5.04481 0 5.42857 0.383755 5.42857 0.857143V1.71429H10.5714V0.857143C10.5714 0.383755 10.9552 0 11.4286 0ZM3.71429 3.42857V4.28571C3.71429 4.7591 4.09805 5.14286 4.57143 5.14286C5.04481 5.14286 5.42857 4.7591 5.42857 4.28571V3.42857H10.5714V4.28571C10.5714 4.7591 10.9552 5.14286 11.4286 5.14286C11.9019 5.14286 12.2857 4.7591 12.2857 4.28571V3.42857H14C14.1578 3.42857 14.2857 3.55649 14.2857 3.71429V6.32171C14.1944 6.29822 14.0986 6.28571 14 6.28571H2C1.90134 6.28571 1.8056 6.29822 1.71429 6.32171V3.71429C1.71429 3.55649 1.84221 3.42857 2 3.42857H3.71429Z" fill="#1F2331"></path>
</svg>
<strong>18 octubre 2022</strong>
</p>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
</div>
<!-- button -->
<a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-7" aria-labelledby="boton-card-7 titulo-card-7">
Ver detalle <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em">
<path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path>
</svg>
</a>
<!-- /button -->
</div>
<div class="hidden order-first lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
</div>
<div class="lg:hidden order-first h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
</div>
</div>
<!-- /card -->
Ejemplo: "Items en lista", de código Nunjucks, para maquetar el componente: "Card", versión: 12.1.0, del sistema de diseño DESY
Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard ("{\"classes\":\"lg:w-3/4\",\"containerClasses\":\"flex flex-col p-lg bg-neutral-lighter\",\"super\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"lg:hidden order-first h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}},\"left\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"hidden order-first lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}}}") %}
<div class="flex flex-col">
<h3 id="titulo-card-7" class="c-h3">Título de noticia</h3>
<p class="order-first c-paragraph-sm mb-base">
<svg viewBox="0 0 16 16" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Fecha de publicación: "><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4286 0C11.9019 0 12.2857 0.383755 12.2857 0.857143V1.71429H14C15.1046 1.71429 16 2.60971 16 3.71429V6.71526V8.14383V14C16 15.1046 15.1046 16 14 16H2C0.89543 16 0 15.1046 0 14V8.14383V6.71526V3.71429C0 2.60971 0.895431 1.71429 2 1.71429H3.71429V0.857143C3.71429 0.383755 4.09805 0 4.57143 0C5.04481 0 5.42857 0.383755 5.42857 0.857143V1.71429H10.5714V0.857143C10.5714 0.383755 10.9552 0 11.4286 0ZM3.71429 3.42857V4.28571C3.71429 4.7591 4.09805 5.14286 4.57143 5.14286C5.04481 5.14286 5.42857 4.7591 5.42857 4.28571V3.42857H10.5714V4.28571C10.5714 4.7591 10.9552 5.14286 11.4286 5.14286C11.9019 5.14286 12.2857 4.7591 12.2857 4.28571V3.42857H14C14.1578 3.42857 14.2857 3.55649 14.2857 3.71429V6.32171C14.1944 6.29822 14.0986 6.28571 14 6.28571H2C1.90134 6.28571 1.8056 6.29822 1.71429 6.32171V3.71429C1.71429 3.55649 1.84221 3.42857 2 3.42857H3.71429Z" fill="#1F2331"></path></svg>
<strong>18 octubre 2022</strong>
</p>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
</div>
<!-- button -->
<a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-7" aria-labelledby="boton-card-7 titulo-card-7">
Ver detalle <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a>
<!-- /button -->
{% endcall %}