InfoCard

Überblick

mmm-info-card ist eine flexible Inhaltskarte mit Header-, Media-, Footer- und Icon-Slots. Sie deckt kompakte Informationsboxen ebenso ab wie klickbare Teaser oder statusnahe Karten.

Subkomponenten und Slots

Die Karte unterstützt folgende Slot-Direktiven:

• [card-eyebrow]
• [card-header]
• [card-media]
• [card-footer]
• [card-icon]

Varianten und Modifier

Die Komponente wird über boolesche Modifier gesteuert:

• interactive
• outline
• primary
• accent
• subtle
• compact
• stretched

Inputs

Input	Typ	Beschreibung
interactive	boolean	Macht die Karte klickbar
outline	boolean	Schaltet eine outlined Darstellung
primary	boolean	Primäre Akzentuierung
accent	boolean	Alternative Akzentuierung
subtle	boolean	Reduzierte Flächenwirkung
compact	boolean	Kompakter Innenabstand
stretched	boolean	Dehnt die Karte auf volle Höhe
iconTemplate	TemplateRef	Template für Icon-Inhalt
icon	string | null	Icon-Key
iconAlt	string | null	Alternativer Text für Bild-Icon
iconSize	number	Größe des Icons
iconPosition	`‘top-right'	'header-left’`
iconBadge	boolean	Badge-Hintergrund für Top-Right-Icon
imageSrc	string | null	Bildquelle
imageAlt	string | null	Alt-Text des Bilds
imageFit	`‘cover'	'contain’`
imageLoading	`‘lazy'	'eager’`
footerIcon	string | null	Optionales Footer-Icon
footerIconAriaLabel	string	A11y-Label des Footer-Icons

Outputs

Output	Typ	Beschreibung
click	EventEmitter<MouseEvent>	Klick auf die Karte im interaktiven Modus

SCSS-Variablen

Wichtige Variablen:

• --mmm-info-card-padding
• --mmm-info-card-padding-compact
• --mmm-info-card-gap
• --mmm-info-card-border-radius
• --mmm-info-card-shadow
• --mmm-info-card-header-font-size
• --mmm-info-card-body-font-size
• --mmm-info-card-icon-offset
• --mmm-info-card-footer-gap
• --mmm-info-card-footer-icon-radius

Hinweise

• Der inhaltliche Aufbau ist stark über Projektion gesteuert.
• Für interaktive Karten werden Klick und Tastaturbedienung intern abgefangen.
• Bilder und Icons können kombiniert werden.

Beispiel

<mmm-info-card icon="kalender_24" iconPosition="header-left" [interactive]="true">
  <div card-header>Karten-Titel</div>
  Beispielinhalt für die Info-Card.
  <div card-footer>
    <mmm-button variant="tertiary">Mehr erfahren</mmm-button>
  </div>
</mmm-info-card>

kalender_24

Beispielinhalt fuer die Info-Card.