diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index fd31a25..826977a 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -56,6 +56,7 @@
                     <FluentNavLink Href="compobutton" Icon="@(new Icons.Regular.Size20.ControlButton())" IconColor="Color.Accent">Button</FluentNavLink>
                     <FluentNavLink Href="compomenubutton" Icon="@(new Icons.Regular.Size20.ControlButton())" IconColor="Color.Accent">MenuButton</FluentNavLink>
                 </FluentNavGroup>
+                <FluentNavLink Href="compocard" Icon="@(new Icons.Regular.Size20.CardUi())" IconColor="Color.Accent">Card</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoCard.razor b/BlazorFluentUI/Components/Pages/Components/CompoCard.razor
new file mode 100644
index 0000000..11e23d5
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoCard.razor
@@ -0,0 +1,77 @@
+@page "/compocard"
+
+@inject EmployeeService EmployeeService
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">CounterBadge</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentCounterBadge</code> component is used to display a notification count on top of another component.
+
+<FluentLabel class="my-3" Typo="Typography.H4">Simple Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentCard Width="200px" Height="200px">
+        <p>Just some content in a card (with a button that does not do anything).</p>
+        <FluentButton Appearance="Appearance.Accent">Hello</FluentButton>
+    </FluentCard>
+
+    <FluentCard>
+        <p>Just some content in a card (with a button that does not do anything).</p>
+        <FluentButton Appearance="Appearance.Accent">Hello</FluentButton>
+        <p>No Width or Height has been specified.</p>
+    </FluentCard>
+</FluentCard>
+
+<h4>Area restricted examples</h4>
+<div>
+    By default a card restricts its content to the card area.
+    This means, for example, that if you have a select list with a lot of items,
+    the list will be cut off at the bottom of the card.
+    You can override this behavior by setting the <code>AreaRestricted</code> property to <code>false</code>.
+</div>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack>
+        <FluentCard Width="200px" Height="300px">
+            <p>This card's content is restricted to its area. Open the select list below to see the result.</p>
+            <label for="employee-listbox">Select a employee</label>
+            <FluentSelect TOption="Employee"
+                          Items="@EmployeeService.GetFixedEmployeeData().Where(e => e.ID <= 6)"
+                          Id="employee-listbox"
+                          Width="100px"
+                          OptionValue="@(e => e.ID.ToString())"
+                          OptionText="@(e => e.LastName)"
+                          @bind-Value="selectedValue1"
+                          @bind-SelectedOption="selectedEmployee1"/>
+        </FluentCard>
+
+        <FluentCard Width="200px" Height="300px" AreaRestricted="false">
+            <p>This card's content is restricted to its area. Open the select list below to see the result.</p>
+            <label for="employee-listbox">Select a employee</label>
+            <FluentSelect TOption="Employee"
+                          Items="@EmployeeService.GetFixedEmployeeData().Where(e => e.ID <= 6)"
+                          Id="employee-listbox"
+                          Width="100px"
+                          OptionValue="@(e => e.ID.ToString())"
+                          OptionText="@(e => e.LastName)"
+                          @bind-Value="selectedValue2"
+                          @bind-SelectedOption="selectedEmployee2" />
+        </FluentCard>
+    </FluentStack>
+</FluentCard>
+
+<h4>Minimal Style</h4>
+<div>
+    You can use the <code>MinimalStyle</code> property to remove all the default styles from the <code>FluentCard</code>.
+    This will allow you to use the <code>FluentCard</code> component as a simple container without any style,
+    except the styles to draw <code>box-shadow</code> (and some minimal styles).
+</div>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false" MinimalStyle="true">
+    <p>Just some content in a card (with a button that does not do anything).</p>
+    <FluentButton Appearance="Appearance.Accent">Hello</FluentButton>
+    <p>No Width or Height has been specified.</p>
+</FluentCard>
+
+@code {
+    Employee? selectedEmployee1, selectedEmployee2;
+    string? selectedValue1, selectedValue2;
+}