È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Card

Una Card è un contenitore che include un insieme specifico di dati. Può contenere varie informazioni correlate, come: foto, testo, link, ecc.

Modalità d'uso

Il componente Card è scritto in puro CSS e ha effetto semplicemente scrivendo il codice HTML.

Letture correlate

Linee guida di design Material Design: Componenti - Card

Stile

Struttura HTML completa

Quella che segue è la struttura HTML completa di una Card, contenente tutti gli elementi con stili predefiniti della Card.

Esempio

<div class="mdui-card">

  <!-- Intestazione della Card, contenente avatar, titolo e sottotitolo -->
  <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>

  <!-- Contenuto multimediale della Card, che può includere immagini, video, ecc., nonché titoli e sottotitoli -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- Una Card può contenere uno o più pulsanti di 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>

  <!-- Titolo e sottotitolo della Card -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

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

  <!-- Pulsanti della 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>

Sovrapposizione su elementi multimediali

In <div class="mdui-card-media"></div>, aggiungi <div class="mdui-card-media-covered"></div> e inserisci in questo elemento il contenuto da sovrapporre all'elemento multimediale.

Esempio

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

Esempio

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

Aggiungi la classe .mdui-card-media-covered-top su .mdui-card-media-covered per posizionare la sovrapposizione nella parte superiore dell'elemento multimediale.

Esempio

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

Aggiungi la classe .mdui-card-media-covered-transparent su .mdui-card-media-covered per dare alla sovrapposizione uno sfondo trasparente.

Esempio

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

Aggiungi la classe .mdui-card-media-covered-gradient su .mdui-card-media-covered per dare alla sovrapposizione uno sfondo sfumato.

Esempio

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

Pulsanti disposti verticalmente

Aggiungendo la classe .mdui-card-actions-stacked su <div class="mdui-card-actions"></div>, è possibile disporre i pulsanti verticalmente.

Esempio

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

Elenco classi CSS

Nome classe	Descrizione
`.mdui-card`	Definisce il componente Card.
`.mdui-card-header`	Definisce l'intestazione della Card.
`.mdui-card-header-avatar`	Definisce l'avatar nell'intestazione della Card.
`.mdui-card-header-title`	Definisce il titolo nell'intestazione della Card.
`.mdui-card-header-subtitle`	Definisce il sottotitolo nell'intestazione della Card.
`.mdui-card-media`	Definisce gli elementi multimediali nella Card.
`.mdui-card-media-covered`	Definisce il contenuto sovrapposto all’elemento multimediale.
`.mdui-card-media-covered-top`	Posiziona la sovrapposizione nella parte superiore dell'elemento multimediale.
`.mdui-card-media-covered-transparent`	Dà alla sovrapposizione uno sfondo trasparente.
`.mdui-card-media-covered-gradient`	Dà alla sovrapposizione uno sfondo sfumato.
`.mdui-card-menu`	Definisce il menu nell'angolo in alto a destra della Card.
`.mdui-card-primary`	Definisce l'area del titolo e del sottotitolo della Card.
`.mdui-card-primary-title`	Definisce il titolo della Card.
`.mdui-card-primary-subtitle`	Definisce il sottotitolo della Card.
`.mdui-card-content`	Definisce il contenuto della Card.
`.mdui-card-actions`	Definisce la barra delle azioni della Card.
`.mdui-card-actions-stacked`	Dispone la barra delle azioni verticalmente.

Navigazione inferiore

Chip