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/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>