Set up visuals

src/Main.qml

@@ -15,15 +15,79 @@ Kirigami.ApplicationWindow {
     // Window title
     // i18nc() makes a string translatable
     // and provides additional context for the translators
-    title: i18nc("@title:window", "Hello World")
+    title: i18nc("@title:window", "Day countdown")
 
     // Set the first page that will be loaded when the app opens
     // This can also be set to an id of a Kirigami.Page
-    pageStack.initialPage: Kirigami.Page {
-        Controls.Label {
-            // Center label horizontally and vertically within parent object
-            anchors.centerIn: parent
-            text: i18n("Hello from kirigami!")
+    pageStack.initialPage: Kirigami.ScrollablePage {
+        title: i18nc("@title", "Countdown")
+        Kirigami.CardsListView {
+            id: cardsView
+            model: countdownModel
+            delegate: countdownDelegate
+        }
+    }
+
+    ListModel {
+        id: countdownModel
+
+        ListElement {
+            name: "Japan trip!"
+            description: ":D"
+            date: 131
+        }
+        ListElement {
+            name: "My birthday!"
+            description: "Pls give money"
+            date: 61
+        }
+    }
+
+    Component {
+        id: countdownDelegate
+        Kirigami.AbstractCard {
+            contentItem: Item {
+                implicitWidth: delegateLayout.implicitWidth
+                implicitHeight: delegateLayout.implicitHeight
+                GridLayout {
+                    id: delegateLayout
+                    anchors {
+                        left: parent.left
+                        top: parent.top
+                        right: parent.right
+                    }
+                    rowSpacing: Kirigami.Units.largeSpacing
+                    columnSpacing: Kirigami.Units.largeSpacing
+                    columns: root.wideScreen ? 4 : 2
+
+                    Kirigami.Heading {
+                        Layout.fillWidth: true
+                        level: 1
+                        text: date
+                    }
+                    ColumnLayout {
+                        Kirigami.Heading {
+                            Layout.fillWidth: true
+                            text: name
+                        }
+                        Kirigami.Separator {
+                            Layout.fillWidth: true
+                            visible: description.length > 0
+                        }
+                        Controls.Label {
+                            Layout.fillWidth: true
+                            wrapMode: Text.WordWrap
+                            text: description
+                            visible: description.length > 0
+                        }
+                    }
+                    Controls.Button {
+                        Layout.alignment: Qt.AlignRight
+                        Layout.columnSpan: 2
+                        text: i18n("Edit")
+                    }
+                }
+            }
         }
     }
 }