Lapikit

Card component

Card

The 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.

Default

Examples of card

Base

This example shows the simple use of the Card component with its default settings. Ideal for fast, intuitive integration.

Default

Density

The density property lets you adjust the spacing and height of the Card. The available options: compact, comfortable and default, adapt to different design needs.

Default

Compact

Comfortable

Variant

The variant property lets you customize the Card’s style. The available options: outline, text and filled, offer visual variations adapted to different contexts.

Outline

Text

Event

Cards can be interactive, responding to events such as clicks or hovers. This example shows how to manage events for dynamic interactions.

Anchor

click

Disabled

The disabled property allows you to disable a Card, preventing any interaction. This can be useful for indicating that an action or option is not available.

Disabled

API Reference

props	type	description	default	type_extend
ref $bindable	HTMLElement	Direct access to DOM element	undefined
is	enum	Makes the component `<a>` or `<button>` or `div`.	`div`	`button` \| `a` \| `div`
href	string	Add path or url	undefined
dark	boolean	Enable dark theme for component.	false
light	boolean	Enable light theme for the component.	false
color	string	Applies a custom color to text or icons.	undefined
background	string	Apply a custom background color.	undefined
width	string	Add fixed width on the Card.	undefined
height	string	Add fixed height on the Card.	undefined
density	enum	Controls vertical density.	`default`	`compact` \| `comfortable` \| `default`
rounded	string	Controls item rounding (`none`, `sm`, `md`, `lg`, etc.).	`md`
variant	enum	Sets the visual style of the Card.	`filled`	`outline` \| `text` \| `filled`
active	boolean	Displays active status.	false
disabled	boolean	Deactivates the Card, preventing any interaction.	false

Variables CSS

variable	default	description
`–-card-color`	`--kit-label-primary`	Text color
`–-card-background`	`--kit-background-grouped-secondary`	Background color
`--card-shape`	`--system-shape-md`	Card edge radius

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