If you’re creating a site with Power Pages and want to showcase content in a clean, professional layout, adding a Card Gallery is the best way to do so. Whether you are displaying team profiles, blog posts, projects, or services, a card layout helps organize everything visually and keeps your page looking clean and professional.
In this tutorial, I will tell you how to add a card gallery in Power Pages. Additionally, I will show you how to customize the card gallery using Power Pages Design Studio.
Power Pages Card Gallery
A Card Gallery in Power Pages is a no-code visual component that lets you display records from a Dataverse table as individual cards in a clean, grid-based layout. Each card can include an image, title, description, and a clickable button or link, making it perfect for showcasing content such as team members, Blog posts, Projects, Services, and Products.
Add a Card Gallery in Power Pages
For this example, we will use a Dataverse table named Showcase Items, which includes the following columns:
- Title (Primary column) – Single line of text
- Description – Multiple lines of text
- Image URL – Image
- Link URL – Single line of text (URL)
- Click Here – Formula (“Click Here”)
Now, let’s see how to add a Card Gallery in Power Pages using this table.
- Go to Power Pages. Open the site where you want to add the Card Gallery.
- From the left menu, choose Pages, and then select the page where you want the gallery to appear. Then, click the + button and choose Card gallery from the component list.
- After inserting the Card Gallery, Power Pages will ask whether you want to add a new gallery or use an existing one (if you’ve created one earlier). Click New. You will see four layout options.
- In my case, I chose the first layout, which displays the image on top, followed by the title, description, and button. You can pick whichever suits your design.
- Next, click on the Data tab in the right-hand panel. Choose the
Showcase ItemsTable as your data source. Select a view (you can use the default view or create a custom one with just the required columns).
- Now bind your Dataverse columns to card elements:
| Card Element | Bind to Column |
|---|---|
| Image | Image URL |
| Title | Title |
| Description | Description |
| Button | Link URL |
| Custom Text | Created On |
- If you’d like, you can rearrange the order of elements and turn some off if you don’t want to display them.
- After that, click the permissions tab and set anonymous or authenticated users to read the data from the Showcase Items table.
- Click “Preview” to view how the gallery appears.
Add a Search Option in Card Gallery
If you want users to search within the card gallery (for example, by title or description), Power Pages gives you a simple way to enable it:
- Click on the Card Gallery component to open the right-side panel.
- Go to the Styling tab.
- Scroll down to the Enable search option.
- Toggle it on.
Now, a search bar will appear above your gallery, allowing users to filter cards based on the text they enter quickly.
Add Style to Card Gallery
Once your Card Gallery is added and connected to the data source, you can customize its appearance and behavior using the built-in options in Power Pages Design Studio.
- Click on the Card Gallery component to select it. In the right-hand panel, switch to the Styling tab.
- Power Pages lets you customize styles at three levels:
| Level | What You Can Customize |
|---|---|
| Gallery | Spacing between cards, overall layout (grid/columns) |
| Card | Padding, borders, background color, hover effects |
| Element | Fonts, colors, alignment for title, description, and links |
You can click into each section to fine-tune the design according to your site’s branding.
Use the Preview button in the top-right corner to view how the gallery appears on desktop, tablet, and mobile devices.
Adding a Card Gallery in Power Pages is a great way to present your data in a clean and modern layout no coding required.
Hope you found this helpful.
Also, you may like some more tutorials:
- Set Up Microsoft Identity Provider Authentication in Power Pages
- Rename SharePoint List Using Power Automate
- Check if SharePoint List Already Exists in Power Automate
- Get and Delete a SharePoint list view using Power Automate
- Disable Title As Mandatory Field From SharePoint List Using Power Automate
Hey! I’m Bijay Kumar, founder of SPGuides.com and a Microsoft Business Applications MVP (Power Automate, Power Apps). I launched this site in 2020 because I truly enjoy working with SharePoint, Power Platform, and SharePoint Framework (SPFx), and wanted to share that passion through step-by-step tutorials, guides, and training videos. My mission is to help you learn these technologies so you can utilize SharePoint, enhance productivity, and potentially build business solutions along the way.
