desy-html

Card

Parámetros Nunjucks del componente: "Card". Versión: 12.0.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: containerClasses\n  type: string\n  required: false\n  description: Classes that can be added to the inner container.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the card component.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the card component.\n- name: caller\n  type: nunjucks-block\n  required: false\n  description: Content in the flexible content area. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire media-object component in a `call` block.\n- name: super\n  type: object\n  required: false\n  description: This is an area over the card content\n  - name: backgroundFullColor\n    type: string\n    required: true\n    description: The css color used in the background image that fills all the super area.\n  - name: backgroundFullUrl\n    type: string\n    required: false\n    description: Url used in the background image that fills all the super area.\n  - name: html\n    type: string\n    required: false\n    description: HTML to use inside the super area.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the super area.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the super area.\n- name: sub\n  type: object\n  required: false\n  description: This is an area under the card content\n  - name: backgroundFullColor\n    type: string\n    required: true\n    description: The css color used in the background image that fills all the sub area.\n  - name: backgroundFullUrl\n    type: string\n    required: false\n    description: Url used in the background image that fills all the sub area.\n  - name: html\n    type: string\n    required: false\n    description: HTML to use inside the sub area.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the sub area.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the sub area.\n- name: left\n  type: object\n  required: false\n  description: This is an area over the card content\n  - name: backgroundFullColor\n    type: string\n    required: true\n    description: The css color used in the background image that fills all the left area.\n  - name: backgroundFullUrl\n    type: string\n    required: false\n    description: Url used in the background image that fills all the left area.\n  - name: html\n    type: string\n    required: false\n    description: HTML to use inside the left area.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the left area.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the super area.\n- name: right\n  type: object\n  required: false\n  description: This is an area under the card content\n  - name: backgroundFullColor\n    type: string\n    required: true\n    description: The css color used in the background image that fills all the right area.\n  - name: backgroundFullUrl\n    type: string\n    required: false\n    description: Url used in the background image that fills all the right area.\n  - name: html\n    type: string\n    required: false\n    description: HTML to use inside the right area.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the right area.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the right area.","length":3859}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/3">
  <div class="p-base border border-neutral-base rounded">
    <div class="flex">
      <div>
        <h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
        <div class="prose max-w-none">
          <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>
    </div>
  </div>
</div>
<!-- /card -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/3\",\"containerClasses\":\"p-base border border-neutral-base rounded\"}") %}
<h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
    <div class="prose max-w-none">
      <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>
    

{% endcall  %}

Título card

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.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base border border-neutral-base rounded"
}) %}
<h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
    <div class="prose max-w-none">
      <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>
{% endcall  %}

Todo el card clicable

Usa la clase .c-link--full en un único enlace dentro del card, junto con las clases relative y hover:bg-neutral-light en el parámetro containerClasses para hacer que el enlace ocupe todo el card y sea perceptible en el estado hover. Recuerda que sólo debe haber un enlace en este tipo de cards clicables.

Ejemplo: "Todo el card clicable", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/3">
  <div class="p-base border border-neutral-base rounded relative hover:bg-neutral-light">
    <div class="flex">
      <div>
        <h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
        <div class="prose max-w-none">
          <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>
    </div>
  </div>
</div>
<!-- /card -->

Ejemplo: "Todo el card clicable", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/3\",\"containerClasses\":\"p-base border border-neutral-base rounded relative hover:bg-neutral-light\"}") %}
<h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
    <div class="prose max-w-none">
      <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>
    

{% endcall  %}

Título card

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.

Mostrar códigodel ejemplo: Todo el card clicable

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light"
}) %}
<h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
    <div class="prose max-w-none">
      <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>
{% endcall  %}

Con icono

Ejemplo: "Con icono", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/3">
  <div class="p-base border border-neutral-base rounded">
    <div class="flex">
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false">
          <g transform="scale(2)">
            <path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path>
            <rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
          </g>
        </svg>
        <h3 id="titulo-card-1" class="c-h3">Título card</h3>
        <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>
        <!-- button -->
        <a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
          Más <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>
  </div>
</div>
<!-- /card -->

Ejemplo: "Con icono", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/3\",\"containerClasses\":\"p-base border border-neutral-base rounded\"}") %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
    <h3 id="titulo-card-1" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
      Más <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  %}

Título card

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.

