Card component

The kit:card component is a versatile container used to group together information or actions in a user interface. It can be used to display content, images, buttons or links, while offering advanced customization to suit various styles and contexts.

A breathtaking trail through alpine meadows and rocky peaks.

Dense canopy, mossy rocks, and the sound of a distant waterfall.

kit:card is a layout container, it adds no heading or structure on its own. Use the utility classes below inside it to organise content consistently.

class	description
`kit-card__media`	Wraps media (image, video). Clips overflow to the card radius.
`kit-card__header`	Bold title. `font-weight: 600`, tight line-height.
`kit-card__body`	Main text content.
`kit-card__footer`	Flex row between footer text and actions.
`kit-card__footer-content`	Muted text (date, meta) inside the footer.
`kit-card__actions`	Inline action buttons inside the footer.

Examples of card

Variants

variant: 'filled' | 'outline' | 'text' = 'filled'
filled - accent background, white text.
outline - transparent background with accent border.
text - no background or border, accent text color.

Density

density adjusts the internal padding.

density: 'compact' | 'default' | 'comfortable' = 'default'

interactive

An interactive card lifts on hover and shows a ripple on click. This behaviour is automatic when href is set or an onclick handler is attached. Use interactive to enable it on a plain <div> without changing the element.

interactive: boolean = false
href: string | undefined = undefined
active: boolean = false
disabled: boolean = false
noRipple: boolean = false

When disabled is true on an <a> card, href is removed and tabindex="-1" is set.

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:

API Reference

kit:card

props	type	description	default
is	enum	HTML element to render. Overridden by `href`.	`'div'`
variant	enum	Visual style.	`'filled'`
density	enum	Internal padding.	`'default'`
rounded	enum	Border radius.	`'md'`
href	`string`	Renders as `<a>`. Enables interactive mode.
interactive	`boolean`	Enables hover lift and ripple without changing the tag.	`false`
active	`boolean`	Applies the pressed background.	`false`
disabled	`boolean`	Dims and disables interaction.	`false`
noRipple	`boolean`	Disables the ripple animation on click.
children	`Snippet`	Card content.

For better structure, combine your Cards with Avatars and clear Buttons.