Card list

A list of white cards with an initials avatar, title, details line, coloured status pill and chevron, under a header with count and View all.

Overview

A list of records as cards: initials avatar, title, a details line, a status pill and a chevron. The header shows the count, taken from the gallery itself, and a View all button.

Each card is an auto-layout container inside the gallery template, so the parts line up without manual X and Y values. The gallery is exactly as tall as its rows and never shows a scrollbar.

When to use

Up to about ten records where each has a person, a title and a status.
Screens that also have to work on phones, where a table would scroll sideways.

When not to use

Data people compare across many columns: use the task table.
Long lists: show the first few here and link to a full screen with View all.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernText	`1.0.0`
ModernBadge	`1.0.0`
ModernButton	`1.0.0`
Gallery	`2.15.0`
ModernAvatar	`1.1.0`
ModernIcon	`1.1.1`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- CardListRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.None
      Height: =Parent.Height
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =12
      PaddingBottom: =16
      PaddingLeft: =16
      PaddingRight: =16
      PaddingTop: =16
      Width: =Parent.Width
    Children:
      - CardListHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =36
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =8
            LayoutMinHeight: =36
            LayoutMinWidth: =120
          Children:
            - CardListHeading:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  FontWeight: =FontWeight.Semibold
                  Height: =36
                  LayoutMinHeight: =0
                  LayoutMinWidth: =60
                  Size: =18
                  Text: ="Open requests"
                  Width: =160
                  Wrap: =false
            - CardListCount:
                Control: ModernBadge@1.0.0
                Properties:
                  AccessibleLabel: =CardListGallery.AllItemsCount & " requests"
                  Appearance: =BadgeAppearance.Tint
                  Content: =Text(CardListGallery.AllItemsCount)
                  Height: =22
                  Intent: =BadgeIntent.Informative
                  LayoutMinHeight: =22
                  LayoutMinWidth: =32
                  Size: =12
                  Width: =32
            - CardListHeaderSpacer:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =1
                  Height: =10
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
            - CardListViewAll:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Appearance: =ButtonAppearance.Subtle
                  Height: =32
                  Icon: ="ChevronRight"
                  Layout: =ButtonLayout.IconAfter
                  LayoutMinHeight: =32
                  LayoutMinWidth: =96
                  OnSelect: =Notify("Open the full list", NotificationType.Information)
                  Size: =14
                  Text: ="View all"
                  Width: =104
      - CardListGallery:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Requests"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
            Items: |
              =Table(
                  {Title: "Replace fire extinguisher, hall B", Owner: "Sara Peeters", Site: "Warehouse Ghent", Status: "Overdue", Due: Date(2026, 10, 2)},
                  {Title: "Check emergency lighting", Owner: "Tom Janssens", Site: "Office Leuven", Status: "In progress", Due: Date(2026, 10, 14)},
                  {Title: "Annual forklift inspection", Owner: "An De Smet", Site: "Warehouse Ghent", Status: "Open", Due: Date(2026, 10, 21)},
                  {Title: "Repaint loading dock lines", Owner: "Lucas Maes", Site: "Depot Antwerp", Status: "Open", Due: Date(2026, 11, 3)},
                  {Title: "Update first-aid kit, office 2", Owner: "Emma Claes", Site: "Office Leuven", Status: "In progress", Due: Date(2026, 11, 10)}
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =5
            TemplateSize: =76
          Children:
            - CardListCard:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
                  BorderThickness: =1
                  DropShadow: =DropShadow.None
                  Fill: =Color.White
                  Height: =Parent.TemplateHeight
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutGap: =12
                  PaddingLeft: =14
                  PaddingRight: =12
                  RadiusBottomLeft: =12
                  RadiusBottomRight: =12
                  RadiusTopLeft: =12
                  RadiusTopRight: =12
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
                Children:
                  - CardListCardAvatar:
                      Control: ModernAvatar@1.1.0
                      Properties:
                        AccessibleLabel: ="Owner of " & CardListCardTitle.Text
                        Badge: =PresenceBadge.None
                        Height: =40
                        Image: =Blank()
                        LayoutMinHeight: =40
                        LayoutMinWidth: =40
                        Name: =ThisItem.Owner
                        Width: =40
                  - CardListCardText:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        DropShadow: =DropShadow.None
                        FillPortions: =1
                        Height: =46
                        LayoutDirection: =LayoutDirection.Vertical
                        LayoutGap: =2
                        LayoutMinHeight: =46
                        LayoutMinWidth: =80
                      Children:
                        - CardListCardTitle:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =Self.Text
                              AlignInContainer: =AlignInContainer.Stretch
                              FontWeight: =FontWeight.Semibold
                              Height: =24
                              LayoutMinHeight: =0
                              LayoutMinWidth: =60
                              PaddingBottom: =0
                              PaddingTop: =0
                              Size: =15
                              Text: =ThisItem.Title
                              Wrap: =false
                        - CardListCardMeta:
                            Control: ModernText@1.0.0
                            Properties:
                              AccessibleLabel: =Self.Text
                              AlignInContainer: =AlignInContainer.Stretch
                              Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                              Height: =20
                              LayoutMinHeight: =0
                              LayoutMinWidth: =60
                              PaddingBottom: =0
                              PaddingTop: =0
                              Size: =13
                              Text: =ThisItem.Site & " · " & ThisItem.Owner & " · due " & Text(ThisItem.Due, "d mmm")
                              Wrap: =false
                  - CardListCardStatus:
                      Control: ModernBadge@1.0.0
                      Properties:
                        AccessibleLabel: ="Status " & ThisItem.Status
                        Appearance: =BadgeAppearance.Tint
                        Content: =ThisItem.Status
                        Height: =24
                        Intent: =Switch(ThisItem.Status, "Overdue", BadgeIntent.Critical, "In progress", BadgeIntent.Informative, BadgeIntent.Neutral)
                        LayoutMinHeight: =24
                        LayoutMinWidth: =88
                        Size: =12
                        Width: =96
                  - CardListCardChevron:
                      Control: ModernIcon@1.1.1
                      Properties:
                        AccessibleLabel: ="Open " & CardListCardTitle.Text
                        Height: =20
                        Icon: ="ChevronRight"
                        IconColor: =ColorFade(App.Theme.Colors.Darker70, 45%)
                        LayoutMinHeight: =20
                        LayoutMinWidth: =20
                        Width: =20

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Items` on `CardListGallery`

The records to show, filtered and sorted the way the list should read. The gallery grows with its rows, so keep the list short or page it.

In the YAML

YAML

Items: |
  =Table(
      {Title: "Replace fire extinguisher, hall B", Owner: "Sara Peeters", Site: "Warehouse Ghent", Status: "Overdue", Due: Date(2026, 10, 2)},
      {Title: "Check emergency lighting", Owner: "Tom Janssens", Site: "Office Leuven", Status: "In progress", Due: Date(2026, 10, 14)},
      {Title: "Annual forklift inspection", Owner: "An De Smet", Site: "Warehouse Ghent", Status: "Open", Due: Date(2026, 10, 21)},
      {Title: "Repaint loading dock lines", Owner: "Lucas Maes", Site: "Depot Antwerp", Status: "Open", Due: Date(2026, 11, 3)},
      {Title: "Update first-aid kit, office 2", Owner: "Emma Claes", Site: "Office Leuven", Status: "In progress", Due: Date(2026, 11, 10)}
  )

Your version

YAML

Items: =FirstN(Sort(Filter(Requests, Status.Value <> "Closed"), 'Due date', SortOrder.Ascending), 8)

`Text` on `CardListCardTitle`

The main line of each card.

In the YAML

YAML

Text: =ThisItem.Title

Your version

YAML

Text: =ThisItem.'Request title'

`Text` on `CardListCardMeta`

The details line. Combine the columns that help people pick the right card.

In the YAML

YAML

Text: =ThisItem.Site & " · " & ThisItem.Owner & " · due " & Text(ThisItem.Due, "d mmm")

Your version

YAML

Text: =ThisItem.Site.Name & " · " & ThisItem.'Assigned to'.DisplayName & " · due " & Text(ThisItem.'Due date', "d mmm")

`Content` on `CardListCardStatus`

The pill text. For a choice column read its Value, and do the same in the pill's Intent and AccessibleLabel.

In the YAML

YAML

Content: =ThisItem.Status

Your version

YAML

Content: =ThisItem.Status.Value

`Name` on `CardListCardAvatar`

The person whose initials appear in the avatar. Set Image too if you have a photo column.

In the YAML

YAML

Name: =ThisItem.Owner

Your version

YAML

Name: =ThisItem.'Assigned to'.DisplayName

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, CardListRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Card list

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on CardListGallery

Text on CardListCardTitle

Text on CardListCardMeta

Content on CardListCardStatus

Name on CardListCardAvatar

How to paste

When Studio flags a control version

`Items` on `CardListGallery`

`Text` on `CardListCardTitle`

`Text` on `CardListCardMeta`

`Content` on `CardListCardStatus`

`Name` on `CardListCardAvatar`