Components

Card component

On this page

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
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render. Overridden by `href`.	`'div'`
s-class	enum	Sets className on card.
s-style	enum	Sets styles on card.
variant	enum	Visual style.	`'filled'`
type	enum	Defined html type to card.
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.
color	`string`	Foreground color override (`--kit-card-fg`).
background	`string`	Background color override (`--kit-card-bg`).

kit:card-container

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render	`'div'`
s-class	enum	Sets className on card container.
s-style	enum	Sets styles on card container.

kit:card-title

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render	`'div'`
s-class	enum	Sets className on card title.
s-style	enum	Sets styles on card title.
color	`string`	Foreground color override (`--kit-card-title-fg`).

kit:card-content

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render	`'div'`
s-class	enum	Sets className on card content.
s-style	enum	Sets styles on card content.
color	`string`	Foreground color override (`--kit-card-content-fg`).

kit:card-media

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render	`'div'`
s-class	enum	Sets className on card media.
s-style	enum	Sets styles on card media.

kit:card-actions

props	type	description	default
ref $bindable	`HTMLElement`	Bindable reference to the rendered DOM element.	`null`
is	enum	HTML element to render	`'div'`
s-class	enum	Sets className on card actions.
s-style	enum	Sets styles on card actions.

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