Power Apps Modern Card Control – Create Responsive Cards Quickly

Imagine you are building an app that needs to display a quick summary of information, such as a list of employees, documents, or products. Instead of placing many separate controls on the screen, you can use Cards to keep everything clean and organized.

Power Apps recently released a new modern control called Card that helps users display all the information (like name and description) in a single place.

In this tutorial, I will explain how to use a Power Apps Modern Card control with a responsive layout. We will also discuss how to build a modern card representation using a document library and a SharePoint list, with examples.

Power Apps Modern Card Control

Power Apps Modern Cards allow makers to display important details in one place, such as a name, a short description, or an image. You can display the card horizontally or vertically, depending on your screen design. Since cards automatically adjust their layout based on what you configure, you don’t have to worry about alignment or responsiveness.

You can refer to the image below to see how the Power Apps Modern Card control looks like:

IMPORTANT:

1. Modern Control Settings: To view the Modern card, first you need to enable one feature settings i.e. Modern controls and themes.

2. Authoring version: You can see the modern card (preview) option if you have this Authoring version: 3.26012.6 or more than this like 3.26012.11

If you don’t have this version, then the card option won’t visible. You can change the app authoring version by clicking on the Edit button.

Power Apps Modern Card Properties

These are some key properties below:

Property	Description
Direction	There are two types of directions: Vertical: Horizontal:
Title	The main header title text appears at the top of the card.
Subtitle	Extra text shown below or next to the title in the header.
Description	Description text is displayed below the header of the card.
Image	Main preview image for the card.
ImagePlacement	Defines the image’s position. Before Header: After Header:
HeaderImage	Small avatar or icon displayed in the header with the title and subtitle.
Border radius	Defines the corner roundness of the card container.
DropShadow	Defines the shadow style applied to the card.
OnSelect	Action triggered when the user selects the card.

Display SharePoint Library Documents Using Power Apps Modern Card Control

Let’s see how to display all SharePoint files in the Power Apps Modern Card Control, step by step.

1. I have a SharePoint Document library called Project Documents that contains files like PDFs and Excel files. Now I would like to show all these files in Power Apps using the modern card control.

2. In Power Apps, we will create a Blank canvas app with a responsive layout.

The blank canvas app is now ready to use. As we are making the app responsive, insert a new Header and footer screen (New screen -> Header and footer) as shown below.

3. Once the screen is added, remove the footer section that we don’t want.

On the header section of the screen, add a Modern Header control (with header title).

4. Since we want to display all the SharePoint files, we will first add a Gallery control, then add a modern card to it.
   • Inside the Main container, insert a Vertical gallery control (+ Insert -> Vertical gallery).

Choose the gallery Layout as Blank.

Next, set these gallery properties below:

Align in container: Select Custom
Flexible height: On

5. Add the SharePoint library to the app. (+ Add data -> Search SharePoint -> Add a SharePoint connection -> Select SharePoint site and Document library).

Once the SharePoint datasource has been added, select the gallery and add the same SharePoint datasource.

6. Then, edit the gallery and add a Card (Preview) control.

As I am trying to make this app responsive, I dragged the gallery card to the top left corner, as shown below.

7. Now we need to change these card properties below (as I want to make the app as responsive):

Width: Parent.TemplateWidth
Height: Parent.TemplateHeight

8. Then, set the gallery WrapCount property as:

Screen1.Size

Screen1 = Screen name

9. We also need to set TemplatePadding to ensure these cards are evenly spaced.

20

10. Next, select the modern card inside the gallery and set its Title property to:

ThisItem.Name

11. In the same way, select the Subtitle property of the card and apply the code below:

 "👤" & ThisItem.'Created By'.DisplayName & "🕛" & ThisItem.Created

Here, I wanted to display the file creator’s display name along with the created date.

12. To display the thumbnail image of the file, set the code below on the Card’s Image property:

ThisItem.Thumbnail.Large

13. Here, in the card header, I want to display an image based on the file type. So, I have written the power FX logic that reads the file extension and, based on it, displays the SVG image.

Copy the code below on the Card’s HeaderImage property:

