Card

Usage

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

<Card
  variant="default"
  padding="md"
  interactive="false"
/>

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

Props and attributes

Slots

• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/Card.wrn

component Card {
  props {
    variant = "default"
    padding = "md"
    interactive = false
    className = ""
  }
  view {
        <article class="rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm transition duration-300 dark:border-slate-800 dark:bg-slate-900 dark:text-white {padding === 'sm' ? 'p-4' : padding === 'lg' ? 'p-8' : 'p-6'} {variant === 'glass' ? 'bg-white/75 backdrop-blur-xl dark:bg-slate-900/70' : variant === 'elevated' ? 'shadow-xl shadow-slate-950/5' : ''} {interactive ? 'hover:-translate-y-1 hover:shadow-xl' : ''} {className}">
        <slot />
        </article>
    }
}