Card
Erfahre, wie du die Card-Komponente für klickbare, gestaltete Container mit Icons, Bildern, Links und CTAs in Rasterlayouts verwendest.
Die <Card>-Komponente ist ein klickbarer, gestalteter Container. Verwende sie, um auf andere Seiten zu verlinken oder zusammengehörige Inhalte zu gruppieren. Kombiniere Cards mit <Columns>, um Rasterlayouts zu erstellen.
Verwendung
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Einfache Card
Eine einfache Card mit einem Titel:
<Card title="Getting Started">
Set up your first project in under five minutes.
</Card>Card mit Icon
Füge ein Icon hinzu, damit sich Cards optisch stärker unterscheiden:
<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üge einen Pfeilindikator hinzu, um anzuzeigen, dass die Card auf eine andere Stelle verlinkt. Bei externen Links werden Pfeile automatisch angezeigt, du kannst sie jedoch auch für interne Links aktivieren:
<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üge unter dem Inhalt der Card einen Call-to-Action-Text hinzu:
<Card title="Quickstart" icon="star" href="/quickstart" cta="Upgrade now">
Unlock advanced features and priority support.
</Card>Kombiniere Pfeil und CTA für maximale Hervorhebung:
<Card title="Quickstart" icon="rocket" href="/quickstart" arrow={true} cta="Start building">
Everything you need to launch your first project.
</Card>Card mit Bild
Zeige oben in der Card ein Bild an:
<Card title="Visual Guide" img="/_jd/images/card-example.webp?v=msp3nl3i">
A card featuring an image header.
</Card>Card-Raster mit Columns
Verwende Columns, um mehrere Cards in einem responsiven Raster anzuordnen:
<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.
Name des Font Awesome-Icons (z. B. „book“, „code“, „rocket“). Wird standardmäßig in der Solid-Variante gerendert. Füge ein Stilpräfix wie light/book hinzu, um die Stä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 oben rechts einen Pfeilindikator (↗) an. Wird für externe Links (URLs, die mit http:// oder https:// beginnen) automatisch aktiviert. Setze den Wert auf true, um ihn bei internen Links anzuzeigen, oder auf false, um ihn bei externen Links auszublenden.
Benutzerdefinierter Call-to-Action-Text, der unter dem Inhalt der Card angezeigt wird. Nur sichtbar, wenn auch href angegeben ist.
Props von Columns
Anzahl der Spalten im Raster. Akzeptiert 1, 2, 3 oder 4.