Card Component

Wiederverwendbare Card-Component mit Bild, Content und CTA - rein HTML, kein JavaScript.

Component HTML

<div class="card group bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden transform hover:-translate-y-1">
  <!-- Image -->
  <div wm:if="image" class="relative h-48 overflow-hidden">
    <img
      src="{{image}}"
      alt="{{title}}"
      class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
    >
    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

  <!-- Content -->
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-primary transition-colors">
      {{title}}
    </h3>
    <p class="text-gray-600 mb-4 line-clamp-3">
      {{description}}
    </p>

    <!-- CTA -->
    <a
      href="{{ctaUrl}}"
      class="inline-flex items-center text-primary font-semibold hover:text-primary-dark transition-colors"
    >
      {{ctaText}}
      <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
      </svg>
    </a>
  </div>
</div>

<style>
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>

Features

• Rein statisch: Keine Islands, kein JavaScript
• Hover-Effekte: Smooth Transitions auf Hover
• Conditional Image: wm:if für optionales Bild
• Line Clamping: Text wird nach 3 Zeilen abgeschnitten
• Design Tokens: Verwendet text-primary für konsistente Farben
• Tailwind Styling: Utility-first CSS

Verwendung

Perfekt für:

• Blog Posts
• Produkt-Listen
• Team Members
• Portfolio Items
• Feature-Übersichten