This is a beautiful card using just the <article> element. No classes
required!
Beautiful card components with zero or minimal classes. Just use semantic HTML.
Just use <article> - no classes needed!
This is a beautiful card using just the <article> element. No classes
required!
Cards automatically have shadows, hover effects, and proper spacing. Pure semantic HTML.
<article>
<header>Card Title</header>
<p>Card content goes here.</p>
<footer>
<button>Action</button>
</footer>
</article>Add a single .glass modifier class for glassmorphism.
Beautiful frosted glass effect with backdrop blur. Perfect for colorful backgrounds.
One class does it all. Clean and elegant.
<article class="glass">
<header>Glass Card</header>
<p>Content here...</p>
</article>Add .glow for a subtle purple glow on hover.
Hover over me to see the glow effect. Great for interactive elements.
<article class="glow">
...
</article>Use .gradient for a vibrant gradient background.
Eye-catching gradient from purple to pink. Text automatically becomes white.
<article class="gradient">
...
</article>Mix and match modifiers for unique effects.
Combine multiple effects with simple class names.
<article class="glass glow">
...
</article>