ListCard Component

Die ListCard-Komponente erstellt attraktive Karten, die Inhaltskategorien mit Symbolen, Titeln, Artikelanzahl und optionalen hervorgehobenen Bildern anzeigen. Perfekt zum Organisieren von Dokumentationsabschnitten oder Funktionslisten.

Props

Prop	Type	Required	Description
title	Zeichenfolge	Ja	Der im Kartenkopf angezeigte Haupttitel
imageIcon	Zeichenfolge	Ja	Pfad zum Symbolbild (40 x 40 Pixel empfohlen)
number	Nummer	Ja	Anzahl der Artikel oder Artikel in dieser Kategorie
image	Zeichenfolge	Nein	Optionales Bild für breites Kartenlayout

Features

• Symbolanzeige – Zeigt Kategoriesymbole mit dem richtigen Alternativtext an
• Artikelzähler – Zeigt die Anzahl der Artikel in jeder Kategorie an
• Zwei Layout-Modi – Kompakte und breite Layouts basierend auf der Bildpräsenz
• Responsive Design - Adapts to different screen sizes
• Slot-Inhalt – Akzeptiert benutzerdefinierten Inhalt im Kartenkörper
• Bildintegration – Verwendet die ImageMod-Komponente für optimierte Bilder

Usage Examples

Basic ListCard

import ListCard from "../../../../components/user-components/ListCard.astro";

<ListCard
  title="Getting Started"
  imageIcon="/sidebar-icons/Introduction.svg"
  number={5}
>
  Essential guides to help you get up and running quickly with Dockit.
</ListCard>

ListCard with Featured Image

import ListCard from "../../../../components/user-components/ListCard.astro";

<ListCard
  title="Components"
  imageIcon="/sidebar-icons/Themes.svg"
  number={12}
  image="/assets/components-preview.png"
>
  Learn how to use and customize all available components in your documentation.
</ListCard>

Multiple ListCards in Grid

import ListCard from "../../../../components/user-components/ListCard.astro";
import Grid from "../../../../components/user-components/Grid.astro";

<Grid columns={2}>
  <ListCard
    title="Configuration"
    imageIcon="/sidebar-icons/Global Settings.svg"
    number={8}
  >
    Customize your site settings, theme, and functionality.
  </ListCard>

  <ListCard
    title="Navigation"
    imageIcon="/sidebar-icons/Navigation.svg"
    number={6}
  >
    Set up menus, breadcrumbs, and site navigation.
  </ListCard>
</Grid>

Featured Section with Image

import ListCard from "../../../../components/user-components/ListCard.astro";

<ListCard
  title="Theme Customization"
  imageIcon="/sidebar-icons/Themes-gradient.svg"
  number={15}
  image="/assets/theme-demo.png"
>
  Complete guide to customizing colors, fonts, layouts, and creating your own theme variants. Includes live examples and code snippets.
</ListCard>

Layout Modes

Die ListCard wechselt automatisch zwischen zwei Layoutmodi:

Compact Mode (No Image)

• Single column layout
• Symbol und Titel in der Kopfzeile
• Content directly below
• Am besten für einfache Kategorieeinträge geeignet

Wide Mode (With Image)

• Two-column layout on larger screens
• Content on left, image on right
• Mehr visuelle Prominenz
• Perfekt für vorgestellte Abschnitte

Styling

Die Komponente umfasst umfassendes Styling:

• Responsives Rasterlayout, wenn ein Bild vorhanden ist
• Konsistente Abstände und Typografie
• Icon sizing (40x40px)
• Theme-aware styling
• Schwebe- und Fokuszustände

Image Requirements

• Icons: 40x40px recommended, SVG preferred
• Ausgewählte Bilder: Jede Größe, die Komponente unterstützt die reaktionsfähige Größenanpassung
• Alt-Text: Wird automatisch aus der Titel-Requisite generiert
• Optimierung: Verwendet die ImageMod-Komponente für Leistung

Best Practices

• Use consistent icon styles across related ListCards
• Halten Sie die Titel prägnant und beschreibend
• Aktualisieren Sie die Artikelnummern, wenn sich der Inhalt ändert
• Verwenden Sie ausgewählte Bilder zur Hervorhebung sparsam
• Gruppieren Sie verwandte ListCards zur besseren Organisation
• Stellen Sie sicher, dass die Symbole einen guten Kontrast haben und deutlich sichtbar sind