NewCard Component

Die NewCard-Komponente ist ein vielseitiges, modernes Kartenelement, das sich perfekt zur Präsentation von Funktionen, Diensten oder Inhaltsblöcken eignet. Es umfasst ein schönes Design, Symbolunterstützung und interaktive Hover-Effekte.

Props

Prop	Type	Required	Default	Description
icon	string	No	-	Starlight icon name to display
title	Zeichenfolge	Ja	-	Der Kartentitel (unterstützt HTML)
iconColor	Zeichenfolge	Nein	-	Benutzerdefinierte Farbe für das Symbol
size	string	No	“large”	Card size variant (“large” or “sm”)

Features

• Icon Integration - Uses Starlight’s icon system
• Zwei Größenvarianten – große (default) und kleine Optionen
• Hover-Animation – Pfeilsymbol mit Rotationseffekt
• Verlaufsstil – Moderne Verlaufsränder und -hintergründe
• HTML Support - Title prop supports HTML content
• Responsive Design - Adapts to different screen sizes
• Slot-Inhalt – Akzeptiert benutzerdefinierten Inhalt im Kartenkörper

Usage Examples

Basic NewCard

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

<NewCard
  title="Getting Started"
  icon="rocket"
>
  Quick setup guide to get your documentation site running in minutes.
</NewCard>

Small Card Variant

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

<NewCard
  title="Configuration"
  icon="setting"
  size="sm"
>
  Customize your site settings and appearance.
</NewCard>

Card with Custom Icon Color

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

<NewCard
  title="API Reference"
  icon="document"
  iconColor="#3b82f6"
>
  Complete API documentation and examples.
</NewCard>

Grid of NewCards

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

<Grid columns={3}>
  <NewCard title="Install" icon="add-document">
    Get up and running quickly
  </NewCard>

  <NewCard title="Configure" icon="setting">
    Customize your setup
  </NewCard>

  <NewCard title="Deploy" icon="rocket">
    Publish your site
  </NewCard>
</Grid>

Size Variants

Large Cards (Default)

• Full padding (py-12 px-10)
• 2rem icon size
• Includes hover arrow animation
• Am besten für Feature-Showcases geeignet

Small Cards

• Compact padding (p-6)
• 1.4rem icon size
• No arrow animation
• Perfekt für kompakte Layouts

Icon Support

Die Komponente unterstützt alle Starlight-Symbole:

• rocket – Für Anleitungen zum Einstieg
• setting – Für Konfigurationsthemen
• document – Für Dokumentationsseiten
• add-document – Für Erstellungsworkflows
• Und viele weitere aus der Starlight-Icon-Bibliothek

Styling Features

• Gradient Borders - Modern visual appeal
• Hover Effects - Interactive arrow rotation
• Theme-Integration – Funktioniert mit hellen/dunklen Themes
• Group Hover - Enhanced interactivity
• Responsive Spacing - Adapts to screen size

Best Practices

• Use consistent icon styles across related cards
• Choose appropriate size variants based on content length
• Gruppieren Sie verwandte NewCards zur besseren Organisation
• Verwenden Sie beschreibende Titel, die den Zweck des Inhalts klar angeben
• Berücksichtigen Sie die Abstimmung der Symbolfarben mit Ihrem Thema
• Test hover effects to ensure they enhance user experience