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.

Mountain hike

A breathtaking trail through alpine meadows and rocky peaks.

2 hours ago

Forest trail

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

Yesterday

kit:card is a layout container, it adds no heading or structure on its own. Use the following subcomponents to structure your card content:

components	description
`kit:card-media`	Wraps media (image, video). Clips overflow to the card radius.
`kit:card-title`	Bold title. `font-weight: 600`, tight line-height.
`kit:card-content`	Main text content.
`kit:card-actions`	Flex bar for action buttons.
`kit:card-container`	Main container for the card content.

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: 'none' | '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.

Elevation

The Elevation property allows you to apply a box shadow effect to the Card component. This property lets you add this effect to the component—either by default or when the component is in the hover or active states.

elevation: '0' | '1' | '2' | '3' | '4' | '5' = 'undefined'
elevation (multi-state): {base: value, hover: value, active: value}

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'`
elevation	`ElevationState`enum	Add shadow effect
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.