El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Tarjetas

La tarjeta es un contenedor que agrupa un conjunto concreto de datos. Puede incluir varios tipos de información relacionada, como fotografías, texto, enlaces, etc.

Modo de uso

El componente de tarjeta está escrito solo con CSS; basta con escribir el código HTML para que funcione.

Lectura relacionada

Pautas de diseño de Material Design: componentes - Tarjeta

Estilo

Estructura HTML completa

A continuación se muestra la estructura HTML completa de una tarjeta, con todos los elementos de estilo predefinidos que pueden aparecer en una tarjeta.

Ejemplo

<div class="mdui-card">

  <!-- Cabecera de la tarjeta, que incluye avatar, título y subtítulo -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="avatar.jpg"/>
    <div class="mdui-card-header-title">Title</div>
    <div class="mdui-card-header-subtitle">Subtitle</div>
  </div>

  <!-- Contenido multimedia de la tarjeta, que puede incluir imágenes, vídeos u otros elementos multimedia, así como título y subtítulo -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- La tarjeta puede incluir uno o varios botones de menú -->
    <div class="mdui-card-menu">
      <button class="mdui-btn mdui-btn-icon mdui-text-color-white">
        <i class="mdui-icon material-icons">share</i>
      </button>
    </div>
  </div>

  <!-- Título y subtítulo de la tarjeta -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- Contenido de la tarjeta -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- Botones de la tarjeta -->
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
    <button class="mdui-btn mdui-btn-icon mdui-float-right">
      <i class="mdui-icon material-icons">expand_more</i>
    </button>
  </div>

</div>

Superponer sobre un elemento multimedia

Agregar <div class="mdui-card-media-covered"></div> dentro de <div class="mdui-card-media"></div> y colocar el contenido que debe superponerse al elemento multimedia dentro de ese elemento.

Ejemplo

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Ejemplo

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
      <div class="mdui-card-actions">
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 1</button>
        <button class="mdui-btn mdui-ripple mdui-ripple-white">action 2</button>
      </div>
    </div>
  </div>
</div>

Agregar la clase .mdui-card-media-covered-top a .mdui-card-media-covered para que la capa superpuesta se sitúe en la parte superior del elemento multimedia.

Ejemplo

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-top">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Agregar la clase .mdui-card-media-covered-transparent a .mdui-card-media-covered para que la capa superpuesta tenga un fondo transparente.

Ejemplo

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Agregar la clase .mdui-card-media-covered-gradient a .mdui-card-media-covered para que la capa superpuesta tenga un fondo degradado.

Ejemplo

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
    <div class="mdui-card-media-covered mdui-card-media-covered-gradient">
      <div class="mdui-card-primary">
        <div class="mdui-card-primary-title">Title</div>
        <div class="mdui-card-primary-subtitle">Subtitle</div>
      </div>
    </div>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Botones dispuestos verticalmente

Agregar la clase .mdui-card-actions-stacked al elemento <div class="mdui-card-actions"></div> para que los botones se muestren verticalmente.

Ejemplo

<div class="mdui-card">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions mdui-card-actions-stacked">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-card`	Definir el componente de tarjeta.
`.mdui-card-header`	Definir la cabecera de la tarjeta.
`.mdui-card-header-avatar`	Definir el avatar de la cabecera de la tarjeta.
`.mdui-card-header-title`	Definir el título de la cabecera de la tarjeta.
`.mdui-card-header-subtitle`	Definir el subtítulo de la cabecera de la tarjeta.
`.mdui-card-media`	Definir el elemento multimedia de la tarjeta.
`.mdui-card-media-covered`	Definir el contenido que se superpone sobre el elemento multimedia.
`.mdui-card-media-covered-top`	Hacer que la capa superpuesta se sitúe en la parte superior del elemento multimedia.
`.mdui-card-media-covered-transparent`	Hacer que la capa superpuesta tenga un fondo transparente.
`.mdui-card-media-covered-gradient`	Hacer que la capa superpuesta tenga un fondo degradado.
`.mdui-card-menu`	Definir el menú situado en la esquina superior derecha de la tarjeta.
`.mdui-card-primary`	Definir el área de título y subtítulo de la tarjeta.
`.mdui-card-primary-title`	Definir el título de la tarjeta.
`.mdui-card-primary-subtitle`	Definir el subtítulo de la tarjeta.
`.mdui-card-content`	Definir el contenido de la tarjeta.
`.mdui-card-actions`	Definir la barra de acciones de la tarjeta.
`.mdui-card-actions-stacked`	Hacer que la barra de acciones se muestre verticalmente.

Bottom Nav

Chips