Más
Mostrar códigodel ejemplo: Con icono

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base border border-neutral-base rounded"
}) %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
    <h3 id="titulo-card-1" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
      Más <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  %}

Sin bordes ni padding y con todo el card clicable

Ejemplo: "Sin bordes ni padding y con todo el card clicable", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/3">
  <div class="relative">
    <div class="flex">
      <div>
        <h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
        <div class="prose max-w-none">
          <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>
    </div>
  </div>
</div>
<!-- /card -->

Ejemplo: "Sin bordes ni padding y con todo el card clicable", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/3\",\"containerClasses\":\"relative\"}") %}
<h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
    <div class="prose max-w-none">
      <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>
    

{% endcall  %}

Título card

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.

Mostrar códigodel ejemplo: Sin bordes ni padding y con todo el card clicable

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "relative"
}) %}
<h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
    <div class="prose max-w-none">
      <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>
{% endcall  %}

Barra lateral simple

Ejemplo: "Barra lateral simple", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/3">
  <div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
    <div class="flex">
      <div>
        <h3 id="titulo-card-2" class="c-h3">Título card</h3>
        <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>
        <!-- button -->
        <a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-2" aria-labelledby="boton-card-2 titulo-card-2">
          Más <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>
  </div>
</div>
<!-- /card -->

Ejemplo: "Barra lateral simple", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/3\",\"containerClasses\":\"p-base bg-neutral-lighter border-t-8 border-neutral-dark\"}") %}
<h3 id="titulo-card-2" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-2" aria-labelledby="boton-card-2 titulo-card-2">
      Más <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  %}

Título card

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.

Más
Mostrar códigodel ejemplo: Barra lateral simple

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark"
}) %}
<h3 id="titulo-card-2" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-2" aria-labelledby="boton-card-2 titulo-card-2">
      Más <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  %}

Con super

Ejemplo: "Con super", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/3">
  <div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
    <div class="h-60 -m-base 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&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
    </div>
    <div class="flex">
      <div>
        <h3 id="titulo-card-3" class="c-h3">Título card</h3>
        <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>
        <!-- button -->
        <a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-3" aria-labelledby="boton-card-3 titulo-card-3">
          Más <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>
  </div>
</div>
<!-- /card -->

Ejemplo: "Con super", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/3\",\"containerClasses\":\"p-base bg-neutral-lighter border-t-8 border-neutral-dark\",\"super\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}}}") %}
<h3 id="titulo-card-3" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-3" aria-labelledby="boton-card-3 titulo-card-3">
      Más <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  %}

Título card

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.

Más
Mostrar códigodel ejemplo: Con super

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h3 id="titulo-card-3" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-3" aria-labelledby="boton-card-3 titulo-card-3">
      Más <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  %}

Con sub

Ejemplo: "Con sub", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/3">
  <div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
    <div class="flex">
      <div>
        <h3 id="titulo-card-4" class="c-h3">Título card</h3>
        <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>
        <!-- button -->
        <a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-4" aria-labelledby="boton-card-4 titulo-card-4">
          Más <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>
    <div class="h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent;  background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
    </div>
  </div>
</div>
<!-- /card -->

Ejemplo: "Con sub", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/3\",\"containerClasses\":\"p-base bg-neutral-lighter border-t-8 border-neutral-dark\",\"sub\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}}}") %}
<h3 id="titulo-card-4" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-4" aria-labelledby="boton-card-4 titulo-card-4">
      Más <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  %}

Título card

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.

Más
Mostrar códigodel ejemplo: Con sub

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/3",
  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
  "sub": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h3 id="titulo-card-4" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-4" aria-labelledby="boton-card-4 titulo-card-4">
      Más <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  %}

Con imagen a la izquierda en escritorio

En móvil la imagen aparece en el área super.

Ejemplo: "Con imagen a la izquierda en escritorio", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-2/3">
  <div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
    <div class="lg:hidden h-60 -m-base 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&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
    </div>
    <div class="flex">
      <div class="hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent;  background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
      </div>
      <div class="flex-1">
        <h3 id="titulo-card-5" class="c-h3">Título card</h3>
        <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>
        <!-- button -->
        <a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-5" aria-labelledby="boton-card-5 titulo-card-5">
          Más <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>
  </div>
</div>
<!-- /card -->

