microsoft · Vincent Baaij (vnbaaij) · Jul 4, 2026 · Jul 4, 2026 · Jul 4, 2026 · Jul 4, 2026
@@ -0,0 +1,10 @@
+<div class="sticker-row">
+    <FluentAccordion>
+        <FluentAccordionItem Header="Accordion header 1">
+            Accordion panel 1
+        </FluentAccordionItem>
+        <FluentAccordionItem Header="Accordion header 2">
+            Accordion panel 2
+        </FluentAccordionItem>
+    </FluentAccordion>
+</div>
@@ -0,0 +1,17 @@
+<div class="sticker-row">
+    <FluentAnchorButton>
+        Default
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Primary">
+        Primary
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Outline">
+        Outline
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Subtle">
+        Subtle
+    </FluentAnchorButton>
+    <FluentAnchorButton Appearance="ButtonAppearance.Transparent">
+        Transparent
+    </FluentAnchorButton>
+</div>
@@ -0,0 +1,49 @@
+<div class="sticker-row">
+    <FluentAppBar Orientation="Orientation.Horizontal" Style="width: 350px;">
+        <FluentAppBarItem IconRest="ResourcesIcon()"
+                          IconActive="ResourcesIcon(active: true)"
+                          Text="Resources" />
+        <FluentAppBarItem IconRest="ConsoleLogsIcon()"
+                          IconActive="ConsoleLogsIcon(active: true)"
+                          Text="Console Logs" />
+        <FluentAppBarItem Href="/sticker-sheet"
+                          IconRest="StickerSheetIcon()"
+                          IconActive="StickerSheetIcon(active: true)"
+                          Text="Sticker Sheet" />
+        <FluentAppBarItem IconRest="StructuredLogsIcon()"
+                          IconActive="StructuredLogsIcon(active: true)"
+                          Text="Logs"
+                          Tooltip="Structured Logs" />
+        <FluentAppBarItem IconRest="TracesIcon()"
+                          IconActive="TracesIcon(active: true)"
+                          Text="Traces" />
+        <FluentAppBarItem IconRest="MetricsIcon()"
+                          IconActive="MetricsIcon(active: true)"
+                          Text="Metrics" />
+    </FluentAppBar>
+</div>
+
+@code {
+    private static Icon ResourcesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.AppFolder()
+               : new Icons.Regular.Size24.AppFolder();
+
+    private static Icon ConsoleLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.SlideText()
+               : new Icons.Regular.Size24.SlideText();
+
+    private static Icon StructuredLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.SlideTextSparkle()
+               : new Icons.Regular.Size24.SlideTextSparkle();
+
+    private static Icon TracesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.GanttChart()
+               : new Icons.Regular.Size24.GanttChart();
+
+    private static Icon MetricsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.ChartMultiple()
+               : new Icons.Regular.Size24.ChartMultiple();
+    private static Icon StickerSheetIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.Sticker()
+               : new Icons.Regular.Size24.Sticker();
+}
@@ -0,0 +1,22 @@
+@using static FluentUI.Demo.SampleData.Olympics2024
+<div class="sticker-row">
+
+    <FluentAutocomplete TOption="Country"
+                        TValue="string"
+                        Width="100%"
+                        Label="Select countries"
+                        Placeholder="Type to search..."
+                        OnOptionsSearch="@OnSearchAsync"
+                        OptionText="@(item => item.Name)"
+                        OptionDisabled="@(e => e.Code == "au")"/>
+</div>
+@code
+{
+    Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
+    {
+        e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
+                           .OrderBy(i => i.Name);
+
+        return Task.CompletedTask;
+    }
+}
@@ -0,0 +1,6 @@
+<div class="sticker-row">
+    <FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size32" Initials="VB" />
+    <FluentAvatar Shape="AvatarShape.Square" Size="AvatarSize.Size32" Initials="DV" />
+    <FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size48" Initials="MK" />
+    <FluentAvatar Shape="AvatarShape.Circle" Size="AvatarSize.Size48" Initials="AC" Active="true" />
+</div>
@@ -0,0 +1,14 @@
+<div class="sticker-row">
+    <FluentBadge Appearance="BadgeAppearance.Filled" Color="BadgeColor.Brand">
+        Filled
+    </FluentBadge>
+    <FluentBadge Appearance="BadgeAppearance.Ghost" Color="BadgeColor.Brand">
+        Ghost
+    </FluentBadge>
+    <FluentBadge Appearance="BadgeAppearance.Outline" Color="BadgeColor.Brand">
+        Outline
+    </FluentBadge>
+    <FluentBadge Appearance="BadgeAppearance.Tint" Color="BadgeColor.Brand">
+        Tint
+    </FluentBadge>
+</div>
@@ -0,0 +1,17 @@
+<div class="sticker-row">
+    <FluentButton>
+        Default
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Primary">
+        Primary
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Outline">
+        Outline
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Subtle">
+        Subtle
+    </FluentButton>
+    <FluentButton Appearance="ButtonAppearance.Transparent">
+        Transparent
+    </FluentButton>
+</div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1,5 @@
+<div class="sticker-row">
+    <FluentCard Shadow="CardShadow.Default">
+        Hello! This is a card.
+    </FluentCard>
+</div>
@@ -0,0 +1,13 @@
+<div class="sticker-col">
+    <FluentCheckbox Margin="0" @bind-Value="@value1" Label="Checked" />
+    <FluentCheckbox Margin="0" @bind-Value="@value2" Disabled="true" Label="Disabled" />
+    <FluentCheckbox Margin="0" @bind-Value="@value3" Label="Unchecked" />
+    <FluentCheckbox Margin="0"  @bind-CheckState="value4" ShowIndeterminate="true" Label="Indeterminate" />
+</div>
+
+@code {
+    bool value1 = true;
+    bool value2 = true;
+    bool value3;
+    bool? value4;
+}
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1,12 @@
+<div class="sticker-col">
+    <FluentDivider />
+    <FluentDivider>
+        Text
+    </FluentDivider>
+    <FluentDivider Appearance="DividerAppearance.Brand">
+        Brand
+    </FluentDivider>
+    <FluentDivider Appearance="DividerAppearance.Subtle">
+        Subtle
+    </FluentDivider>
+</div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1,3 @@
+<div class="sticker-row">
+    <FluentTextInput Placeholder="Enter text" Label="Label" Message="Helper message" MessageCondition="@FluentFieldCondition.Always"></FluentTextInput>
+</div>
@@ -0,0 +1,26 @@
+@using System.ComponentModel.DataAnnotations
+
+<EditForm Model="@model" novalidate="true">
+    <DataAnnotationsValidator />
+    <FluentValidationSummary />
+
+    <FluentStack Orientation="Orientation.Vertical">
+        <div>
+            <FluentTextInput Name="identifier" @bind-Value="model.Identifier" Label="Identifier" Required="true" />
+        </div>
+
+        <FluentButton Type="ButtonType.Submit" Appearance="ButtonAppearance.Primary">Submit</FluentButton>
+    </FluentStack>
+</EditForm>
+
+@code {
+    private class Model
+    {
+        [Required]
+        [StringLength(10, MinimumLength = 3, ErrorMessage = "Identifier must be between 3 and 10 characters.")]
+        public string Identifier { get; set; } = string.Empty;
+    }
+
+    private Model model = new Model();
+
+}
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1 @@
+<div class="sticker-row"></div>
@@ -0,0 +1,17 @@
+---
+title: Sticker Sheet
+order: 0004
+category: 10|Get Started
+route: /sticker-sheet
+icon: Sticker
+---
+
+# Sticker Sheet
+
+All* the Fluent UI Blazor Components on one page! Overlay components like Dialog and Drawer render a trigger button; click it to open them.
+
+Many of the components have additional options that can greatly alter the way they look and behave. Use the navigation menu to go to each component's documentation page for more details.
+
+_* Components that require additional setup or context to function properly or that do not have a simple visual representation are not included in this sticker sheet._
+
+{{ StickerSheet sourcecode=false }}