@isoftdata/svelte-card

Svelte Card

Install

pnpm i @isoftdata/svelte-card

This component requires Svelte 5 or later

Need to have multiple cards used in an accordion fashion? Use the Accordion component instead.

Props

All props are optional

Name	Type	Description	Default Value
color	Colors	Bootstrap color variant for the card	undefined
style	string	Custom CSS styles for the card	undefined
header	string | Snippet	Card header content (string or Svelte snippet)	undefined
headerClass	ClassValue	CSS classes for the header	undefined
bodyClass	ClassValue	CSS classes for the card body	undefined
bodyStyle	string	CSS styles for the card body	undefined
footer	string | Snippet	Card footer content (string or Svelte snippet)	undefined
footerClass	ClassValue	CSS classes for the footer	undefined
children	Snippet	Main card body content	undefined
flushBody	boolean	If true, removes padding from card body	undefined
collapsible	boolean	Makes the card collapsible with toggle functionality	false
bodyShown	boolean	Bindable. Controls if the body is visible (when collapsible)	true
entireHeaderToggles	boolean	If true, clicking anywhere in header toggles body visibility	false
bodyShownAnimationDuration	number	Duration in milliseconds for body show/hide animation	200
disabled	boolean	If true, prevents toggling when collapsible	false
shownChange	(bodyShown: boolean) => void	Callback when collapsible body is toggled	undefined
show	() => void	Callback when collapsible body is shown	undefined
hide	() => void	Callback when collapsible body is hidden	undefined
footerHides	boolean	If true, hides footer when body is hidden (when collapsible)	false

Snippets

• children - Main content of the card body
• header - Custom header content (alternative to string header prop)
• footer - Custom footer content (alternative to string footer prop)

Callbacks

• shownChange - Called when the collapsible body is toggled, receives boolean indicating visibility state
• show - Called when the collapsible body is shown
• hide - Called when the collapsible body is hidden

Example

<script lang="ts">
	import Card from '@isoftdata/svelte-card'
	import { List, Item } from '@isoftdata/svelte-list-group'
</script>

<Card
	collapsible
	header="My Sweet List"
	flushBody
	footer="{items.length} Total Items"
	footerClass="small"
>
	<List flush>
		{#each items as item}
			<Item>{item}</Item>
		{/each}
	</List>
</Card>