PetalComponents.SpotlightCard (petal_components v4.1.2)

A card with a radial glow that follows the cursor — a subtle "premium" hover effect for feature grids and pricing cards.

Requires the PetalSpotlight hook from the JS bundle (a few lines that track the cursor into CSS variables; the glow itself is pure CSS).

Summary

Functions

spotlight_card(assigns)

Renders a card whose glow tracks the cursor.

Functions

spotlight_card(assigns)

Renders a card whose glow tracks the cursor.

<div class="grid grid-cols-3 gap-4">
  <.spotlight_card :for={feature <- @features} id={feature.id}>
    <div class="p-6">
      <.h4>{feature.title}</.h4>
      <.p>{feature.description}</.p>
    </div>
  </.spotlight_card>
</div>

Attributes

id (:string) (required)
spotlight_color (:string) - color of the glow (any CSS color, ideally with alpha). Defaults to "rgb(120 119 198 / 0.18)".
spotlight_size (:string) - radius of the glow. Defaults to "350px".
class (:any) - extra classes for the card. Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)