menuMDUIDocs
color_lens
Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Card

Cards sind Container zur Darstellung zusammengehöriger Informationen. Sie können Fotos, Text, Links und andere Inhalte enthalten.

Verwendung

Die Card-Komponente ist rein per CSS umgesetzt; es reicht aus, den HTML-Code zu schreiben, damit sie funktioniert.

Verwandte Themen

Material Design-Richtlinien: Komponenten - Card

Stil

Vollständige HTML-Struktur

Im folgenden Beispiel finden Sie die vollständige HTML-Struktur für eine Card mit allen vordefinierten gestylten Elementen.

codeplay_arrow
Beispiel
<div class="mdui-card">

  <!-- Card-Header mit Avatar, Titel und Untertitel. -->
  <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>

  <!-- Card-Medieninhalte können Fotos, Videos und andere Medien sowie Titel und Untertitel enthalten. -->
  <div class="mdui-card-media">
    <img src="card.jpg"/>

    <!-- Eine Card kann eine oder mehrere Menü-Buttons enthalten. -->
    <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>

  <!-- Titel und Untertitel der Card. -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title">Title</div>
    <div class="mdui-card-primary-subtitle">Subtitle</div>
  </div>

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

  <!-- Card-Buttons. -->
  <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>

Über Medien-Elementen liegend

Fügen Sie <div class="mdui-card-media-covered"></div> in <div class="mdui-card-media"></div> ein und legen Sie den Inhalt, der das Medien-Element überlagern soll, in dieses Element.

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

Fügen Sie die Klasse .mdui-card-media-covered-top zu .mdui-card-media-covered hinzu, um das Overlay am oberen Rand des Medien-Elements zu platzieren.

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

Fügen Sie die Klasse .mdui-card-media-covered-transparent zu .mdui-card-media-covered hinzu, um dem Overlay einen transparenten Hintergrund zu geben.

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

Fügen Sie die Klasse .mdui-card-media-covered-gradient zu .mdui-card-media-covered hinzu, um dem Overlay einen Verlaufs-Hintergrund zu geben.

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

Vertikal ausgerichtete Buttons

Fügen Sie die Klasse .mdui-card-actions-stacked zu <div class="mdui-card-actions"></div> hinzu, um die Buttons vertikal anzuordnen.

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

CSS-Klassenliste

KlassennameBeschreibung
.mdui-cardDefinieren Sie die Card-Komponente.
.mdui-card-headerDefinieren Sie den Card-Header.
.mdui-card-header-avatarDefinieren Sie den Avatar im Card-Header.
.mdui-card-header-titleDefinieren Sie den Titel im Card-Header.
.mdui-card-header-subtitleDefinieren Sie den Untertitel im Card-Header.
.mdui-card-mediaDefinieren Sie das Medien-Element in der Card.
.mdui-card-media-coveredDefinieren Sie den Inhalt, der das Medien-Element überlagern soll.
.mdui-card-media-covered-topPlatzieren Sie das Overlay am oberen Rand des Medien-Elements.
.mdui-card-media-covered-transparentGeben Sie dem Overlay einen transparenten Hintergrund.
.mdui-card-media-covered-gradientGeben Sie dem Overlay einen Verlaufs-Hintergrund.
.mdui-card-menuDefinieren Sie das Menü in der oberen rechten Ecke der Card.
.mdui-card-primaryDefinieren Sie den Titel- und Untertitelbereich der Card.
.mdui-card-primary-titleDefinieren Sie den Card-Titel.
.mdui-card-primary-subtitleDefinieren Sie den Card-Untertitel.
.mdui-card-contentDefinieren Sie den Card-Inhalt.
.mdui-card-actionsDefinieren Sie die Aktionsleiste der Card.
.mdui-card-actions-stackedOrdnen Sie die Aktionsleiste vertikal an.
arrow_backPrevious
Bottom Navigation
arrow_forwardNext
Chip