Card QML Type | Fluid Reference Documentation

- Fluid Reference Documentation
- Fluid 1.0.0

# Card QML Type

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

Import Statement: | import Fluid.Controls 1.0
Inherits: | Card

- List of all members, including inherited members

## Detailed Description

      import QtQuick 2.10
      import Fluid.Controls 1.0 as FluidControls

      FluidControls.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: Units.smallSpacing * 2
              }
              spacing: Units.smallSpacing * 2

              FluidControls.TitleLabel {
                  text: qsTr("Yosemite National Park")
              }

              FluidControls.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: Units.smallSpacing

                  Button {
                      text: qsTr("Share")
                      flat: true
                  }

                  Button {
                      text: qsTr("Explore")
                      flat: true
                  }
              }
          }
      }

For more information you can read the Material Design guidelines.