Skip to main content

​
Import

from reflex_ui import card

​
Description

A card component that displays content in a card format with support for header, title, description, content, and footer sections.

​
Basic Usage

# High-level API
card(
    title="Card Title",
    description="Card description",
    content="Card content"
)

# Compositional API
card.root(
    card.header(
        card.title("Title"),
        card.description("Description")
    ),
    card.content("Content"),
    card.footer("Footer")
)

​
High-Level Props

​
title
Component | Var[Component | str | None] | str | None
The title content of the card. Can be a string or component.
​
description
Component | Var[Component | str | None] | str | None
The description content displayed below the title.
​
content
Component | Var[Component | str | None] | str | None
The main content of the card.
​
footer
Component | Var[Component | str | None] | str | None
The footer content of the card.

​
Subcomponents

​
card.root

The root container for the card. 
card.root(*children, **props) -> CardRoot

​
card.header

Container for the card header section. 
card.header(*children, **props) -> CardHeader

​
card.title

The title component for the card. 
card.title(*children, **props) -> CardTitle

​
card.description

The description component for the card. 
card.description(*children, **props) -> CardDescription

​
card.content

The main content container. 
card.content(*children, **props) -> CardContent
The footer container. 
card.footer(*children, **props) -> CardFooter

​
Class Names Reference

Access predefined class names via card.class_names: 
card.class_names.ROOT      # "rounded-ui-xl border border-secondary-a4 bg-secondary-1 shadow-small"
card.class_names.HEADER    # "flex flex-col px-6 pt-6 pb-4"
card.class_names.TITLE     # "text-2xl font-semibold text-secondary-12"
card.class_names.DESCRIPTION # "text-sm text-secondary-11 font-[450] mt-4"
card.class_names.CONTENT   # "flex flex-col gap-4 px-6 pb-6"
card.class_names.FOOTER    # "flex flex-row justify-between items-center px-6 pb-6"

​
Event Handlers

All card components support standard event handlers:
​
on_click
EventType[()] | EventType[PointerEventInfo]
Fired when the component is clicked.
​
on_mouse_enter
EventType[()]
Fired when the mouse enters the component.
​
on_mouse_leave
EventType[()]
Fired when the mouse leaves the component.

​
Styling

​
Custom Class Names

card.root(
    card.content("Custom styled card"),
    class_name="custom-card-class"
)

​
Style Prop

card(
    title="Styled Card",
    content="Content",
    style={"width": "100%", "max_width": "400px"}
)

​
Method Signatures

​
HighLevelCard.create

@classmethod
def create(
    cls,
    *children,
    title: Component | Var[Component | str | None] | str | None = None,
    description: Component | Var[Component | str | None] | str | None = None,
    content: Component | Var[Component | str | None] | str | None = None,
    footer: Component | Var[Component | str | None] | str | None = None,
    **props
) -> HighLevelCard

​
CardRoot.create

@classmethod
def create(
    cls,
    *children,
    **props
) -> CardRoot

​
Return Types

  • HighLevelCard - High-level card with automatic structure
  • CardRoot - Root card container
  • CardHeader - Header section container
  • CardTitle - Title text component
  • CardDescription - Description text component
  • CardContent - Content section container
  • CardFooter - Footer section container

Build docs developers (and LLMs) love

Get started for freeTalk to us