Tutorial 05 · Components

Cards & Prism Surfaces

Base .luc-card, .luc-prism reactive spotlight, transparency and clickable lifts.

10 minBeginnerlucUI 2 · v2.1.3

Objectives

  • Understand glass layers: blur 24, saturate, glass-edge.
  • Add .luc-prism + data-luc-spotlight.
  • Use header/body/footer.

Steps

Base card

card.html
<article class="luc-card">
  <h3 class="luc-card-title">Base</h3>
  <p>Blur + edge</p>
</article>

Prism spotlight

Hover to see gold spotlight follow pointer.

Base
Prism — hover me
prism.html
<article class="luc-card luc-prism" data-luc-spotlight>
  <h3 class="luc-card-title">Prism</h3>
</article>

Structure

Title

Subtitle

Body

Exercise

Compose a pricing card with header, metric, and footer CTA. Verify in both themes.

← Previous Next →