Update workspace icons table to cards

models/app/features/panels.mdx

@@ -7,12 +7,36 @@ Use workspace panel visualizations to explore your [logged data](/models/ref/pyt
 
 ## Workspace modes
 
-W&B projects support two different workspace modes. The icon next to the workspace name shows its mode. 
+W&B projects support two different workspace modes. The icon next to the workspace name shows its mode.
+
+<CardGroup cols={1}>
+<Card title="Automated workspaces">
+  <img src="/images/app_ui/automated_workspace.svg" alt="Automated workspace icon" style={{width: "32px", height: "32px", float: "left", marginRight: "12px", marginTop: "2px"}}/>
+
+  Automatically generate panels for all keys logged in the project. 
+
+  Choose an automatic workspace:
+  - To get started quickly by visualizing all available data for the project
+  - For smaller projects that log fewer keys
+  - For more broad analysis
+
+  If you delete a panel from an automatic workspace, you can use [Quick add](#quick-add) to recreate it.
+</Card>
+
+<Card title="Manual workspaces">
+  <img src="/images/app_ui/manual_workspace.svg" alt="Manual workspace icon" style={{width: "32px", height: "32px", float: "left", marginRight: "12px", marginTop: "2px"}}/>
+
+  Start as blank slates and display only panels intentionally added by users. 
+
+  **Choose a manual workspace:**
+  - When you care mainly about a fraction of the keys logged in the project
+  - For more focused analysis
+  - To improve workspace performance, avoiding loading panels that are less useful to you
+
+  Use [Quick add](#quick-add) to easily populate a manual workspace and its sections with useful visualizations rapidly.
+</Card>
+</CardGroup>
 
-| Icon | Workspace mode |
-| --- | --- |
-| <img src="/images/app_ui/automated_workspace.svg" alt="automated workspace icon" width="32px"  /> | **Automated workspaces** automatically generate panels for all keys logged in the project. Choose an automatic workspace:<ul><li>To get started quickly by visualizing all available data for the project.</li><li>For a smaller projects that log fewer keys.</li><li>For more broad analysis.</li></ul>If you delete a panel from an automatic workspace, you can use [Quick add](#quick-add) to recreate it. |
-| <img src="/images/app_ui/manual_workspace.svg" alt="manual workspace icon" width="32px"  /> | **Manual workspaces** start as blank slates and display only those panels intentionally added by users. Choose a manual workspace:<ul><li>When you care mainly about a fraction of the keys logged in the project.</li><li>For more focused analysis.</li><li>To improve the performance of a workspace, avoiding loading panels that are less useful to you.</li></ul>Use [Quick add](#quick-add) to easily populate a manual workspace and its sections with useful visualizations rapidly. |
 
 To change how a workspace generates panels, [reset the workspace](#reset-a-workspace).