Components
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
<script lang="ts">
import { Heart, Share2 } from 'lucide-svelte';
</script>
<div
style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;"
>
<kit:card>
<kit:card-media>
<kit:aspect-ratio ratio="16/9">
<img src="https://picsum.photos/seed/card1/400/225" alt="" />
</kit:aspect-ratio>
</kit:card-media>
<kit:card-title>Mountain hike</kit:card-title>
<kit:card-content>A breathtaking trail through alpine meadows and rocky peaks.</kit:card-content
>
<kit:card-actions>
<span>2 hours ago</span>
<kit:spacer />
<kit:btn icon variant="text" density="compact">
<kit:icon size="sm"><Heart /></kit:icon>
</kit:btn>
<kit:btn icon variant="text" density="compact">
<kit:icon size="sm"><Share2 /></kit:icon>
</kit:btn>
</kit:card-actions>
</kit:card>
<kit:card variant="outline">
<kit:card-media>
<kit:aspect-ratio ratio="16/9">
<img src="https://picsum.photos/seed/card2/400/225" alt="" />
</kit:aspect-ratio>
</kit:card-media>
<kit:card-title>Forest trail</kit:card-title>
<kit:card-content
>Dense canopy, mossy rocks, and the sound of a distant waterfall.</kit:card-content
>
<kit:card-actions>
<span>Yesterday</span>
<kit:spacer />
<kit:btn icon variant="text" density="compact">
<kit:icon size="sm"><Heart /></kit:icon>
</kit:btn>
<kit:btn icon variant="text" density="compact">
<kit:icon size="sm"><Share2 /></kit:icon>
</kit:btn>
</kit:card-actions>
</kit:card>
</div>
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. |
<script lang="ts">
import { BookOpen } from 'lucide-svelte';
</script>
<kit:card style="max-width: 320px;">
<kit:card-media>
<kit:aspect-ratio ratio="16/9">
<img src="https://picsum.photos/seed/card3/400/225" alt="" />
</kit:aspect-ratio>
</kit:card-media>
<kit:card-title>Getting started</kit:card-title>
<kit:card-content>
Learn how to install Lapikit and set up the preprocessor in your Svelte project.
</kit:card-content>
<kit:card-actions>
<span>5 min read</span>
<kit:spacer />
<kit:btn density="compact" size="sm">
{#snippet prepend()}
<kit:icon size="sm"><BookOpen /></kit:icon>
{/snippet}
Read
</kit:btn>
</kit:card-actions>
</kit:card>
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.
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
<kit:card variant="filled">
<kit:card-title>Filled</kit:card-title>
<kit:card-content>Accent background with white text.</kit:card-content>
</kit:card>
<kit:card variant="outline">
<kit:card-title>Outline</kit:card-title>
<kit:card-content>Transparent background with accent border.</kit:card-content>
</kit:card>
<kit:card variant="text">
<kit:card-title>Text</kit:card-title>
<kit:card-content>No background or border, accent text only.</kit:card-content>
</kit:card>
</div>
Density
density adjusts the internal padding.
- density:
'none' | 'compact' | 'default' | 'comfortable'='default'
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start;">
{#each ['none', 'compact', 'default', 'comfortable'] as density (density)}
<kit:card variant="outline" {density}>
<kit:card-title>{density}</kit:card-title>
<kit:card-content>Padding adjusts with density.</kit:card-content>
</kit:card>
{/each}
</div>
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.
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
<kit:card variant="outline" href="/docs">
<kit:card-title>As a link</kit:card-title>
<kit:card-content
>Interactive via <code>href</code> — renders as <code><a></code> with hover lift.</kit:card-content
>
</kit:card>
<kit:card interactive>
<kit:card-title>Interactive</kit:card-title>
<kit:card-content
>Hover lift and ripple via <code>interactive</code> prop — stays as
<code><div></code>.</kit:card-content
>
</kit:card>
</div>
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}
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
<kit:card elevation="3">
<kit:card-title>Elevation</kit:card-title>
<kit:card-content> Elevation effect on component card </kit:card-content>
</kit:card>
<kit:card onclick={() => alert('hey !')} elevation={{ base: 2, hover: 4 }}>
<kit:card-title>Elevation hover</kit:card-title>
<kit:card-content> Effect elevation basic and hover </kit:card-content>
</kit:card>
</div>
Without preprocess Lapikit
If you aren’t using the Lapikit preprocessor in svelte.config.js, import the component directly:
import { Card } from 'lapikit/components';API Reference
kit:card
| props | type | description | default |
|---|---|---|---|
| ref $bindable | HTMLElement | Bindable reference to the rendered DOM element. | null |
| is | enum'div''article''section''aside''a''button' | HTML element to render. Overridden by href. | 'div' |
| s-class | enum'string''array''object' | Sets className on card. | |
| s-style | enum'string''array''object' | Sets styles on card. | |
| variant | enum'filled''outline''text' | Visual style. | 'filled' |
| type | enum'button''submit''reset' | Defined html type to card. | |
| density | enum'none''compact''default''comfortable' | Internal padding. | 'default' |
| rounded | enum0'xs''sm''md''lg''xl' | Border radius. | 'md' |
| elevation | ElevationStateenum'0''1''2''3''4''5' | 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'div''span' | HTML element to render | 'div' |
| s-class | enum'string''array''object' | Sets className on card container. | |
| s-style | enum'string''array''object' | 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'div''p''span''h1''h2''h3''h4''h5''h6' | HTML element to render | 'div' |
| s-class | enum'string''array''object' | Sets className on card title. | |
| s-style | enum'string''array''object' | 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'div''p''span''h1''h2''h3''h4''h5''h6' | HTML element to render | 'div' |
| s-class | enum'string''array''object' | Sets className on card content. | |
| s-style | enum'string''array''object' | 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'div''span' | HTML element to render | 'div' |
| s-class | enum'string''array''object' | Sets className on card media. | |
| s-style | enum'string''array''object' | 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'div''span' | HTML element to render | 'div' |
| s-class | enum'string''array''object' | Sets className on card actions. | |
| s-style | enum'string''array''object' | Sets styles on card actions. |
For better structure, combine your Cards with Avatars and clear Buttons.