Tabs with Cards web part

[origami]

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

Setting up the web part

Edit the page where you want to see the Tabs, and pick this app from the gallery:

Adding a new tabs and cards

1. Edit web part properties and click the Add/Remove Tabs button
   

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
   

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:

• 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: