1. Introduction
Modern applications require user interfaces that are not only functional but also visually appealing and responsive across different devices. To simplify UI design, Microsoft introduced the Modern Card Control in Power Apps. This control allows makers to display important information such as images, titles, descriptions, and metadata within a single, well-structured card.
Whether you’re building an asset management system, document library, employee directory, or product catalog, the Modern Card Control provides a clean and professional way to present records. It also supports responsive layouts, built-in styling, and interactive actions, making it an excellent choice for modern Canvas Apps.
2. What is the Modern Card Control?
The Modern Card Control is a built-in Power Apps control that displays information in a clean, card-style layout. It combines elements such as a title, subtitle, description, image, and optional header image into a single responsive component, making it ideal for presenting records in an organized and visually appealing way.
Unlike traditional layouts that require multiple labels, images, and shapes, the Modern Card Control simplifies app development by providing a single configurable control. It is commonly used inside a Gallery to display SharePoint lists, document libraries, Dataverse records, or other data sources.
Before using this control, ensure Modern Controls & Themes are enabled from App Settings → Updates, and verify that your app authoring version supports modern controls.
3. Key Properties of the Modern Card Control
The Modern Card Control includes several built-in properties that allow you to customize both its appearance and behavior.
1.Direction
Controls whether the card is displayed in a Vertical or Horizontal layout.
2.Title
Displays the primary text of the card, such as a file name, product name, or employee name.
3.Subtitle
Shows additional information below or beside the title, such as the creator’s name or department.
4.Description
Displays a longer summary or additional details related to the record.
5.Image
Displays a preview image, thumbnail, or uploaded picture associated with the record.
6.Image Placement
Determines whether the image appears before or after the card content.
7.Image Style
Controls how the image is displayed using options such as Fit, Stretch, Center, or Tile.
8.Header Image
Displays a small icon or avatar alongside the title for better visual identification.
9.OnSelect
Allows you to execute Power Fx formulas such as Launch(), Navigate(), or Notify() when the user clicks the card.
10.DisplayMode
Controls whether the card is editable, view-only, or disabled.
11.Visible
Determines whether the card is displayed based on app conditions.
12.Styling Options
You can customize the card using features like:
- Rounded corners (Border Radius)
- Drop Shadow
- Theme colours
- Accessibility labels for screen readers
These properties make the Modern Card Control highly flexible while maintaining a consistent user experience.
4. Building Responsive Card Layouts
One of the biggest advantages of the Modern Card Control is its ability to create responsive layouts with minimal effort.
Start by adding a Responsive Container to your screen, then insert a Vertical Gallery with a Blank layout. Connect the gallery to your data source, such as a SharePoint list or document library, and place a Modern Card Control inside the gallery template.
To make the cards responsive, set their dimensions using:
- Width = Parent.TemplateWidth
- Height = Parent.TemplateHeight
These settings allow the cards to automatically resize with the gallery template.
Use the WrapCount property to control how many cards appear in each row. For example, a desktop screen may display three or four cards, while a mobile device displays only one. You can also adjust TemplatePadding to maintain equal spacing between cards.
Finally, bind the card properties to your data source using ThisItem values, such as:
- Title → ThisItem.Name
- Subtitle → ThisItem.’Created By’.DisplayName
- Description → formatted metadata
- Image → ThisItem.Thumbnail.Large or an image column
This approach creates a responsive card gallery that adapts seamlessly to different screen sizes.
5. Making Cards Interactive
The Modern Card Control is more than just a display component—it also supports user interaction.
Using the OnSelect property, you can perform various actions when a user clicks a card. Common examples include:
- Opening SharePoint documents using Launch()
- Navigating to another screen with Navigate()
- Displaying confirmation messages using Notify()
- Opening edit or view forms for the selected record
When connected to a SharePoint document library, the card can display document thumbnails, file names, creator information, and creation dates. Different layouts can also be used depending on the application, such as vertical cards for detailed information or horizontal cards for compact lists.
These interactive capabilities help create a more engaging and user-friendly experience.
