Card

Purpose

A card serves as overview and an entry point for more detailed information and can offer direct access to the most important actions on an item.

Guidelines

Is this the right control?

• Don't use a card to display long texts.
• Cards can be used to display items with different content types, e.g. images text, videos.
• Don't use cards for content that should be directly comparable, use a table view or a grid view for that.
• If you would show more than 20 cards at a time, or if the user would have to scroll for more than three screen heights to see all of them, consider using a list instead.
• Don't use cards with text input elements.
• If your cards consist of just one image a grid with overlay actions might be more suitable.

Behavior

Desktop

Cards are responsive. They resize to fit into the available space.

It is recommended that you adjust the number of cards displayed next to each other depending on the available space.

Mobile

• Cards only resize to orientation changes.
• The number of columns only adjust to orientation changes.

Appearance

It is recommended that you use the standard card layout for consistency, but cards can have a lot of different layouts.

The only common requirement is the container around it. While cards can have a lot of different layouts, each should focus only on one bit of information or content.

Here are some general recommendations for card layouts:

• Use images, icons or video elements to create visually immersive cards. Feel free to use different text sizes, cards are not a control for plain text.

• Use a well known aspect ratio for a header image

  

• Add a padding of at least largeSpacing to the card, except for videos and images. These can ignore the padding and span the entire width or height of a card.

  

  

Code

Kirigami

• Kirigami: Card
• Kirigami: CardsGridView
• Kirigami: CardsLayout
• Kirigami: CardsListView

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

...
import org.kde.kirigami 2.9 as Kirigami
...

Kirigami.ApplicationWindow {
    ...
    Kirigami.Card {
        actions: [
            Kirigami.Action {
                text: "Action1"
                icon.name: "add-placemark"
            },
            Kirigami.Action {
                text: "Action2"
                icon.name: "address-book-new-symbolic"
            }
        ]
        banner {
            imageSource: "..."
            title: "Hello World"
        }
        contentItem: Controls.Label {
            wrapMode: Text.WordWrap
            text: "Lorem ipsum ..."
        }
    }
    ...
}