Thinkport

Lorem ipsum dolor

Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

#Lorem #Ipsum #Dolor

Consetetur sadipscing

Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

#Optional #Slot #Minimal

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum

Card

Karten-Komponente

Die Card-Komponente dient zur Darstellung von Inhalten in einem abgesetzten Bereich und eignet sich besonders für die Hervorhebung von Informationen, Aktionen oder Medien. Optional kann ein Bild über die integrierte Image-Komponente gerendert werden. Tags werden mit der Badge-Komponente dargestellt.

Codebeispiel

<Card
image={{ src: '~/assets/images/default.png', alt: 'Lorem ipsum' }}
title="Lorem ipsum dolor"
description="Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
tags={["Lorem", "Ipsum", "Dolor"]}
rounded="xl"
/>

<Card class="mt-4">
<Fragment slot="image">
  <!-- Eigener Bild-Slot möglich -->
  <img src="/assets/images/default.png" alt="Lorem ipsum" />
</Fragment>
<Fragment>
  Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</Fragment>
<Fragment slot="footer">
  <a href="#" class="text-sm underline">Lorem ipsum</a>
</Fragment>
</Card>

Parameter

Bezeichner	Typ	Beschreibung	Default
class	string	Zusätzliche CSS-Klassen für das Card-Element	''
image	{ src: string; alt?: string; class?: string }	Optionales Bild; wird mit der globalen Image-Komponente gerendert. Bilder werden automatisch für Grid-Layouts optimiert (250px, 350px, 400px Breiten, 4:3 Aspect Ratio)	null
title	string	Titel der Karte	''
description	string	Beschreibungstext	''
tags	string[]	Optionale Tags; werden als Badge gerendert (werden automatisch unten ausgerichtet)	[]
rounded	'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'	Eckenradius der Card	'md'

Fragments

Bezeichner	Beschreibung	Default
image	Optionaler Bild-Slot (überschreibt image-Prop)
default	Standardinhalt im Body
footer	Footer-Bereich (zusätzliche Inhalte/Badges/Links)

Wiki-Dokumentation Quellcode

Image Optimization

The Card component automatically optimizes images for grid layouts. Images are constrained to a maximum width of 400px with a 4:3 aspect ratio (400x300px), ensuring optimal performance:

Mobile (≤767px): 250px width
Tablet (768px-1023px): 350px width
Desktop (≥1024px): 400px width

The component uses responsive image generation with multiple breakpoints (widths={[250, 350, 400]}) and proper sizes attributes, so browsers only download appropriately sized images. The Image component handles WebP conversion automatically in production.

Note: Images are cropped to a 4:3 aspect ratio using object-cover and are not rendered in their original size. The maximum rendered width is 400px, which is optimal for grid layouts where each card occupies ~25% of the viewport width.

Usage in Grid Layouts

<div class="grid grid-cols-4 gap-4">
  <Card image={{ src: image1, alt: 'Card 1' }} title="Card 1" />
  <Card image={{ src: image2, alt: 'Card 2' }} title="Card 2" />
  <Card image={{ src: image3, alt: 'Card 3' }} title="Card 3" />
  <Card image={{ src: image4, alt: 'Card 4' }} title="Card 4" />
</div>

The optimized image widths ensure that each card in a 4-column grid (~256px per card on large screens) receives appropriately sized images, reducing unnecessary bandwidth usage.