mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Carte

La carte est un conteneur qui regroupe des informations liées autour d’un sujet précis. Elle peut contenir divers éléments connexes, tels que des images, du texte, des liens, etc.

Utilisation

Le composant carte est écrit en CSS pur ; il suffit d’écrire du code HTML pour qu’il fonctionne.

Lecture associée

Spécifications Material Design : Composant - Carte

Style

Structure HTML complète

Voici une structure HTML complète d’une carte, comprenant tous les éléments de style prédéfini présents dans les cartes.

Exemple

<div class="mdui-card">

  <!-- En-tête de la carte, contenant un avatar, un titre et un sous-titre -->
  <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>

  <!-- Contenu multimédia de la carte, pouvant contenir des images, des vidéos et d’autres contenus multimédias, ainsi que des titres et sous-titres -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- La carte peut contenir un ou plusieurs boutons 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>

  <!-- Titre et sous-titre de la carte -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

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

  <!-- Boutons de la carte -->
  <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>

Superposition sur l’élément multimédia

Ajoutez <div class="mdui-card-media-covered"></div> dans <div class="mdui-card-media"></div>, puis placez le contenu à afficher par-dessus l’élément multimédia dans cet élément.

Exemple

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

Exemple

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

Ajoutez la classe .mdui-card-media-covered-top à .mdui-card-media-covered pour placer la couche superposée en haut de l’élément multimédia.

Exemple

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

Ajoutez la classe .mdui-card-media-covered-transparent à .mdui-card-media-covered pour donner à la couche superposée un arrière-plan transparent.

Exemple

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

Ajoutez la classe .mdui-card-media-covered-gradient à .mdui-card-media-covered pour donner à la couche superposée un arrière-plan dégradé.

Exemple

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

Boutons disposés verticalement

Ajoutez la classe .mdui-card-actions-stacked à <div class="mdui-card-actions"></div> pour disposer les boutons verticalement.

Exemple

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

Classes CSS

Nom de classe	Description
`.mdui-card`	Définir le composant carte.
`.mdui-card-header`	Définir l’en-tête de la carte.
`.mdui-card-header-avatar`	Définir l’avatar de l’en-tête de la carte.
`.mdui-card-header-title`	Définir le titre de l’en-tête de la carte.
`.mdui-card-header-subtitle`	Définir le sous-titre de l’en-tête de la carte.
`.mdui-card-media`	Définir l’élément multimédia de la carte.
`.mdui-card-media-covered`	Définir le contenu superposé à l’élément multimédia.
`.mdui-card-media-covered-top`	Placer la couche superposée en haut de l’élément multimédia.
`.mdui-card-media-covered-transparent`	Donner à la couche superposée un arrière-plan transparent.
`.mdui-card-media-covered-gradient`	Donner à la couche superposée un arrière-plan dégradé.
`.mdui-card-menu`	Définir le menu dans le coin supérieur droit de la carte.
`.mdui-card-primary`	Définir la zone du titre et du sous-titre de la carte.
`.mdui-card-primary-title`	Définir le titre de la carte.
`.mdui-card-primary-subtitle`	Définir le sous-titre de la carte.
`.mdui-card-content`	Définir le contenu de la carte.
`.mdui-card-actions`	Définir la barre d’actions de la carte.
`.mdui-card-actions-stacked`	Disposer la barre d’actions verticalement.

Navigation basse

Chip