Cards

The Kirigami types AbstractCard and Card implement the card component popular on many mobile and web platforms. Cards display a collection of information or actions in an attractive and distinctive way.

Kirigami also offers two components for laying out your cards: a positioner, CardsLayout, and a view, CardsListView. Both give your cards responsive layouts.

#AbstractCard

A Kirigami.AbstractCard is the simplest type of card. It's just a rectangle with a shadow, which can contain any Item. It can also have Items assigned to its header or footer properties. Here a Kirigami.Heading is its header and a Controls.Label is the card's contentItem.

Kirigami.AbstractCard {
    Layout.fillHeight: true
    header: Kirigami.Heading {
        text: qsTr("AbstractCard")
        level: 2
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "..."
    }
}

#Card

A Kirigami.Card inherits from AbstractCard and provides more features out of the box. Cards have the same header and footer as an AbstractCard, but you are encouraged to use a banner and a set of Kirigami.Action in the actions group instead.

Kirigami.Card {
    actions: [
        Kirigami.Action {
            text: qsTr("Action1")
            icon.name: "add-placemark"
        },
        Kirigami.Action {
            text: qsTr("Action2")
            icon.name: "address-book-new-symbolic"
        },
        // ...
    ]
    banner {
        source: "../banner.jpg"
        title: "Title Alignment"
        // The title can be positioned in the banner
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

#CardsLayout

A Kirigami.CardsLayout is most useful when the cards aren't instantiated by a model, or are instantiated by a model that always has very few items. They are presented as a grid of two columns, which stays centered if the application is really wide, or becomes a single column if there isn't enough space for two, such as on a phone screen.

Note: CardsListView is better suited for larger models.

Important: A CardsLayout should always be contained within a ColumnLayout.

A card can optionally be oriented horizontally, with its headerOrientation set to Qt.Horizontal. It is then wider than tall, and better suited to being placed in a ColumnLayout. If you put it in a CardsLayout anyway, keep in mind that the layout's maximumColumns is 2 by default.

ColumnLayout {
    Kirigami.CardsLayout {
        Kirigami.Card {
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text2"
            }
        }
        Kirigami.AbstractCard {
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text"
            }
        }
        Kirigami.Card {
            headerOrientation: Qt.Horizontal
            contentItem: Controls.Label {
                wrapMode: Text.WordWrap
                text: "My Text2"
            }
        }
    }
}

#CardsListView

A Kirigami.CardsListView is a list view meant for AbstractCard components.

A CardsListView stretches its cards to its own width, so only use it with cards that look good at any horizontal size. Using a Card in it is discouraged, unless the card's headerOrientation is Qt.Horizontal.

Kirigami.CardsListView {
    id: view
    model: 100

    delegate: Kirigami.AbstractCard {
        //NOTE: never put a Layout as contentItem as it will cause binding loops
        contentItem: Item {
            implicitWidth: delegateLayout.implicitWidth
            implicitHeight: delegateLayout.implicitHeight
            GridLayout {
                id: delegateLayout
                anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
                    //IMPORTANT: never put the bottom margin
                }
                rowSpacing: Kirigami.Units.largeSpacing
                columnSpacing: Kirigami.Units.largeSpacing
                columns: width > Kirigami.Units.gridUnit * 20 ? 4 : 2
                Kirigami.Icon {
                    source: "applications-graphics"
                    Layout.fillHeight: true
                    Layout.maximumHeight: Kirigami.Units.iconSizes.huge
                    Layout.preferredWidth: height
                }
                Kirigami.Heading {
                    level: 2
                    text: qsTr("Product ")+ modelData
                }
                Controls.Button {
                    Layout.alignment: Qt.AlignRight
                    Layout.columnSpan: 2
                    text: qsTr("Install")
                }
            }
        }
    }
}