The Card component is a flexible container for grouping content in your UI.
It supports visual enhancements such as glow on hover, animated borders, and multiple variants, making it ideal for dashboards, profiles, or interactive sections.

• Flexible container: Holds any content including text, images, buttons, or other components.
• Variants: Supports contained and outlined styles.
• Glow and animation: Add visual emphasis on hover or continuously with animated borders.
• Customizable: Configure border width, colors, hover behavior, and animations.

Usage Example

Preview

contained

outlined

glow on hover

animated border

animated border - custom colors

animated border - stop on hover

Code

<script lang="ts">
  import { Card } from "@fefade-ui/svelte"

  let borderWidth = $state(1)
  const cardVariants = ["contained", "outlined"] as const

  function handleClick() {
    borderWidth += 4
  }
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
  {#each cardVariants as variant (variant)}
    <Card {variant}>
      <h2>{variant}</h2>
    </Card>
  {/each}

  <Card glowOnHover>
    <h2>glow on hover</h2>
  </Card>

  <Card animatedBorder>
    <h2>animated border</h2>
  </Card>

  <Card
    animatedBorder={{
      width: `${borderWidth}px`,
      primaryColor: "#FF007F",
      secondaryColor: "#8000FF"
    }}
    style="cursor: pointer; user-select: none;"
    onclick={handleClick}
  >
    <h2>animated border - custom colors</h2>
  </Card>

  <Card
    animatedBorder={{
      stopOnHover: true,
      width: "2px",
      primaryColor: "#39FF14",
      secondaryColor: "#00FFFF"
    }}
  >
    <h2>animated border - stop on hover</h2>
  </Card>
</div>

Props

Prop	Type	Default	Description
variant	"contained" | "outlined"	"contained"	Visual style of the card.
glowOnHover	boolean	false	Adds a glow effect when the card is hovered.
animatedBorder	boolean | object	false	Enables an animated border. Can be a boolean or an object with configuration: width, primaryColor, secondaryColor, stopOnHover.
style	string	""	Inline styles for custom layout, size, or cursor.
onClick	function	undefined	Click event handler for interactive cards.

Best Practices

• Use variants consistently for a coherent UI.
• Prefer glowOnHover or animatedBorder for emphasis on interactive or highlighted sections.
• Combine animatedBorder with custom colors for brand-themed cards.
• Avoid excessive animations to maintain performance and avoid distraction.
• Use Cards as semantic containers for related content, not for layout spacing only.