Merge pull request #790 from Ivy-Interactive/feat/view-metric-docs

(card): view metric and card redesign and documentation

Author: rorychatt

Ivy.Docs.Shared/Docs/02_Widgets/01_Common/Card.md

@@ -15,7 +15,7 @@ The `Card` widget is a versatile container used to group related content and act
 
 Here's a simple example of a card containing text and a button that shows a toast message when clicked.
 
-```csharp demo-below 
+```csharp demo-below
 new Card(
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc",
     new Button("Sign Me Up", _ => client.Toast("You have signed up!"))
@@ -39,4 +39,23 @@ new Card(
  .Width(Size.Units(100))
 ```
 
-<WidgetDocs Type="Ivy.Card" ExtensionTypes="Ivy.CardExtensions" SourceUrl="https://github.com/Ivy-Interactive/Ivy-Framework/blob/main/Ivy/Widgets/Card.cs"/>
+## Dashboard Metrics
+
+For dashboard applications, Ivy provides the specialized `MetricView` component that extends Card functionality with KPI-specific features like trend indicators and goal tracking.
+
+```csharp demo-below
+new MetricView(
+    "Revenue", 
+    Icons.DollarSign,
+    () => Task.FromResult(new MetricRecord(
+        "$125,430", 
+        0.12, // 12% increase
+        0.85, // 85% of goal
+        "Target: $150,000"
+    ))
+)
+```
+
+The `MetricView` automatically handles loading states, error handling, and displays trend arrows with color-coded indicators for performance tracking.
+
+<WidgetDocs Type="Ivy.Card" ExtensionTypes="Ivy.CardExtensions" SourceUrl="https://github.com/Ivy-Interactive/Ivy-Framework/blob/main/Ivy/Widgets/Card.cs"/>

Ivy.Docs.Shared/GlobalUsings.cs

@@ -22,6 +22,7 @@
 global using Ivy.Widgets.Internal;
 global using Ivy.Views.Tables;
 global using Ivy.Views.Blades;
+global using Ivy.Views.Dashboards;
 global using Ivy.Docs.Shared.Helpers;
 
 namespace Ivy.Docs.Shared;