Eine Glassmorphism-Karte mit einem Spotlight-Licht, das dem Mauszeiger folgt und den Rand zum Leuchten bringt.
1<article class="sg-card" tabindex="0">2 <div class="sg-spot" aria-hidden="true"></div>3 <div class="sg-inner">4 <div class="sg-icon" aria-hidden="true">5 <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">6 <path d="M12 2l2.4 6.9L21 11l-6.6 2.1L12 20l-2.4-6.9L3 11l6.6-2.1z"/>7 </svg>8 </div>9 <h3 class="sg-title">Aurora Engine</h3>10 <p class="sg-text">Echtzeit-Rendering mit adaptivem Licht. Bewege den Cursor über die Karte und beobachte den Spotlight-Effekt.</p>11 <div class="sg-meta">12 <span class="sg-badge">Neu</span>13 <span class="sg-link">Mehr erfahren →</span>14 </div>15 </div>16</article>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Eine moderne Premium-Card mit Glassmorphism, Glow-Rand, animiertem Licht-Scan, Status-Badge, Metrik und CTA. Perfekt für SaaS-Dashboards, Feature-Cards, Pricing-Highlights oder Component-Libraries.
Eine interaktive Karte, die dem Mauszeiger mit einem weichen Lichtkegel folgt und so ein lebendiges Spotlight-Erlebnis auf dunklem Grund erzeugt.