Cards & layout
Basic card
Security
Two-factor authentication on every account.
<div class="joy-card">
<div class="joy-card-icon"><i class="ph ph-shield-check"></i></div>
<h3>Security</h3>
<p class="joy-text-muted">Two-factor authentication on every account.</p>
</div>Card with header, divider, and footer
Payments
Your most recent transactions.
<div class="joy-card">
<div class="joy-card-header">
<div class="joy-card-icon"><i class="ph ph-wallet"></i></div>
<h3>Payments</h3>
</div>
<p class="joy-text-muted">Your most recent transactions.</p>
<hr class="joy-card-divider">
<div class="joy-card-footer">
<a href="#" class="joy-btn joy-btn-ghost">View all</a>
</div>
</div>Card grid
.joy-grid sets up a responsive auto grid — pair it with the .joy-grid-2/3/4 utilities when you need a fixed column count (see Utilities):
One
Two
Three
<div class="joy-grid joy-grid-3 sm:joy-grid-1" style="width:100%;">
<div class="joy-card"><div class="joy-card-icon"><i class="ph ph-gift"></i></div><h3>One</h3></div>
<div class="joy-card"><div class="joy-card-icon"><i class="ph ph-puzzle-piece"></i></div><h3>Two</h3></div>
<div class="joy-card"><div class="joy-card-icon"><i class="ph ph-lightning"></i></div><h3>Three</h3></div>
</div>Glass effect
.joy-glass is a utility "mixin" — it applies the translucent, blurred background used across the topbar, dock, modal, and floating cards. Combine it with any container:
A surface with glassmorphism
<div class="joy-glass" style="padding:20px;border-radius:20px;">A surface with glassmorphism</div>
Section & container
Standard page section wrapper — .joy-section gives it a full viewport-height minimum and centers content vertically, .joy-container caps the reading width:
Section content
<section class="joy-section" style="min-height:auto;">
<div class="joy-container">Section content</div>
</section>Organic shapes
.joy-organic / .joy-organic-alt apply an animated, asymmetric border-radius (used on the background blobs and the hero orb) — reserved for large decorative elements, not form UI.