> This page is for Flowkit CSS Framework, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Cards

> Cards are layout containers used to group and display content like text, images, and interactive elements.

## Class Naming

Cards are layout containers used to group and display content like text, images, and interactive elements. They are styled using the base class card for standard cards and card-link for interactive cards.

These classes can be extended using modifiers for different styles, backgrounds, and layouts.

## Surface Modifiers

Use these modifiers (combo classes) to adapt the card appearance based on the background context.

Naming convention:
card on-`Surface` and card-link on-`Surface`, where card surface can be `primary`, `secondary`, `inverse`, `accent-primary`, `accent-secondary`, `accent-tertiary`

Example:

* card on-accent-primary
* card-link on-inverse

## Card Elements

These modifiers allow additional control over spacing and card behavior across responsive layouts.

| Class             | Description                                                              |
| ----------------- | ------------------------------------------------------------------------ |
| card\_body        | Default card padding.                                                    |
| card\_body\_small | Small card padding.                                                      |
| card is-featured  | Makes the card stand out from others. Useful for featured pricing cards. |