Skip to content

Card

A material design card: a panel with slightly rounded corners and an elevation shadow.

ft.Card(
    shadow_color=ft.Colors.ON_SURFACE_VARIANT,
    content=ft.Container(
        width=400,
        padding=10,
        content=ft.ListTile(
            bgcolor=ft.Colors.GREY_400,
            leading=ft.Icon(ft.Icons.FOREST),
            title=ft.Text("Card Name"),
        ),
    ),
)

Card

Basic card

Inherits: LayoutControl, AdaptiveControl

Properties

Examples#

Live example

import flet as ft


def main(page: ft.Page):
    page.title = "Card Example"
    page.theme_mode = ft.ThemeMode.LIGHT

    page.add(
        ft.SafeArea(
            content=ft.Card(
                shadow_color=ft.Colors.ON_SURFACE_VARIANT,
                content=ft.Container(
                    width=400,
                    padding=10,
                    content=ft.Column(
                        controls=[
                            ft.ListTile(
                                bgcolor=ft.Colors.GREY_400,
                                leading=ft.Icon(ft.Icons.ALBUM),
                                title=ft.Text("The Enchanted Nightingale"),
                                subtitle=ft.Text(
                                    "Music by Julie Gable. Lyrics by Sidney Stein."
                                ),
                            ),
                            ft.Row(
                                alignment=ft.MainAxisAlignment.END,
                                controls=[
                                    ft.TextButton("Buy tickets"),
                                    ft.TextButton("Listen"),
                                ],
                            ),
                        ]
                    ),
                ),
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)

music-info

Properties#

bgcolor class-attribute instance-attribute #

bgcolor: ColorValue | None = None

The card's background color.

clip_behavior class-attribute instance-attribute #

clip_behavior: ClipBehavior | None = None

Defines how the content will be clipped.

Defaults to CardTheme.clip_behavior, or if that is None, falls back to ClipBehavior.NONE.

content class-attribute instance-attribute #

content: Control | None = None

The Control to display inside the card.

Tip

To display multiple children, wrap them in a control like Row, Column, or Stack, which accept a controls list.

elevation class-attribute instance-attribute #

elevation: Number | None = None

The z-coordinate at which to place this card. Defines the size of the shadow below the card.

Defaults to CardTheme.elevation, or if that is None, falls back to 1.0.

semantic_container class-attribute instance-attribute #

semantic_container: bool = True

Whether this card represents a single semantic container, or if it instead represents a collection of individual semantic nodes (different types of content).

shadow_color class-attribute instance-attribute #

shadow_color: ColorValue | None = None

The color to paint the shadow below this card.

Defaults to CardTheme.shadow_color

shape class-attribute instance-attribute #

shape: OutlinedBorder | None = None

The shape of this card.

Defaults to CardTheme.shape, or if that is None, falls back to RoundedRectangleBorder(radius=12.0).

show_border_on_foreground class-attribute instance-attribute #

show_border_on_foreground: bool = True

Whether the shape of the border should be painted in front of the content or behind.

variant class-attribute instance-attribute #

variant: CardVariant = ELEVATED

Defines the card variant to be used.