Card

Preview

contained

outlined

glow on hover

animated border

animated border - custom colors

animated border - stop on hover

Usage

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

  const variants = ["contained", "outlined"]
</script>

{#each variants as variant (variant)}
  <Card variant={variant as any}>
    <h2>{variant}</h2>
  </Card>
{/each}

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

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

<Card
  animatedBorder={{
    width: "2px",
    primaryColor: "#FF007F",
    secondaryColor: "#8000FF"
  }}
>
  <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>