Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Card from "$lib/components/ui/Card.svelte";
const { Story } = defineMeta({ title: "UI/Card", component: Card, tags: ["autodocs"], argTypes: { border: { control: "boolean" }, shadow: { control: "boolean" }, background: { control: "boolean" }, padding: { control: { type: "select" }, options: ["regular", "small", "none"] } }, args: { border: true, shadow: false, background: true, padding: "regular" } });</script>
<!-- Card content comes through its `children` snippet, provided here as Story slot content. --><Story name="Default">Card content</Story><Story name="Elevated" args={{ shadow: true }}>Bordered card with shadow</Story><Story name="Plain" args={{ border: false, background: false, shadow: false, padding: "none" }}> Borderless, shadowless, background-less</Story>
<Story name="Variants"> <div class="flex flex-col gap-4"> <Card border shadow={false} background>Bordered, no shadow (profile / settings)</Card> <Card border shadow background>Bordered + shadow (elevated)</Card> <Card border={false} shadow={false} background={false} padding="none">Plain (timeline)</Card > </div></Story>