From e275406bc2d8bd625c547a3ee826a5cc4aa05ef3 Mon Sep 17 00:00:00 2001
From: Marvin Klein <32510006+MarvinKlein1508@users.noreply.github.com>
Date: Mon, 30 Mar 2026 15:12:17 +0200
Subject: [PATCH] Simple copyable divider examples

---
 .../Examples/FluentDividerAlignment.razor     | 23 +++++++++++
 .../Examples/FluentDividerAppeareance.razor   | 15 +++++++
 .../Examples/FluentDividerDefault.razor       |  8 ++++
 .../Examples/FluentDividerExamples.razor      | 39 -------------------
 .../Components/Divider/FluentDivider.md       | 12 +++++-
 5 files changed, 56 insertions(+), 41 deletions(-)
 create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAlignment.razor
 create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAppeareance.razor
 create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerDefault.razor
 delete mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerExamples.razor

diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAlignment.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAlignment.razor
new file mode 100644
index 0000000000..d0c47d3bd2
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAlignment.razor
@@ -0,0 +1,23 @@
+<FluentDivider AlignContent="DividerAlignContent.Start">
+    Start
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.Center">
+    Center
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.End">
+    End
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.Start" Inset="true">
+    Start (with inset)
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.Center" Inset="true">
+    Center (with inset)
+</FluentDivider>
+
+<FluentDivider AlignContent="DividerAlignContent.End" Inset="true">
+    End (with inset)
+</FluentDivider>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAppeareance.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAppeareance.razor
new file mode 100644
index 0000000000..49f0926c8b
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerAppeareance.razor
@@ -0,0 +1,15 @@
+<FluentDivider>
+    Default
+</FluentDivider>
+
+<FluentDivider Appearance="DividerAppearance.Strong">
+    Strong
+</FluentDivider>
+
+<FluentDivider Appearance="DividerAppearance.Brand">
+    Brand
+</FluentDivider>
+
+<FluentDivider Appearance="DividerAppearance.Subtle">
+    Subtle
+</FluentDivider>
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerDefault.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerDefault.razor
new file mode 100644
index 0000000000..c3bfa3cf9c
--- /dev/null
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerDefault.razor
@@ -0,0 +1,8 @@
+<FluentDivider>
+    Horizontal
+</FluentDivider>
+
+<FluentDivider Vertical="true">
+    Vertical
+</FluentDivider>
+
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerExamples.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerExamples.razor
deleted file mode 100644
index 42eabbff74..0000000000
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/Examples/FluentDividerExamples.razor
+++ /dev/null
@@ -1,39 +0,0 @@
-<FluentStack HorizontalGap="12px"
-             Style="margin-bottom:15px;"
-             VerticalAlignment="VerticalAlignment.Bottom"
-             Orientation="Orientation.Horizontal"
-             Wrap="true">
-
-    <FluentTextInput Label="Content"
-                     @bind-Value="@content" />
-
-    <FluentSelect Label="Appearance"
-                  Items="@(Enum.GetValues<DividerAppearance>())"
-                  @bind-Value="@appearance" />
-
-    <FluentSelect Label="Align content"
-                  Items="@(Enum.GetValues<DividerAlignContent>())"
-                  @bind-Value="@alignContent" />
-
-    <FluentCheckbox Label="Inset"
-                    @bind-Value="inset" />
-
-    <FluentCheckbox Label="Vertical"
-                    @bind-Value="vertical" />
-</FluentStack>
-
-<FluentDivider Appearance="@appearance"
-               AlignContent="@alignContent"
-               Inset="@inset"
-               Vertical="@vertical">
-    @content
-</FluentDivider>
-
-@code
-{
-    string content = "Fluent divider";
-    DividerAppearance appearance = DividerAppearance.Default;
-    DividerAlignContent alignContent = DividerAlignContent.Center;
-    bool inset = false;
-    bool vertical = false;
-}
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/FluentDivider.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/FluentDivider.md
index 8b33ff4677..e440c4958d 100644
--- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/FluentDivider.md
+++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Divider/FluentDivider.md
@@ -7,11 +7,19 @@ icon: DividerShort
 # Divider
 
 The `Divider` component is used to separate content within a container.
-The component is a wrapper for the <fluentui-divider/> web component.
+The component is a wrapper for the `<fluentui-divider/>` web component.
 
 ## Examples
 
-{{ FluentDividerExamples }}
+{{ FluentDividerDefault }}
+
+## Appeareance
+
+{{ FluentDividerAppeareance }}
+
+## Alignment
+
+{{ FluentDividerAlignment }}
 
 ## API FluentDivider