/

Card

A Card component is used for grouping related components. It is similar to the Box, except it has a border, uses the theme colors and border radius, and provides a size prop to control spacing and margin according to the Radix "1" - "5" scale.

The Card requires less styling than a Box to achieve consistent visual results when used with themes.

Basic Example

Card 1

Card 2

Card 3

Card 4

Card 5

Rendering as a Different Element

The as_child prop may be used to render the Card as a different element. Link and Button are commonly used to make a Card clickable.

Quick Start

Get started with Reflex in 5 minutes.

Using Inset Content

API Reference

rx.card

Container that groups related content and actions.

Basic Card

Prop	Type \| Values	Default	Interactive
`access_key`	`str`	`-`
`auto_capitalize`	`"off" \| "none" \| ...`	`-`
`content_editable`	`Union["inherit" \| "plaintext-only", bool]`	`-`
`context_menu`	`str`	`-`
`dir`	`str`	`-`
`draggable`	`bool`	`-`	false
`enter_key_hint`	`"enter" \| "done" \| ...`	`-`
`hidden`	`bool`	`-`	false
`input_mode`	`"none" \| "text" \| ...`	`-`
`item_prop`	`str`	`-`
`lang`	`str`	`-`
`role`	`"alert" \| "alertdialog" \| ...`	`-`
`slot`	`str`	`-`
`spell_check`	`bool`	`-`	false
`tab_index`	`int`	`-`
`title`	`str`	`-`
`as_child`	`bool`	`-`
`size`	`"1" \| "2" \| ...`	`-`
`variant`	`"surface" \| "classic" \| ...`	`-`

Event Triggers

See the full list of default event triggers