Ejemplo: "Con imagen a la izquierda en escritorio", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-2/3\",\"containerClasses\":\"p-base bg-neutral-lighter border-t-8 border-neutral-dark\",\"super\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"lg:hidden h-60 -m-base 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 lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}}}") %}
<h3 id="titulo-card-5" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-5" aria-labelledby="boton-card-5 titulo-card-5">
      Más <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  %}

Título card

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.

Más
Mostrar códigodel ejemplo: Con imagen a la izquierda en escritorio

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-2/3",
  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "lg:hidden h-60 -m-base 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 lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h3 id="titulo-card-5" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-5" aria-labelledby="boton-card-5 titulo-card-5">
      Más <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  %}

Con imagen a la derecha en escritorio

En móvil la imagen aparece en el área super.

Ejemplo: "Con imagen a la derecha en escritorio", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-2/3">
  <div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
    <div class="lg:hidden h-60 -m-base 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&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
    </div>
    <div class="flex">
      <div class="flex-1">
        <h3 id="titulo-card-6" class="c-h3">Título card</h3>
        <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>
        <!-- button -->
        <a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-6" aria-labelledby="boton-card-6 titulo-card-6">
          Más <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 lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent;  background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
      </div>
    </div>
  </div>
</div>
<!-- /card -->

Ejemplo: "Con imagen a la derecha en escritorio", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-2/3\",\"containerClasses\":\"p-base bg-neutral-lighter border-t-8 border-neutral-dark\",\"super\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}},\"right\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}}}") %}
<h3 id="titulo-card-6" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-6" aria-labelledby="boton-card-6 titulo-card-6">
      Más <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  %}

Título card

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.

Más
Mostrar códigodel ejemplo: Con imagen a la derecha en escritorio

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-2/3",
  "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  },
  "right": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h3 id="titulo-card-6" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-6" aria-labelledby="boton-card-6 titulo-card-6">
      Más <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  %}

Bloque de página de inicio sin padding

Ejemplo: "Bloque de página de inicio sin padding", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/2">
  <div class="py-lg border-t-8 border-neutral-dark">
    <div class="flex">
      <div>
        <h2 class="c-h1">Tus datos médicos e información personal</h2>
        <ul class="text-lg">
          <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
          <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
          <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
          <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
          <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- /card -->

Ejemplo: "Bloque de página de inicio sin padding", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/2\",\"containerClasses\":\"py-lg border-t-8 border-neutral-dark\"}") %}
<h2 class="c-h1">Tus datos médicos e información personal</h2>
    <ul class="text-lg">
      <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
      <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
      <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
      <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
      <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
    </ul>
    

{% endcall  %}
Mostrar códigodel ejemplo: Bloque de página de inicio sin padding

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/2",
  "containerClasses": "py-lg border-t-8 border-neutral-dark"
}) %}
<h2 class="c-h1">Tus datos médicos e información personal</h2>
    <ul class="text-lg">
      <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
      <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
      <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
      <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
      <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
    </ul>
{% endcall  %}

Bloque de página de inicio con botones

Ejemplo: "Bloque de página de inicio con botones", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div>
  <div class="p-lg bg-neutral-lighter border-t-8 border-neutral-dark">
    <div class="lg:hidden h-72 -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.png&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
    </div>
    <div class="flex">
      <div class="flex-1">
        <h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false">
            <g transform="scale(2)">
              <path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path>
              <rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect>
              <rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect>
              <rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect>
              <rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
              <rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
              <rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
            </g>
          </svg>Tu área personal</h2>
        <p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
        <ul class="flex flex-wrap gap-base">
          <li>
            <!-- button -->
            <button class="c-button c-button--primary">
              Acceder a Tu área personal
            </button>
            <!-- /button -->
          </li>
          <li>
            <!-- button -->
            <button class="c-button">
              Descargar la app
            </button>
            <!-- /button -->
          </li>
        </ul>
      </div>
      <div class="hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent;  background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
      </div>
    </div>
  </div>
</div>
<!-- /card -->

Ejemplo: "Bloque de página de inicio con botones", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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 ("{\"containerClasses\":\"p-lg bg-neutral-lighter border-t-8 border-neutral-dark\",\"super\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.png&text=Imagen\",\"classes\":\"lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}},\"right\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden\",\"attributes\":{\"role\":\"img\",\"aria-label\":\"Alt de la imagen\"}}}") %}
<h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
    <p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
    <ul class="flex flex-wrap gap-base">
      <li>
        
    
    <!-- button -->
    <button class="c-button c-button--primary" >
      Acceder a Tu área personal
    </button>
    <!-- /button -->
      </li>
      <li>
        
    
    <!-- button -->
    <button class="c-button" >
      Descargar la app
    </button>
    <!-- /button -->
      </li>
    </ul>
    

