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.
![image (5)]()
![image (7)]()
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.
![image (8)]()
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
This ensures visual consistency across the entire app.
![image (9)]()
Why Use Modern Card Controls?
1. Clean and Consistent UI
Modern Cards follow Microsoft’s Fluent design guidelines, ensuring your app looks professional and consistent with other Microsoft products.
2. Faster Development
Instead of combining multiple controls manually, a single card handles layout, alignment, and styling.
3. Better Dashboard Experiences
Cards are perfect for summary-first design, where users quickly scan information and navigate deeper only when needed.
4. Responsive by Design
When placed inside modern containers, cards adapt well to different screen sizes and orientations.
Modern Cards vs Classic Controls
| Aspect | Modern Card Control | Classic Controls |
|---|
| UI Style | Fluent / Modern | Traditional |
| Setup Effort | Low | High |
| Best Use | Dashboards, tiles | Forms, data entry |
| Layout | Container-based | Absolute positioning |
Modern Cards are not a replacement for forms. They complement forms by handling overview and navigation scenarios.
Real-World Use Cases
The same Modern Card pattern shown in the screenshot can be applied to:
Anywhere you need a clear, visual summary, Modern Cards fit naturally.
Limitations to Be Aware Of
Since Modern Cards are still evolving:
Some advanced styling options may be limited compared to classic controls
They are optimized for display, not for heavy customization or input
However, for dashboards and overviews, the benefits far outweigh these limitations.
Conclusion
The Modern Card control is a powerful addition to Power Apps that enables makers to build modern, dashboard-style interfaces with minimal effort.
As demonstrated in the reference image, Modern Cards provide:
clarity
consistency
scalability
enterprise-ready design