Back to LibraryData Display
Modern Info Card
Added Jun 9, 2026
A clean, versatile card container with a title, description, body content, and a two-button footer. Directly inspired by the shadcn/ui Card component structure.
Dark Mode
Said test
Deploy your new project in one-click with our automated pipeline.
Your project will be built, tested, and deployed to the selected environment. This action cannot be undone once confirmed.
CopySnips Live Preview
How to Use
- Paste the YAML snippet onto your screen.
- Use the Settings tab to configure the title, description, body text, and button labels.
- Attach OnSelect actions to `btnCardPrimary` and `btnCardSecondary` for interactivity.
- The card height auto-adjusts based on content using formula-driven Y positions.
Problem Solved
Provides a polished, reusable card layout matching the clean aesthetic of modern design systems like shadcn/ui. No more ad-hoc rectangles and labels.
Integration
Ideal as a detail panel, confirmation prompt, project overview tile, or any context where structured information is presented alongside an action.
YAML Code
- conCard:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
DropShadow: =DropShadow.Light
Fill: =RGBA(255, 255, 255, 1)
Height: =btnCardPrimary.Y + btnCardPrimary.Height + 20
RadiusBottomLeft: =16
RadiusBottomRight: =16
RadiusTopLeft: =16
RadiusTopRight: =16
Width: =380
Children:
- lblCardTitle:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Bold
Height: =28
Size: =14
Text: ="Said test"
Width: =Parent.Width - 40
X: =20
Y: =20
- lblCardDescription:
Control: Label@2.5.1
Properties:
AutoHeight: =true
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =36
Size: =10
Text: ="Deploy your new project in one-click with our automated pipeline."
Width: =Parent.Width - 40
X: =20
Y: =lblCardTitle.Y + lblCardTitle.Height + 4
- rectCardDivider:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(226, 232, 240, 1)
Height: =1
Width: =Parent.Width
X: =0
Y: =lblCardDescription.Y + lblCardDescription.Height + 16
- lblCardContent:
Control: Label@2.5.1
Properties:
AutoHeight: =true
Color: =RGBA(51, 65, 85, 1)
Font: =Font.'Open Sans'
Height: =50
Size: =10
Text: ="Your project will be built, tested, and deployed to the selected environment. This action cannot be undone once confirmed."
Width: =Parent.Width - 40
X: =20
Y: =rectCardDivider.Y + rectCardDivider.Height + 16
- btnCardPrimary:
Control: Classic/Button@2.2.0
Properties:
Color: =RGBA(255, 255, 255, 1)
Fill: =RGBA(37, 99, 235, 1)
FontWeight: =FontWeight.Semibold
Height: =40
HoverColor: =RGBA(255, 255, 255, 1)
HoverFill: =RGBA(29, 78, 216, 1)
OnSelect: =false
PressedColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(30, 64, 175, 1)
RadiusBottomLeft: =10
RadiusBottomRight: =10
RadiusTopLeft: =10
RadiusTopRight: =10
Size: =11
Text: ="Deploy"
Width: =(Parent.Width - 48) / 2
X: =20
Y: =lblCardContent.Y + lblCardContent.Height + 20
- btnCardSecondary:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =RGBA(203, 213, 225, 1)
BorderThickness: =1
Color: =RGBA(51, 65, 85, 1)
Fill: =RGBA(255, 255, 255, 1)
FontWeight: =FontWeight.Semibold
Height: =40
HoverColor: =RGBA(51, 65, 85, 1)
HoverFill: =RGBA(248, 250, 252, 1)
OnSelect: =false
PressedColor: =RGBA(51, 65, 85, 1)
PressedFill: =RGBA(241, 245, 249, 1)
RadiusBottomLeft: =10
RadiusBottomRight: =10
RadiusTopLeft: =10
RadiusTopRight: =10
Size: =11
Text: ="Cancel"
Width: =(Parent.Width - 48) / 2
X: =20 + (Parent.Width - 48) / 2 + 8
Y: =btnCardPrimary.YImplementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide