Card
Erfahren Sie, wie Sie die Card-Komponente nutzen, um klickbare, gestaltete Container mit Icons, Bildern, Links und CTAs in Rasterlayouts zu erstellen.
Die <Card>-Komponente ist ein klickbarer, gestalteter Container. Verwenden Sie sie, um auf andere Seiten zu verlinken oder zusammengehörige Inhalte zu gruppieren. Kombinieren Sie Cards mit <Columns>, um Rasterlayouts zu erstellen.
Verwendung
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Einfache Card
Eine Card mit Titel:
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Card mit Icon
Fügen Sie ein Icon hinzu:
<Card title="Documentation" icon="book">
Explore our complete documentation to learn all features.
</Card>Card mit Link
Cards können auf andere Seiten verlinken:
<Card title="API Reference" icon="code" href="/introduction">
View the complete API documentation.
</Card>Card mit Pfeil
Fügen Sie einen Pfeil hinzu, um zu zeigen, dass die Card ein Link ist. Externe Links erhalten den Pfeil automatisch. Aktivieren Sie ihn für interne Links mit arrow={true}:
<Card title="Quickstart" icon="github" href="/quickstart" arrow={true}>
Check out the source code and contribute.
</Card>Externe Links zeigen den Pfeil automatisch an:
<Card title="External Resource" href="https://example.com">
This card links to an external site.
</Card>Card mit CTA
Fügen Sie einen Call-to-Action-Text unterhalb des Card-Inhalts hinzu:
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
Unlock advanced features and priority support.
</Card>Kombinieren Sie Pfeil und CTA:
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Card mit Bild
Zeigen Sie ein Bild am oberen Rand der Card an:
<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=mw83zxfs">
A card featuring an image header.
</Card>Card-Raster mit Columns
Ordnen Sie Cards mit Columns in einem responsiven Raster an:
<Columns cols={2}>
<Card title="Quickstart" icon="rocket" href="/quickstart">
Get up and running in minutes.
</Card>
<Card title="Tutorials" icon="graduation-cap" href="/content/mdx-basics">
Step-by-step learning paths.
</Card>
<Card title="Examples" icon="flask" href="/components/overview">
Real-world code examples.
</Card>
</Columns>Dreispaltiges Layout
<Columns cols={3}>
<Card title="Docs" icon="book">
Documentation
</Card>
<Card title="API" icon="code">
API Reference
</Card>
<Card title="Blog" icon="newspaper">
Latest updates
</Card>
</Columns>Props
Der oben in der Card angezeigte Titel.
Font-Awesome-Icon-Name (z. B. "book", "code", "rocket"). Wird standardmäßig in der Solid-Variante dargestellt. Fügen Sie ein Stil-Präfix wie light/book hinzu, um die Strichstärke zu ändern. Siehe Icons.
URL, auf die die Card verlinkt. Kann intern (/docs/intro) oder extern (https://example.com) sein.
Pfad zu einem Bild, das oben in der Card angezeigt wird.
Zeigt einen Pfeil (↗) in der oberen rechten Ecke an. Wird für externe Links (URLs, die mit http:// oder https:// beginnen) automatisch aktiviert. Setzen Sie den Wert auf true, um ihn bei internen Links anzuzeigen, oder auf false, um ihn bei externen Links auszublenden.
Benutzerdefinierter Call-to-Action-Text unterhalb des Card-Inhalts. Wird nur angezeigt, wenn href gesetzt ist.
Props von Columns
Anzahl der Spalten im Raster. Akzeptiert 1, 2, 3 oder 4.