Marketing blocks

Larger pieces, built for institutional/landing pages — this JoyUI homepage itself uses most of them.

Chips

Free Fast

<div class="joy-chip-row">
    <span class="joy-chip"><i class="ph ph-gift"></i> Free</span>
    <span class="joy-chip"><i class="ph ph-lightning"></i> Fast</span>
</div>

Hero

An opening section with a text highlight and a decorative "orb." The three ids below are optional — when present, joy.js wires up the cursor-following glow and the magnetic effect on the main button on its own:

id	Effect wired by joy.js
`#joy-hero-spotlight`	radial glow that follows the mouse inside the section
`#joy-hero-orb`	reacts to the glow alongside it
`#joy-hero-cta`	"magnetic" button — pulls slightly toward the cursor

Eyebrow

A highlighted headline.

Supporting hero paragraph.

Call to action

<section class="joy-hero-section">
    <div class="joy-hero-spotlight" id="joy-hero-spotlight"></div>
    <div class="joy-container joy-hero-layout">
        <div class="joy-hero-content">
            <span class="joy-eyebrow"><i class="ph ph-sparkle"></i> Eyebrow</span>
            <h1>A <span class="joy-text-accent">highlighted</span> headline.</h1>
            <p>Supporting hero paragraph.</p>
            <a href="#" class="joy-btn joy-btn-solid" id="joy-hero-cta">Call to action <i class="ph ph-arrow-right"></i></a>
        </div>
        <div class="joy-hero-orb-wrap">
            <div class="joy-hero-orb joy-glass" id="joy-hero-orb"><i class="ph ph-sparkle"></i></div>
        </div>
    </div>
</section>

Essence (mission / vision / values)

Mission

Short description.

<div class="joy-essence-row">
    <div class="joy-essence-item">
        <div class="joy-essence-icon"><i class="ph ph-target"></i></div>
        <h3>Mission</h3>
        <p class="joy-text-muted">Short description.</p>
    </div>
</div>

News cards

Aug 20, 2026

News headline

<div class="joy-news-grid">
    <a href="#" class="joy-news-card" style="text-decoration:none;">
        <img src="/thumbnail.jpg" alt="" class="joy-news-thumb">
        <div class="joy-news-body">
            <span class="joy-news-date">Aug 20, 2026</span>
            <h3>News headline</h3>
        </div>
    </a>
</div>

.joy-scroll-row is the horizontal-carousel version of the same card, for when there isn't room for a full grid.

Article

.joy-article-content automatically styles nested p, h2, h3, img, a, lists, and blockquote — a good fit for content coming out of a rich-text editor or rendered Markdown:

August 20, 2026

A regular paragraph in the article.

A pulled quote.

<article class="joy-article">
    <div class="joy-article-meta">August 20, 2026</div>
    <div class="joy-article-content">
        <p>A regular paragraph in the article.</p>
        <blockquote>A pulled quote.</blockquote>
    </div>
</article>

Site footer

<footer class="joy-footer">
    <div><h4>Product</h4><a href="#">Features</a><a href="#">Pricing</a></div>
    <div><h4>Company</h4><a href="#">About</a><a href="#">Contact</a></div>
</footer>