{% endcall  %}

Tu área personal

En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.

Mostrar códigodel ejemplo: Bloque de página de inicio con botones

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
    "classes": "lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  },
  "right": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden",
    "attributes": {
      "role": "img",
      "aria-label": "Alt de la imagen"
    }
  }
}) %}
<h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
    <p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
    <ul class="flex flex-wrap gap-base">
      <li>
        
    
    <!-- button -->
    <button class="c-button c-button--primary" >
      Acceder a Tu área personal
    </button>
    <!-- /button -->
      </li>
      <li>
        
    
    <!-- button -->
    <button class="c-button" >
      Descargar la app
    </button>
    <!-- /button -->
      </li>
    </ul>
{% endcall  %}

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.0.1, 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: 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: 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="p-lg bg-neutral-lighter">
    <div class="lg:hidden 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&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
    </div>
    <div class="flex">
      <div class="hidden 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&amp;text=Imagen')" role="img" aria-label="Alt de la imagen">
      </div>
      <div class="flex-1">
        <p class="c-paragraph-sm mb-base">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs">
            <g>
              <path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path>
              <path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path>
            </g>
          </svg>
          <strong>18 octubre 2022</strong>
        </p>
        <h3 id="titulo-card-7" class="c-h3">Título de noticia</h3>
        <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>
        <!-- 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>
  </div>
</div>
<!-- /card -->

Ejemplo: "Items en lista", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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\":\"p-lg bg-neutral-lighter\",\"super\":{\"backgroundFullColor\":\"transparent\",\"backgroundFullUrl\":\"https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen\",\"classes\":\"lg:hidden 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 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\"}}}") %}
<p class="c-paragraph-sm mb-base">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
      <strong>18 octubre 2022</strong>
    </p>
    <h3 id="titulo-card-7" class="c-h3">Título de noticia</h3>
    <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>
    
    
    <!-- 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  %}

18 octubre 2022

Título de noticia

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.

Ver detalle
Mostrar códigodel ejemplo: Items en lista

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-3/4",
  "containerClasses": "p-lg bg-neutral-lighter",
  "super": {
    "backgroundFullColor": "transparent",
    "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
    "classes": "lg:hidden 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 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"
    }
  }
}) %}
<p class="c-paragraph-sm mb-base">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
      <strong>18 octubre 2022</strong>
    </p>
    <h3 id="titulo-card-7" class="c-h3">Título de noticia</h3>
    <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>
    
    
    <!-- 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  %}

Bloque mini de página de inicio con icono

Ejemplo: "Bloque mini de página de inicio con icono", de código HTML, para maquetar el componente: "Card", versión: 12.0.1, 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: 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: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- card -->
<div class="lg:w-1/4">
  <div class="p-base bg-neutral-lighter">
    <div class="flex">
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false">
          <g transform="scale(2)">
            <path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path>
            <rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
            <rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect>
          </g>
        </svg>
        <h3 id="titulo-card-8" class="c-h3">Título card</h3>
        <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>
        <!-- button -->
        <a href="#" draggable="false" class="c-button c-button--transparent" id="boton-card-8" aria-labelledby="boton-card-8 titulo-card-8">
          Más <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>
  </div>
</div>
<!-- /card -->

Ejemplo: "Bloque mini de página de inicio con icono", de código Nunjucks, para maquetar el componente: "Card", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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-1/4\",\"containerClasses\":\"p-base bg-neutral-lighter\"}") %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
    <h3 id="titulo-card-8" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-8" aria-labelledby="boton-card-8 titulo-card-8">
      Más <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  %}

Título card

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.

Más
Mostrar códigodel ejemplo: Bloque mini de página de inicio con icono

Contenido

Nunjucks macro

{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
  "classes": "lg:w-1/4",
  "containerClasses": "p-base bg-neutral-lighter"
}) %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
    <h3 id="titulo-card-8" class="c-h3">Título card</h3>
    <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>
    
    
    <!-- button -->
    <a href="#" draggable="false" class="c-button c-button--transparent"  id="boton-card-8" aria-labelledby="boton-card-8 titulo-card-8">
      Más <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  %}