Skip to main content

Card

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

Examples

Live example

import flet as ft

def main(page):
page.title = "Card Example"
page.add(
ft.Card(
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
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(
[ft.TextButton("Buy tickets"), ft.TextButton("Listen")],
alignment=ft.MainAxisAlignment.END,
),
]
),
width=400,
padding=10,
)
)
)

ft.app(target=main)

Properties

clip_behavior

The content will be clipped (or not) according to this option. See Container.clip_behavior for possible values.

Default value is ClipBehavior.NONE.

color

The card's background color.

content

The Control that should be displayed inside the card.

This control can only have one child. To lay out multiple children, let this control's child be a control such as Row, Column, or Stack, which have a children property, and then provide the children to that control.

elevation

Controls the size of the shadow below the card. Default value is 1.0.

is_semantic_container

Set to True (default) if this card represents a single semantic container, or to False if it instead represents a collection of individual semantic nodes (different types of content).

margin

The empty space that surrounds the card.

See Container.margin property for more information and possible values.

shadow_color

The color to paint the shadow below the card.

shape

The shape of the card. See FloatingActionButton.shape for possible values.

The default shape is a RoundedRectangleBorder with radius=4.0.

show_border_on_foreground

Set to True (default) if the shape of the border should be painted in front of the content, or to False if it should instead be painted behind.

surface_tint_color

The color used as an overlay on color to indicate elevation.

If this is None, no overlay will be applied. Otherwise this color will be composited on top of color with an opacity related to elevation and used to paint the background of the card.

The default is None.

variant

Defines the card variant to be used. Value is of CardVariant enum:

  • ELEVATED - the default variant
  • FILLED - the filled variant
  • OUTLINED - the outlined variant