Card

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-scope="card"
14  data-part="action"
15  data-slot="card-action"
16  class={cn(
17    "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
18    className
19  )}
20  {...rest}
21>
22  {@render children?.()}
23</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-scope="card"
14  data-part="content"
15  data-slot="card-content"
16  class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
17  {...rest}
18>
19  {@render children?.()}
20</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-scope="card"
14  data-part="description"
15  data-slot="card-description"
16  class={cn("text-muted-foreground text-sm", className)}
17  {...rest}
18>
19  {@render children?.()}
20</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-scope="card"
14  data-part="footer"
15  data-slot="card-footer"
16  class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
17  {...rest}
18>
19  {@render children?.()}
20</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-scope="card"
14  data-part="header"
15  data-slot="card-header"
16  class={cn(
17    "gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
18    className
19  )}
20  {...rest}
21>
22  {@render children?.()}
23</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12  as="div"
13  data-scope="card"
14  data-part="title"
15  data-slot="card-title"
16  class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
17  {...rest}
18>
19  {@render children?.()}
20</Sprawlify>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements"
5
6interface Props extends HTMLAttributes<HTMLDivElement>, PolymorphicProps<"div"> {
7  size?: "default" | "sm"
8}
9
10let { class: className, size = "default", children, ...rest }: Props = $props()
11</script>
12
13<Sprawlify
14  as="div"
15  data-scope="card"
16  data-part="root"
17  data-slot="card"
18  data-size={size}
19  class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
20  {...rest}
21>
22  {@render children?.()}
23</Sprawlify>

1export { default as Card } from "./card.svelte";2export { default as CardHeader } from "./card-header.svelte";3export { default as CardTitle } from "./card-title.svelte";4export { default as CardDescription } from "./card-description.svelte";5export { default as CardAction } from "./card-action.svelte";6export { default as CardContent } from "./card-content.svelte";7export { default as CardFooter } from "./card-footer.svelte";8