• Fluid Reference Documentation
• Fluid 1.2.0

Fluid.Controls.Card QML Type

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

• 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.