Tilt card

Added in version 2.0.1.

The TiltCard widget is a ready-to-use 3D interactive card that combines background image loading, custom 3D projection, and floating text layers into a single component powered by TiltBehavior.

Features

• Asynchronous Image Loading with Aspect Ratio Support: Uses FitImage to fetch, scale, and cover card background spaces seamlessly.

• Floating Parallax Text Container: Supports a specialized TiltTextContainer that automatically positions and floats text content above the card using 3D translation matrices.

• Responsive Text Wrapping: Automatically calculates available dimensions and wraps inner MDLabel instances to prevent text overflowing the card boundaries.

Base example

Imperative Python styleDeclarative Python style

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen

KV = '''
<MyScreen>:
    md_bg_color: self.theme_cls.backgroundColor

    TiltCard:
        source: "bg.png"
        card_size: dp(200), dp(340)
        container_pos: dp(15), dp(15)
        corner_radius: 24
        pos_hint: {"center_x": .5, "center_y": .5}

        TiltTextContainer:
            spacing: dp(4)

            MDLabel:
                text: "Grey-winged\nBlackbird"
                font_style: "Title"
                role: "small"
                bold: True
                adaptive_height: True
                theme_text_color: "Custom"
                text_color: "white"

            MDLabel:
                text: "Turdus boulboul • Himalayas"
                font_style: "Body"
                role: "small"
                adaptive_height: True
                theme_text_color: "Custom"
                text_color: "white"
'''


class MyScreen(MDScreen):
    pass


class TiltTest(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        Builder.load_string(KV)

        return MyScreen()


TiltTest().run()

API - kivymd.uix.tilt.tiltcard

class kivymd.uix.tilt.tiltcard.TiltTextContainer(*args, **kwargs)

A vertical layout container specifically designed to hold text elements inside a TiltCard. It automatically adapts its height to its children.

For more information, see in the MDBoxLayout class documentation.

class kivymd.uix.tilt.tiltcard.TiltCard(container=None, **kwargs)

A 3D interactive card widget.

Inherits from TiltBehavior (providing the 3D projection, glare, and parallax shaders) and the standard Kivy Widget. Uses FitImage to render aspect-ratio corrected background images.

For more information, see in the DeclarativeBehavior and TiltBehavior and Widget classes documentation.

source

URL or path to the background image.

source is an StringProperty and defaults to “”.

container

Reference to the child text container.

container is an ObjectProperty and defaults to None.

container_pos

X and Y padding/offset for the text container from the bottom-left corner.

container_pos is an ListProperty and defaults to [dp(15), dp(15)].

add_widget(widget, *args, **kwargs)

Add a new widget as a child of this widget.

Parameters:

widget: Widget

Widget to add to our list of children.

index: int, defaults to 0

Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.

Added in version 1.0.5.

canvas: str, defaults to None

Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.

Added in version 1.9.0.

>>> from kivy.uix.button import Button
>>> from kivy.uix.slider import Slider
>>> root = Widget()
>>> root.add_widget(Button())
>>> slider = Slider()
>>> root.add_widget(slider)