Card Class Reference

Cards display content composed of different elements. More...

Inheritance diagram for Card:

Collaboration diagram for Card:

Detailed Description

Cards display content composed of different elements.

import QtQuick
import Fluid as Fluid
 
Fluid.Card {
    anchors.centerIn: parent
    width: 400
    height: 400
 
    Image {
        id: picture
        anchors {
            left: parent.left
            top: parent.top
            right: parent.right
        }
        height: 200
        source: "Yosemite.jpg"
    }
 
    Column {
        id: column
        anchors {
            left: parent.left
            top: picture.bottom
            right: parent.right
            margins: Fluid.Units.smallSpacing * 2
        }
        spacing: Fluid.Units.smallSpacing * 2
 
        Fluid.TitleLabel {
            text: qsTr("Yosemite National Park")
        }
 
        Fluid.BodyLabel {
            text: qsTr("First protected in 1864, Yosemite National Park " +
                    "is best known for its waterfalls, but within its " +
                    "nearly 1,200 square miles, you can find deep " +
                    "valleys, grand meadows, ancient giant sequoias, " +
                    "a vast wilderness area, and much more.")
            wrapMode: Text.WordWrap
            width: parent.width
        }
 
        Row {
            spacing: Fluid.Units.smallSpacing
 
            Fluid.Button {
                text: qsTr("Share")
                flat: true
            }
 
            Fluid.Button {
                text: qsTr("Explore")
                flat: true
            }
        }
    }
}

For more information you can read the Material Design guidelines.

For more information you can read the Material Design guidelines.

---

The documentation for this class was generated from the following file:

• /home/runner/work/docs/docs/fluid/src/imports/controls/qml/Card.qml