Simple copyable divider examples (#4655)

MarvinKlein1508 · vnbaaij · web-flow · commit 790c195314f7 · 2026-03-30T13:33:28.000Z
Co-authored-by: Vincent Baaij &lt;vnbaaij@outlook.com&gt;
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
@@ -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
@@ -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
@@ -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
diff --git 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
 
