Reflex Cloud - Fast, secure & scalable hosting. One command to deploy.

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.

Using Inset Content

API Reference

rx.card

Container that groups related content and actions.

Basic Card
PropType | ValuesDefaultInteractive
as_child
bool
size
"1" | "2" | ...
variant
"surface" | "classic" | ...