FeatureCard

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<FeatureCard
  icon="icon-[lucide--sparkles]"
  title="Feature"
  description="description"
  href="href"
/>

Legacy mount name: data-component="FeatureCard".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/FeatureCard.wrn

component FeatureCard {
  props {
    class = ""
    icon = "icon-[lucide--sparkles]"
    title = "Feature"
    description = ""
    href = ""
  }
  view {
        <article class="group rounded-2xl border border-slate-200 bg-white p-6 transition duration-300 hover:-translate-y-1 hover:border-violet-300 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900 {class}">
        <div class="flex size-11 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/10 text-violet-700 transition group-hover:scale-105 dark:text-violet-300">
        <span class="{icon} size-5" aria-hidden="true">
        </span>
        </div>
        <h3 class="mt-5 text-lg font-bold">{title}</h3>
        <p class="mt-2 leading-7 text-slate-600 dark:text-slate-300">{description}</p>{#if href}<a href="{href}" class="mt-4 inline-flex items-center gap-2 font-semibold text-violet-600">Learn more<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true">
        </span>
        </a>{/if}</article>
    }
}