Introduction
Power Apps has been steadily moving towards a modern, Fluent UI–based design system. One of the most impactful additions in this journey is the Modern Card control.
The Modern Card control allows makers to build clean, professional, dashboard-style user interfaces without relying on complex layouts or heavy custom styling. Instead of assembling multiple labels, images, and containers manually, the card brings everything together into a single, reusable UI component.
The screenshot above is a practical example of how Modern Card controls can be used to create a tile-based dashboard experience in a Canvas app.
What is the Modern Card Control?
The Modern Card control is a visual container control designed to present summarized information in a structured and visually appealing way.
Unlike traditional form cards (used for data entry), Modern Cards are meant for:
dashboards
navigation tiles
summary views
preview panels
Each card can display:
an image or icon
a title
a subtitle
a short description
click or tap actions
This makes it ideal for high-level overviews rather than detailed editing screens.
Understanding the Example Screen
In the reference image, each tile represents a Modern Card control showcasing Microsoft products such as Power Apps, Power Automate, SharePoint, and others.
Key UI characteristics visible in the example:
Uniform card size and spacing
Rounded corners and soft shadows
Centered iconography for quick recognition
Clear hierarchy: Title → Metadata → Visual
Responsive layout using modern containers
This design would be difficult and time-consuming to achieve using classic controls, but with Modern Cards it becomes simple and maintainable.
Anatomy of a Modern Card
Each Modern Card in the example contains the following elements:
1. Image / Icon
Used to visually identify the item (for example, application logos).
This is typically bound to the Image or HeaderImage property.
2. Title
The primary label of the card, such as Power Apps or Microsoft Excel.
This is bound to the Title property.
3. Subtitle or Description
Additional contextual information, such as Publish Date.
This is bound to the Subtitle or Description property.
4. Styling and Layout
The card automatically applies:
rounded corners
consistent padding
Fluent UI spacing
optional shadow effects
Join the conversation! Your thoughts help the community grow.