With(
    {
        fn: Lower(ThisItem.'File name with extension'),
        ext: If(
            "." in Lower(ThisItem.'File name with extension'),
            Last(
                Split(
                    Lower(ThisItem.'File name with extension'),
                    "."
                )
            ).Value,
            ""
        )
    },
    If(
        // Show actual image preview
        ext in [
            "jpg",
            "jpeg",
            "png",
            "gif",
            "bmp"
        ],
        ThisItem.'File name with extension',
        // Otherwise show SVG icon
        "data:image/svg+xml;utf8," & EncodeUrl(
            Switch(
                ext,
                // PDF
                "pdf",
                "<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
                    <rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#111827' stroke-width='2'/>
                    <path d='M34 4v10h10' fill='none' stroke='#111827' stroke-width='2'/>
                    <path d='M34 4l10 10' fill='none' stroke='#111827' stroke-width='2'/>
                    <rect x='6' y='30' width='36' height='14' rx='4' fill='#ef4444'/>
                    <text x='24' y='41' text-anchor='middle'
                          font-family='Segoe UI, Arial'
                          font-size='10'
                          font-weight='700'
                          fill='white'>PDF</text>
                </svg>",
                // Word
                "doc",
                "<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
                    <rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#1e40af' stroke-width='2'/>
                    <rect x='6' y='30' width='36' height='14' rx='4' fill='#2563eb'/>
                    <text x='24' y='41' text-anchor='middle'
                          font-family='Segoe UI, Arial'
                          font-size='10'
                          font-weight='700'
                          fill='white'>DOC</text>
                </svg>",
                "docx",
                "<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
                    <rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#1e40af' stroke-width='2'/>
                    <rect x='6' y='30' width='36' height='14' rx='4' fill='#2563eb'/>
                    <text x='24' y='41' text-anchor='middle'
                          font-family='Segoe UI, Arial'
                          font-size='9'
                          font-weight='700'
                          fill='white'>DOCX</text>
                </svg>",
                // Excel
                "xls",
                "<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
                    <rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#166534' stroke-width='2'/>
                    <rect x='6' y='30' width='36' height='14' rx='4' fill='#16a34a'/>
                    <text x='24' y='41' text-anchor='middle'
                          font-family='Segoe UI, Arial'
                          font-size='10'
                          font-weight='700'
                          fill='white'>XLS</text>
                </svg>",
                "xlsx",
                "<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
                    <rect x='6' y='4' width='28' height='40' rx='4' fill='#ffffff' stroke='#166534' stroke-width='2'/>
                    <rect x='6' y='30' width='36' height='14' rx='4' fill='#16a34a'/>
                    <text x='24' y='41' text-anchor='middle'
                          font-family='Segoe UI, Arial'
                          font-size='9'
                          font-weight='700'
                          fill='white'>XLSX</text>
                </svg>",
                //Default
                "<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>
                    <rect x='6' y='4' width='28' height='40' rx='4' fill='#e5e7eb' stroke='#6b7280' stroke-width='2'/>
                    <rect x='6' y='30' width='36' height='14' rx='4' fill='#6b7280'/>
                    <text x='24' y='41' text-anchor='middle'
                          font-family='Segoe UI, Arial'
                          font-size='9'
                          font-weight='700'
                          fill='white'>FILE</text>
                </svg>"
            )
        )
    )
)

Refer to the image below:

14. Additionally, since the modern card is clickable, we can click it to open the file and view the details. To do so, we need to write the formula on its OnSelect property:

Launch(ThisItem.'Link to item')

15. Finally, save, publish, and preview the app. You can use the app however you want, like on a tablet or in mobile layout, in a responsive manner, as shown in the GIF below.

This way, we can show all the files from the SharePoint library to Power Apps using the Modern card control.

Display SharePoint List Data Using Power Apps Modern Card Control

Let’s discuss how to display SharePoint list information in a Power Apps modern card using a responsive layout.

1. I have a SharePoint list (Car Rental Services) below with an image column (Image datatype):

2. Now I would like to show all these car images from the SharePoint list to Power Apps using the Modern card control. To display all the images, we can use the Power Apps gallery and add a modern card (as described in the steps above).
   • You can follow the same process above until the SharePoint Datasource connection. Here, I will connect the SharePoint list to the gallery.

Connect the SharePoint list datasource to the gallery.

3. Select the Modern Card Title and set it as:

ThisItem.Title

4. Set its Subtitle as:

ThisItem.'Car Type'.Value

As the Car Type is a SharePoint Choice column.

5. Next, select the card Description property as:

"💺" & ThisItem.Seats & " " & "💰" & ThisItem.'Daily Price'

Here, I am concatenating the seat type and the Daily price that comes from the list.

6. To view the Car images (SharePoint image), set the Card’s Image property as:

ThisItem.'Car Image'.Full

7. That’s it. Just save, publish, and preview the app. Refer to the GIF below for reference.

I hope this article has been helpful to learn about the Power Apps modern card control, its key properties, and how to use it in Power Apps.

Also, we saw how to display the SharePoint library files in a Power Apps modern card with a responsive layout, step by step. Additionally, we learnt how to show SharePoint list data (with images) in a Power Apps modern card with a few examples.

Moreover, you may like some more Power Apps tutorials:

• Search User in Power Apps
• Show File Type Icons in Power Apps Gallery
• Upload Images to Dataverse From Power Apps
• Get Collection Column Names in Power Apps