Action Card

The Action Card is a clickable card with a colored icon block on the left, a bold title and a short supporting line, topped by a transparent overlay button that captures the tap. It turns dashboards and home screens into clear, tappable launch pads for the main areas of your app.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

Projet

Créez ou accédez à vos projets

Clients

Gérez votre portefeuille

YAML source

- ActionCard:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.Regular
      Fill: =RGBA(255, 255, 255, 1)
      Height: =120
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =420
    Children:
      - ActionCardIconBg:
          Control: GroupContainer
          Variant: ManualLayout
          Properties:
            Fill: =RGBA(59, 130, 246, 1)
            Height: =72
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            DropShadow: =DropShadow.None
            Width: =72
            X: =18
            Y: =24
          Children:
            - ActionCardIcon:
                Control: Classic/Icon
                Properties:
                  Color: =RGBA(255, 255, 255, 1)
                  Height: =32
                  Icon: =Icon.Add
                  Width: =32
                  X: =20
                  Y: =20
      - ActionCardTitle:
          Control: Label
          Properties:
            Font: =Font.'Segoe UI'
            FontWeight: =FontWeight.Bold
            Height: =26
            Size: =13
            Text: ="Titre de l''action"
            Width: =290
            X: =110
            Y: =26
      - ActionCardSubtitle:
          Control: Label
          Properties:
            Color: =RGBA(120, 120, 120, 1)
            Font: =Font.'Segoe UI'
            Height: =40
            Size: =11
            Text: ="Description courte de cette action ou fonctionnalité."
            Width: =290
            X: =110
            Y: =56
      - ActionCardOverlay:
          Control: Button
          Properties:
            Appearance: ='ButtonCanvas.Appearance'.Transparent
            Height: =120
            OnSelect: |-
              =// TODO — replace with your navigation, e.g. Navigate(TargetScreen, ScreenTransition.Fade)
              false
            Text: =""
            Width: =420

Common use cases

Home-screen navigation

Lay out a grid of action cards as the primary menu of your app, each routing to a section with Navigate.

Quick actions

Surface common tasks (New request, My tickets, Reports) as cards so users reach them in one tap.

Module launchers

Use cards to enter distinct modules in a larger app, each with its own icon and accent colour.

How to use Action Card in Power Apps

1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
2Click "Copy YAML" to copy the full component definition to your clipboard.
3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.

Tip — Keep the description to a single short line — action cards read best when the title carries the meaning and the subtitle only clarifies.

Related cards components

PRO

Stats Card