O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Card

Os cards são contêineres que possuem um conjunto específico de dados. Podem conter várias informações relacionadas, como: fotos, textos, links, etc.

Como usar

O componente de card é escrito em CSS puro, bastando escrever o código HTML para que ele funcione.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Card

Estilo

Estrutura HTML completa

Abaixo está a estrutura HTML completa de um card, contendo todos os elementos com estilos predefinidos nos cards.

Exemplo

<div class="mdui-card">

  <!-- Cabeçalho do card, contendo avatar, título e 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>

  <!-- Conteúdo de mídia do card, que pode conter imagens, vídeos e outros conteúdos de mídia, além de títulos e subtítulos -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- O card pode conter um ou mais botões de menu -->
    <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 e subtítulo do card -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

  <!-- Conteúdo do card -->
  <div class="mdui-card-content">Listen to your favorite artists and albums anytime, anywhere, online or offline.</div>

  <!-- Botões do card -->
  <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>

Sobreposição em elementos de mídia

Adicione <div class="mdui-card-media-covered"></div> dentro de <div class="mdui-card-media"></div> e coloque o conteúdo que deve ser sobreposto ao elemento de mídia dentro deste elemento.

Exemplo

<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>

Exemplo

<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>

Adicione a classe .mdui-card-media-covered-top em .mdui-card-media-covered para colocar a camada de sobreposição no topo do elemento de mídia.

Exemplo

<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>

Adicione a classe .mdui-card-media-covered-transparent em .mdui-card-media-covered para que a camada de sobreposição tenha um fundo transparente.

Exemplo

<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>

Adicione a classe .mdui-card-media-covered-gradient em .mdui-card-media-covered para que a camada de sobreposição tenha um fundo gradiente.

Exemplo

<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>

Botões alinhados verticalmente

Adicione a classe .mdui-card-actions-stacked em <div class="mdui-card-actions"></div> para alinhar os botões verticalmente.

Exemplo

<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 classes CSS

Nome da classe	Descrição
`.mdui-card`	Define o componente de card.
`.mdui-card-header`	Define o cabeçalho do card.
`.mdui-card-header-avatar`	Define o avatar no cabeçalho do card.
`.mdui-card-header-title`	Define o título no cabeçalho do card.
`.mdui-card-header-subtitle`	Define o subtítulo no cabeçalho do card.
`.mdui-card-media`	Define o elemento de mídia no card.
`.mdui-card-media-covered`	Define o conteúdo sobreposto ao elemento de mídia.
`.mdui-card-media-covered-top`	Coloca a camada de sobreposição no topo do elemento de mídia.
`.mdui-card-media-covered-transparent`	Faz com que a camada de sobreposição tenha um fundo transparente.
`.mdui-card-media-covered-gradient`	Faz com que a camada de sobreposição tenha um fundo gradiente.
`.mdui-card-menu`	Define o menu no canto superior direito do card.
`.mdui-card-primary`	Define a área de título e subtítulo do card.
`.mdui-card-primary-title`	Define o título do card.
`.mdui-card-primary-subtitle`	Define o subtítulo do card.
`.mdui-card-content`	Define o conteúdo do card.
`.mdui-card-actions`	Define a barra de ações do card.
`.mdui-card-actions-stacked`	Alinha a barra de ações verticalmente.

Barra de navegação inferior

Chip