Cards for Power Apps

Learn how to add professional card components to display content, data, and interactive elements in your Power Apps.

Add cards using PowerLibs components

PowerLibs provides ready-to-use card components that you can customize and paste directly into Power Apps Studio.

1. Browse the Cards category to find the right style
2. Customize the content and appearance
3. Copy the generated YAML code
4. Paste into Power Apps Studio

Choose your card style

Dynamic Form Card

Interactive card with form elements and data input capabilities.

Best for: Data entry forms, user profiles, settings panels, and any content that requires user input.

Settings you can customize:

• Form fields and labels
• Input types and validation
• Submit actions and styling
• Card layout and spacing

Card Modern

Clean, contemporary card design with modern styling.

Best for: Content display, product showcases, team member profiles, and general information presentation.

Settings you can customize:

• Header and content text
• Images and media
• Colors and styling
• Action buttons and links

Card Modern Tall

Extended height card for more detailed content and information.

Best for: Detailed product descriptions, article previews, comprehensive data displays, and content-rich presentations.

Settings you can customize:

• Extended content areas
• Multiple sections and headers
• Image placement and sizing
• Action button configurations

Implementation steps

1. Select your card style

Go to Cards and choose the style that best fits your content type and layout needs.

2. Customize settings

Click on your chosen card and use the Settings tab to customize:

• Content - Set titles, descriptions, and body text
• Images - Add photos, icons, or graphics
• Actions - Configure buttons and interactive elements
• Styling - Adjust colors, spacing, and visual appearance

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect card actions

After pasting your card component, enhance it with dynamic functionality:

Data binding

// Bind card content to data source
ThisItem.Title, ThisItem.Description, ThisItem.ImageURL

Card click actions

// Navigate to detail view
Navigate(DetailScreen, ScreenTransition.Cover, {SelectedItem: ThisItem})

Form submission (Dynamic Form Cards)

// Submit form data
SubmitForm(CardForm);
Patch(MyDataSource, Defaults(MyDataSource), CardForm.Updates)

Dynamic content loading

// Load content based on user selection
Filter(CardContent, Category = SelectedCategory)

Common use cases

Dashboard widgets

Display key metrics, statistics, and summary information in organized card layouts.

Product catalogs

Showcase products, services, or items with images, descriptions, and action buttons.

Team directories

Present team member profiles with photos, roles, and contact information.

Content feeds

Display articles, posts, or updates in a scrollable card-based layout.

Settings panels

Organize app settings and preferences into categorized card sections.

Best practices

• Keep card content concise and scannable
• Use consistent card sizes within the same layout
• Ensure adequate spacing between cards
• Make interactive elements clearly clickable
• Test card layouts on different screen sizes
• Use high-quality images that fit the card dimensions

Troubleshooting

Cards not displaying properly

Check that container dimensions accommodate the card size and spacing requirements.

Images not loading

Verify image URLs are accessible and properly formatted for Power Apps.

Form cards not submitting

Ensure form validation rules are met and data connections are properly configured.

Responsive issues

Test card layouts on mobile devices and adjust sizing for different screen widths.