Card

A card component that provides a container for content with optional header and footer sections. It supports separators between sections and customizable padding.

Separators

This card has separators and a header-end slot. All the cool stuff.

Centered Header

Use header-align to vertically align header content. This is useful when you the header contains more than just the card title.

Hello I'm a description and completely unrelated to this example.

Props

Name	Default	Type
`separators`	`false`	`boolean` Adds separators between all sections (header, content, footer)
`headerSeparator`	`false`	`boolean` Adds a separator only after the header section
`footerSeparator`	`false`	`boolean` Adds a separator only before the footer section
`padding`	`true`	`boolean` Controls whether the card content has padding
`headerAlign`	`baseline`	`'start' \| 'center' \| 'end' \| 'baseline'` Controls vertical alignment of items in the card header

Slots

Name	Accepts	Description
`default`	`any`	The main content of the card
`header`	`any`	Content to be displayed in the header section
`header-end`	`any`	Content to be displayed at the end of the header section (right-aligned)
`footer`	`any`	Content to be displayed in the footer section