# SharePoint Tabbed Cards Web Part: Organizing Page Content into Tabs

**URL:** <https://community.origamiconnect.com/t/sharepoint-tabbed-cards-web-part-organizing-page-content-into-tabs/677>\
**Category:** How-Tos & Manuals for Origami Connect\
**Created:** [May 13, 2024, 5:40pm UTC](https://community.origamiconnect.com/t/sharepoint-tabbed-cards-web-part-organizing-page-content-into-tabs/677 "2024-05-13T17:40:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![origami](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.origamiconnect.com/origami/32/436_2.png) [@origami](https://community.origamiconnect.com/u/origami)\
**Post date:** [May 13, 2024, 5:40pm UTC](https://community.origamiconnect.com/t/sharepoint-tabbed-cards-web-part-organizing-page-content-into-tabs/677/1 "2024-05-13T17:40:36Z")

</div>

> Need to organize your content into adaptive cards like these?  
> No design skills needed to make your page look this good!

![](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/4/4a1af3262038d70e515cd03694bef69682229094.gif)

> **Setting up the web part**
>
> Edit the page where you want to see the Tabs, and pick this app from the gallery:  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/4/49ab257b4edc5de44ba445c8ace1ed0235e7afd5.png)

> **Adding a new tabs and cards**
>
> 1. Edit web part properties and click the **Add/Remove Tabs** button  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/d/d824af76d706fd28ae5bdfe0e4fc5a6b03702a4d.png)
> 
> 2. Add, remove, or re-order tabs as you see fit
> 
> To associate cards to your tab:
> 
> 1. Click the **Add/Remove Cards** button in web part properties  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/2/2e69af567d521b4193d9303191822a96b0b89996.png)
> 
> 2. Pick the name for the card, the associated tab, any details, links, images, and the color for the card border:  
> 
> 3. Save the page

> **Changing web part styles**
>
> Here are the styling options you can change to your liking:
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/e/e69c0732df83a9e459aff61264c99c0b43284d14.png)
> 
> - **Color of Tab Heading** will change the text color for the tab and card heading.  
> 
> - **Card Width** will set how many cards can you fit within a tab. The wider the card the less items it fits:  
> 
> - **Show Tabs** will let you hide tabs if you only have one:  
> 
> ✅ **Available in Tabs with Cards – Version May 6, 2025**
> 
> You can toggle this option to auto zoom into images on hover:  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/d/d74416855eacb2b1b8e3284765220bed74f0bee4.png)
> 
> Here is how this looks like:  
> [  
> Tabs with Cards - Zoom on hover - Watch Video  
> ](https://www.loom.com/share/212af09aefab4054875d9eee8b4bf05e)[![](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/5/5ad78a23fd0365857f12c1402acc0ae805daa397.gif)](https://www.loom.com/share/212af09aefab4054875d9eee8b4bf05e)

> **Tab Targeting: Show Tabs to Specific Microsoft 365 Groups**
>
> ✅ **Available in Tabs with Cards – Version April 14, 2025**
> 
> You can now display specific tabs **only to members of selected Microsoft 365 Groups**. This allows for more personalized and secure content visibility on your SharePoint pages.
> 
> ### Before You Begin
> 
> Please ask your Microsoft 365 administrator to confirm that the proper permissions have been granted.
> 
> ➡ They can follow this guide:  
> **[Grant Origami web parts ability to target content to specific M365 groups](https://community.origamiconnect.com/t/grant-origami-web-parts-ability-to-target-content-to-specific-m365-groups/903)**
> 
> ### How to Create Microsoft 365 Groups
> 
> - M365 Groups can be created manually via the **Microsoft 365 Admin Center**.
> - If you’ve created a **Team Site** , SharePoint automatically generates M365 Groups for **Site Members** and **Site Owners**.
> 
> **Example:**  
> If you’ve created a Team Site called _“HR Site”_, you’ll see a group named _“HR Site Members”_. This group is automatically generated and can be used for link targeting..
> 
> ### Targeting Tabs to a Specific Group
> 
> 1. Add or edit a Tabs using **Tabs with Cards**.  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/5/581f23b848be9a36cb27c60254bbae49074a0852.png)
> 
> 2. In the targeting section, **search for the M365 Group name** (e.g., _HR Site Members_).
> 
> 3. Select the group from the list.  
> 
> ### Done!
> 
> Once you save the page, your selected tabs will only be visible to people in the specified group(s).
> 
> ### Want to Remove Targeting?
> 
> Simply clear the group name(s) from the text box. This will make the tab visible to **everyone**.