Card

Cards are just div blocks with special props for setting padding and material. It uses optical corrections to negate extra space due to line height of the topmost text element, and it scales padding according to the scaleFactor passed (which should always be whatever the largest font size is within the card).

Example Instance

<Card scaleFactor="body"
  variant="outline"
  material="glass"
  materialThickness="default"
  lk-material="glass"
  isClickable
  onClick={() => alert("Card clicked!")}
>
  <h2>Glass Card</h2>
  <p>This one has a glass blur effect and is clickable.</p>
</Card>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add card` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
bgColor	no	LkColorWithOnToken	Sets background color of the card by applying a dynamic background color utility class. Font color of card is controlled by that class.	transparent
className	no	string	Additional CSS classes to apply	undefined
isClickable	no	boolean	If true, card’s state layer will respond to pseudo-classes hover, active, and focus. Purely visual, does not assign a click handler.	false
material	no	"flat" \| "glass" \| "rubber”	Sets the card’s material. “Flat” by default	“flat”
opticalCorrection	no	"top" \| "left" \| "right" \| "bottom" \| "x" \| "y" \| "all" \| "none"	Trims padding on the designated side(s) in order to correct optical asymmetry caused by excess space from line-height. See “unique behaviors” for more info.	“none”
scaleFactor	no	LkFontClass \| "none”	Sets card padding equal to the font size of the passed LkFontClass.	“body”
variant	no	"fill" \| "outline" \| "transparent”	Changes the overall style of the card	“fill”

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Supported
Native HTML attributes	Supported