starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

Demos: use semantically correct heading levels in examples

Browse Source 
Add explicit TagName to RadzenText usages that rendered real heading
elements (H1-H6, DisplayH1-H6, Subtitle1/2) purely for visual styling,
and convert raw HTML headings in examples to RadzenText with proper
TextStyle and TagName. Visual labels now render as <p>, genuine
headings use correct levels without skips (WCAG 1.3.1).

Fixes #2596
This commit is contained in:
Vladimir Enchev
2026-07-03 10:19:56 +03:00
parent 18190e7001
commit 3092e88626
84 changed files with 288 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
RadzenBlazorDemos/Pages/AIChatDateSeparator.razor
View File

@@ -14,7 +14,7 @@
<RadzenColumn Size="12" SizeLG="4">
<RadzenCard Variant="Variant.Outlined">
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenText TextStyle="TextStyle.Subtitle1">Date &amp; Time Options</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Date &amp; Time Options</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
<RadzenCheckBox @bind-Value="@showDateSeparator" TValue="bool" Name="showDateSeparator" />

6
RadzenBlazorDemos/Pages/AIChatModelSelection.razor
View File

@@ -17,7 +17,7 @@
<RadzenRow>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">AI Configuration</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">AI Configuration</RadzenText>
<RadzenStack Orientation="Orientation.Vertical" Gap="0.5rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
<RadzenLabel Style="white-space: nowrap;">Model:</RadzenLabel>
@@ -50,7 +50,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Current Configuration</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Current Configuration</RadzenText>
<RadzenStack Orientation="Orientation.Vertical" Gap="0.25rem">
<RadzenText TextStyle="TextStyle.Body2">
<strong>Model:</strong> @selectedModel
@@ -63,7 +63,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Available Models</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Available Models</RadzenText>
<RadzenStack Orientation="Orientation.Vertical">
@foreach (var model in availableModels)
{

16
RadzenBlazorDemos/Pages/AIChatWithMemory.razor
View File

@@ -17,14 +17,14 @@
<RadzenRow>
<RadzenColumn Size="12" SizeLG="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Memory Statistics</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Memory Statistics</RadzenText>
<RadzenRow>
<RadzenColumn Size="6">
<RadzenText TextStyle="TextStyle.H4">@activeSessionsCount</RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.P">@activeSessionsCount</RadzenText>
<RadzenText TextStyle="TextStyle.Caption">Active Sessions</RadzenText>
</RadzenColumn>
<RadzenColumn Size="6">
<RadzenText TextStyle="TextStyle.H4">@totalMessagesCount</RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.P">@totalMessagesCount</RadzenText>
<RadzenText TextStyle="TextStyle.Caption">Total Messages</RadzenText>
</RadzenColumn>
</RadzenRow>
@@ -32,7 +32,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Session Management</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Session Management</RadzenText>
<RadzenStack Orientation="Orientation.Vertical">
<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
<RadzenButton Text="New Session" Icon="add" ButtonStyle="ButtonStyle.Primary" Click="@OnNewSession" Variant="Variant.Flat" />
@@ -48,7 +48,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Session History</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Session History</RadzenText>
<RadzenStack Orientation="Orientation.Vertical">
<RadzenDropDown TValue="string" Data="@sessionIds" @bind-Value="@selectedSessionId" Placeholder="Select a session to load" Style="width: 100%;" />
<RadzenButton Text="Load Selected Session" Icon="folder_open" ButtonStyle="ButtonStyle.Base" Variant="Variant.Flat"
@@ -60,10 +60,10 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Memory Features</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Memory Features</RadzenText>
<RadzenRow>
<RadzenColumn Size="12" SizeMD="6">
<RadzenText TextStyle="TextStyle.H6">Conversation Memory</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Conversation Memory</RadzenText>
<ul>
<li>The AI remembers all previous messages in the conversation</li>
<li>Context is maintained across multiple questions</li>
@@ -72,7 +72,7 @@
</ul>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="6">
<RadzenText TextStyle="TextStyle.H6">Session Management</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Session Management</RadzenText>
<ul>
<li>Create new sessions for different conversations</li>
<li>Switch between different conversation contexts</li>

2
RadzenBlazorDemos/Pages/AppearanceTogglePage.razor
View File

@@ -22,7 +22,7 @@
<RadzenText Anchor="appearance-toggle#video-radzen-blazor-studio-config" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
RadzenAppearanceToggle in Radzen Blazor Studio
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-mb-6">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-mb-6">
Learn how to add and configure this built-in component
</RadzenText>
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">

2
RadzenBlazorDemos/Pages/ArcGaugeConfig.razor
View File

@@ -21,7 +21,7 @@
<RadzenArcGaugeScaleValue Value=@value ShowValue=@showValue>
<Template Context="pointer">
<RadzenStack AlignItems="AlignItems.Center" Gap="0" Style="margin-top: -50%;">
<RadzenText TextStyle="TextStyle.H5" class="rz-m-0"><strong>@pointer.Value</strong></RadzenText>
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.P" class="rz-m-0"><strong>@pointer.Value</strong></RadzenText>
<RadzenText TextStyle="TextStyle.Caption">km/h</RadzenText>
</RadzenStack>
</Template>

4
RadzenBlazorDemos/Pages/BarChartConfig.razor
View File

@@ -43,7 +43,7 @@
</RadzenCard>
<RadzenRow>
<RadzenColumn Size="12" SizeLG="6">
<h4>Auto-size bar series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Auto-size bar series</RadzenText>
<RadzenChart Animate="true" SeriesClick=@OnSeriesClick style="height: 400px">
<RadzenBarSeries FillMode="@fillMode" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" Position="@labelPosition" />
@@ -60,7 +60,7 @@
</RadzenChart>
</RadzenColumn>
<RadzenColumn Size="12" SizeLG="6">
<h4>Custom size bar series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Custom size bar series</RadzenText>
<RadzenChart Animate="true" SeriesClick=@OnSeriesClick style="height: 400px">
<RadzenBarSeries FillMode="FillMode.Gradient" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" Position="@labelPosition" />

2
RadzenBlazorDemos/Pages/CardConfig.razor
View File

@@ -15,7 +15,7 @@
</RadzenStack>
</RadzenStack>
<RadzenCard class="rz-background-color-primary-light rz-shadow-0 rz-border-radius-0 rz-p-8" style="margin: 1rem calc(-1 * var(--rz-card-padding));">
<RadzenText TextStyle="TextStyle.H6" class="rz-color-on-primary-light"><strong>Delivery Information</strong></RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-color-on-primary-light"><strong>Delivery Information</strong></RadzenText>
<RadzenRow RowGap="0">
<RadzenColumn SizeSM="4">
<RadzenText TextStyle="TextStyle.Overline" class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0">Country</RadzenText>

12
RadzenBlazorDemos/Pages/CardGroupConfig.razor
View File

@@ -17,8 +17,8 @@
<RadzenCard Variant="@variant">
<RadzenStack JustifyContent="JustifyContent.SpaceBetween" Gap="1rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.SpaceBetween">
<RadzenText TextStyle="TextStyle.H6">Team 1</RadzenText>
<RadzenText TextStyle="TextStyle.H2" class="rz-m-0">@($"{Math.Round(teamOneProgress)}%")</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Team 1</RadzenText>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.P" class="rz-m-0">@($"{Math.Round(teamOneProgress)}%")</RadzenText>
</RadzenStack>
<RadzenProgressBar @bind-Value=@teamOneProgress ShowValue="false" Style="--rz-progressbar-height: 1rem;"/>
</RadzenStack>
@@ -26,8 +26,8 @@
<RadzenCard Variant="@variant">
<RadzenStack JustifyContent="JustifyContent.SpaceBetween" Gap="1rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.SpaceBetween">
<RadzenText TextStyle="TextStyle.H6">Team 2</RadzenText>
<RadzenText TextStyle="TextStyle.H2" class="rz-m-0">@($"{Math.Round(teamTwoProgress)}%")</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Team 2</RadzenText>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.P" class="rz-m-0">@($"{Math.Round(teamTwoProgress)}%")</RadzenText>
</RadzenStack>
<RadzenProgressBar @bind-Value=@teamTwoProgress ShowValue="false" Style="--rz-progressbar-height: 1rem;"/>
</RadzenStack>
@@ -35,8 +35,8 @@
<RadzenCard Variant="@variant">
<RadzenStack JustifyContent="JustifyContent.SpaceBetween" Gap="1rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.SpaceBetween">
<RadzenText TextStyle="TextStyle.H6">Team 3</RadzenText>
<RadzenText TextStyle="TextStyle.H2" class="rz-m-0">@($"{Math.Round(teamThreeProgress)}%")</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Team 3</RadzenText>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.P" class="rz-m-0">@($"{Math.Round(teamThreeProgress)}%")</RadzenText>
</RadzenStack>
<RadzenProgressBar @bind-Value=@teamThreeProgress ShowValue="false" Style="--rz-progressbar-height: 1rem;"/>
</RadzenStack>

4
RadzenBlazorDemos/Pages/ChartCrosshair.razor
View File

@@ -4,7 +4,7 @@
<RadzenCard Variant="Variant.Outlined">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap" Gap="2rem">
<RadzenStack Gap="0.5rem">
<RadzenText TextStyle="TextStyle.Subtitle2">Category axis crosshair</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P">Category axis crosshair</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenCheckBox @bind-Value="@categoryVisible" Name="categoryVisible" />
<RadzenLabel Text="Visible" Component="categoryVisible" />
@@ -32,7 +32,7 @@
</RadzenStack>
<RadzenStack Gap="0.5rem">
<RadzenText TextStyle="TextStyle.Subtitle2">Value axis crosshair</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P">Value axis crosshair</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenCheckBox @bind-Value="@valueVisible" Name="valueVisible" />
<RadzenLabel Text="Visible" Component="valueVisible" />

2
RadzenBlazorDemos/Pages/ChartSeriesPage.razor
View File

@@ -2,7 +2,7 @@
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
Radzen Blazor Chart
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
The series is the heart of a chart - each one binds a set of data to a visual form like a line, bar, or pie. Most chart questions start here: how to bind data, combine series, and handle interaction.
</RadzenText>

10
RadzenBlazorDemos/Pages/ChatCompact.razor
View File

@@ -5,7 +5,7 @@
<RadzenRow Gap="1rem">
<RadzenColumn Size="12" SizeLG="6">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Compact Chat</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Compact Chat</RadzenText>
<RadzenChat Title="Team Chat"
CurrentUserId="@currentUserId"
Users="@users"
@@ -22,7 +22,7 @@
</RadzenColumn>
<RadzenColumn Size="12" SizeLG="6">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Minimal Chat</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Minimal Chat</RadzenText>
<RadzenChat Title=""
CurrentUserId="@currentUserId"
Users="@users"
@@ -38,10 +38,10 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Compact Chat Features</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Compact Chat Features</RadzenText>
<RadzenRow>
<RadzenColumn Size="12" SizeMD="6">
<RadzenText TextStyle="TextStyle.H6">Space-Saving Options</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Space-Saving Options</RadzenText>
<ul>
<li>Reduced height for sidebar implementations</li>
<li>Hide participant names to save vertical space</li>
@@ -50,7 +50,7 @@
</ul>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="6">
<RadzenText TextStyle="TextStyle.H6">Use Cases</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Use Cases</RadzenText>
<ul>
<li>Sidebar chat panels</li>
<li>Mobile-responsive layouts</li>

10
RadzenBlazorDemos/Pages/ChatCustomization.razor
View File

@@ -21,7 +21,7 @@
<RadzenRow>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Display Options</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Display Options</RadzenText>
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
<RadzenCheckBox @bind-Value="@showUsers" TValue="bool" Name="showUsers" />
@@ -47,7 +47,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Text Customization</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Text Customization</RadzenText>
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenStack Orientation="Orientation.Vertical" Gap="0.5rem">
<RadzenLabel Text="Placeholder Text" />
@@ -78,10 +78,10 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Customization Features</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Customization Features</RadzenText>
<RadzenRow>
<RadzenColumn Size="12" SizeMD="6">
<RadzenText TextStyle="TextStyle.H6">Display Controls</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Display Controls</RadzenText>
<ul>
<li><code>ShowUsers</code> - Toggle participant avatars in header</li>
<li><code>ShowUserNames</code> - Show/hide names above messages</li>
@@ -90,7 +90,7 @@
</ul>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="6">
<RadzenText TextStyle="TextStyle.H6">Text Customization</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Text Customization</RadzenText>
<ul>
<li><code>Placeholder</code> - Customize input field placeholder</li>
<li><code>EmptyMessage</code> - Set message when chat is empty</li>

2
RadzenBlazorDemos/Pages/ChatDateSeparator.razor
View File

@@ -17,7 +17,7 @@
<RadzenColumn Size="12" SizeLG="4">
<RadzenCard Variant="Variant.Outlined">
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenText TextStyle="TextStyle.Subtitle1">Date &amp; Time Options</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Date &amp; Time Options</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
<RadzenCheckBox @bind-Value="@showDateSeparator" TValue="bool" Name="showDateSeparator" />

10
RadzenBlazorDemos/Pages/ChatUsers.razor
View File

@@ -21,7 +21,7 @@
<RadzenRow>
<RadzenColumn Size="12" SizeLG="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">User Management</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">User Management</RadzenText>
<RadzenStack Orientation="Orientation.Vertical" Gap="0.5rem">
<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" Gap="0.5rem">
<RadzenButton Text="Add User" Icon="person_add" ButtonStyle="ButtonStyle.Primary" Click="@OnAddUser" Variant="Variant.Flat" />
@@ -37,7 +37,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">User List</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">User List</RadzenText>
<RadzenStack Orientation="Orientation.Vertical">
@foreach (var participant in users)
{
@@ -61,10 +61,10 @@
</RadzenColumn>
<RadzenColumn Size="12">
<RadzenCard Variant="Variant.Outlined">
<RadzenText TextStyle="TextStyle.Subtitle1">Multi-User Features</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Multi-User Features</RadzenText>
<RadzenRow>
<RadzenColumn Size="12" SizeMD="6">
<RadzenText TextStyle="TextStyle.H6">User Management</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">User Management</RadzenText>
<ul>
<li>Add and remove users dynamically</li>
<li>Each participant has a unique identity and avatar</li>
@@ -73,7 +73,7 @@
</ul>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="6">
<RadzenText TextStyle="TextStyle.H6">Message Features</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Message Features</RadzenText>
<ul>
<li>Messages are aligned based on sender (user vs users)</li>
<li>User names shown above messages</li>

2
RadzenBlazorDemos/Pages/ChipListEvents.razor
View File

@@ -11,7 +11,7 @@
Change="@OnChange"
ChipRemoved="@OnChipRemoved" />
<RadzenCard Variant="Variant.Outlined" class="rz-p-4">
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-mb-2">Event log</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-mb-2">Event log</RadzenText>
@if (events.Count == 0)
{
<RadzenText TextStyle="TextStyle.Body2" class="rz-text-secondary-color">No events yet.</RadzenText>

2
RadzenBlazorDemos/Pages/ColorPickerConfig.razor
View File

@@ -42,7 +42,7 @@
</svg>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="6" class="rz-text-align-center rz-text-align-md-start">
<RadzenText TextStyle="TextStyle.H6" class="rz-mt-4 rz-mt-md-12">Choose T-Shirt color</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-mt-4 rz-mt-md-12">Choose T-Shirt color</RadzenText>
<RadzenColorPicker @bind-Value=@color ShowHSV=@showHSV ShowRGBA=@showRGBA ShowColors=@showColors ShowButton=@showButton ShowArrow=@showArrow Change=@OnChange />
</RadzenColumn>
</RadzenRow>

10
RadzenBlazorDemos/Pages/ColorsPage.razor
View File

@@ -138,7 +138,7 @@
</RadzenText>
<RadzenRow>
<RadzenColumn Size="12" SizeMD="3">
<RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">Background-color</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mb-4">Background-color</RadzenText>
<div class="color-classes rz-shadow-2 rz-border-radius-2">
<div class="rz-background-color-white"><span class="rz-color-black">.rz-background-color-white</span></div>
<div class="rz-background-color-base-50"><span class="rz-color-black">.rz-background-color-base-50</span></div>
@@ -193,7 +193,7 @@
</div>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="3">
<RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">Color on white</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mb-4">Color on white</RadzenText>
<div class="color-classes rz-shadow-2 rz-border-radius-2 rz-background-color-white">
<div><span class="rz-color-white">.rz-color-white</span></div>
<div><span class="rz-color-base-50">.rz-color-base-50</span></div>
@@ -248,7 +248,7 @@
</div>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="3">
<RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">Color on black</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mb-4">Color on black</RadzenText>
<div class="color-classes rz-shadow-2 rz-border-radius-2 rz-background-color-black">
<div><span class="rz-color-white">.rz-color-white</span></div>
<div><span class="rz-color-base-50">.rz-color-base-50</span></div>
@@ -303,7 +303,7 @@
</div>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="3">
<RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">Border-color</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mb-4">Border-color</RadzenText>
<div class="border-color-classes">
<div class="rz-border-color-white"><span>.rz-border-color-white</span></div>
<div class="rz-border-color-base-50"><span>.rz-border-color-base-50</span></div>
@@ -363,7 +363,7 @@
<RadzenText Anchor="colors#video-theme-colors" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
Theme Colors in Radzen Blazor Studio
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">
Use Radzen Blazor Studio to theme your Blazor app with customizable colors, utility classes, and personalized palettes.
</RadzenText>
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">

6
RadzenBlazorDemos/Pages/ColumnChartConfig.razor
View File

@@ -43,7 +43,7 @@
</RadzenCard>
<RadzenRow>
<RadzenColumn Size="12">
<h4>Auto-size column series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Auto-size column series</RadzenText>
<RadzenChart Animate="true">
<RadzenColumnSeries FillMode="@fillMode" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" Position="@labelPosition" />
@@ -61,7 +61,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<h4>Custom size column series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Custom size column series</RadzenText>
<RadzenChart Animate="true">
<RadzenColumnSeries FillMode="FillMode.Gradient" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" Position="@labelPosition" />
@@ -79,7 +79,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<h4>Range fills column series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Range fills column series</RadzenText>
<RadzenChart Animate="true">
<RadzenColumnSeries FillMode="FillMode.Gradient" FillRange="@fillRange" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" Position="@labelPosition" />

28
RadzenBlazorDemos/Pages/Dashboard.razor
View File

@@ -7,17 +7,17 @@
<RadzenStack Gap="1rem" Style="position: relative">
<RadzenCard Visible=@fetchingData Style="z-index: 3; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5)">
<RadzenCard Visible=@(error == null) class="rz-my-12 rz-mx-auto rz-p-12" Style="width: 80%">
<RadzenText TextStyle="TextStyle.H6" class="rz-my-12">Fetching data from GitHub...</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1">Page @currentPage of @totalPages</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-my-12">Fetching data from GitHub...</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Page @currentPage of @totalPages</RadzenText>
<RadzenProgressBar Value=@currentPage Max=@totalPages ShowValue="false" Style="display: inline-block; width: 180px; margin-top: 16px" />
</RadzenCard>
<RadzenCard Visible=@(error != null) class="rz-my-12 rz-mx-auto rz-p-12" Style="width: 80%">
<RadzenText TextStyle="TextStyle.H6" class="rz-my-8">An error has occurred: @error. Try reloading your browser.</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-my-8">An error has occurred: @error. Try reloading your browser.</RadzenText>
</RadzenCard>
</RadzenCard>
<RadzenRow JustifyContent="JustifyContent.SpaceBetween" AlignItems="AlignItems.Center" class="rz-mb-4">
<RadzenColumn Size="12">
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">
Sample dashboard that uses data from the <RadzenLink Text="ASP.NET GitHub repository" Path="https://github.com/dotnet/aspnetcore/issues" target="_blank"/>. Data is updated every 24 hours.
</RadzenText>
</RadzenColumn>
@@ -30,8 +30,8 @@
<RadzenCard Variant="Variant.Outlined" Style="height: 100%;">
<RadzenStack JustifyContent="JustifyContent.SpaceBetween" Style="height: 100%;" >
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.SpaceBetween">
<RadzenText TextStyle="TextStyle.H6">Progress</RadzenText>
<RadzenText TextStyle="TextStyle.H2" class="rz-color-info rz-m-0">@($"{Math.Round(closeRatioPercentage)}%")</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H2">Progress</RadzenText>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.P" class="rz-color-info rz-m-0">@($"{Math.Round(closeRatioPercentage)}%")</RadzenText>
</RadzenStack>
<RadzenProgressBar ProgressBarStyle="ProgressBarStyle.Info" @bind-Value=@closeRatioPercentage ShowValue="false" Style="--rz-progressbar-background-color: var(--rz-info-lighter); --rz-progressbar-height: 1rem;"/>
</RadzenStack>
@@ -41,8 +41,8 @@
<RadzenCard Variant="Variant.Outlined" Style="height: 100%;">
<RadzenStack Gap="0">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.SpaceBetween">
<RadzenText TextStyle="TextStyle.H6">Open Issues</RadzenText>
<RadzenText TextStyle="TextStyle.H2" class="rz-color-success rz-m-0">@openIssues?.Count()</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H2">Open Issues</RadzenText>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.P" class="rz-color-success rz-m-0">@openIssues?.Count()</RadzenText>
</RadzenStack>
<RadzenSparkline Style="width: 100%; height: 80px;">
<RadzenColumnSeries FillMode="FillMode.Gradient" Data=@openIssuesByDate ValueProperty="Count" CategoryProperty="Week" Title="Issues" Fill="var(--rz-success)" />
@@ -56,8 +56,8 @@
<RadzenCard Variant="Variant.Outlined" Style="height: 100%;">
<RadzenStack Gap="0">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.SpaceBetween">
<RadzenText TextStyle="TextStyle.H6">Closed Issues</RadzenText>
<RadzenText TextStyle="TextStyle.H2" class="rz-color-danger rz-m-0">@closedIssues?.Count()</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H2">Closed Issues</RadzenText>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.P" class="rz-color-danger rz-m-0">@closedIssues?.Count()</RadzenText>
</RadzenStack>
<RadzenSparkline Style="width: 100%; height: 80px;">
<RadzenColumnSeries FillMode="FillMode.Gradient" Data=@closedIssuesByDate ValueProperty="Count" CategoryProperty="Week" Title="Issues" Fill="var(--rz-danger)" />
@@ -73,8 +73,8 @@
<RadzenCard Variant="Variant.Outlined" Style="height: 100%;">
<RadzenStack Style="height: 100%;" JustifyContent="JustifyContent.SpaceBetween">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" JustifyContent="JustifyContent.SpaceBetween">
<RadzenText TextStyle="TextStyle.H6">All Issues</RadzenText>
<RadzenText TextStyle="TextStyle.H2" class="rz-m-0">@issues?.Count()</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H2">All Issues</RadzenText>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.P" class="rz-m-0">@issues?.Count()</RadzenText>
</RadzenStack>
<RadzenChart Style="width: 100%; height: 80%;">
<RadzenAreaSeries FillMode="FillMode.Gradient" Data=@openIssuesByDate ValueProperty="Count" CategoryProperty="Week" Title="Open Issues" Smooth="true" Stroke="var(--rz-success)" Fill="var(--rz-success-lighter)">
@@ -109,9 +109,9 @@
<RadzenTabsItem Text="Most Active Member">
<div class="rz-text-align-center">
<img Style="width: 120px; border-radius: 50%; margin: 20px 0;" src=@mostActiveMember?.AvatarUrl alt="Most active member avatar" />
<h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.P">
@mostActiveMember?.Login
</h4>
</RadzenText>
</div>
</RadzenTabsItem>
</Tabs>

2
RadzenBlazorDemos/Pages/DataGridColumnTemplate.razor
View File

@@ -20,7 +20,7 @@
<RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
<RadzenImage Path="@order.Employee?.Photo" Style="width: 40px; height: 40px;" class="rz-border-radius-2" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-mb-0">@order.Employee?.FirstName @order.Employee?.LastName</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-mb-0">@order.Employee?.FirstName @order.Employee?.LastName</RadzenText>
<RadzenText TextStyle="TextStyle.Caption" class="rz-mb-0">@order.Customer?.CompanyName</RadzenText>
</RadzenStack>
</RadzenStack>

6
RadzenBlazorDemos/Pages/DataGridEmpty.razor
View File

@@ -1,6 +1,6 @@
@using RadzenBlazorDemos.Models.Northwind
<h3>Default Empty Text</h3>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H3">Default Empty Text</RadzenText>
<RadzenDataGrid Data="@data">
<Columns>
<RadzenDataGridColumn Property="@nameof(Employee.EmployeeID)" Title="ID" Width="50px" TextAlign="TextAlign.Center" />
@@ -19,7 +19,7 @@
</Columns>
</RadzenDataGrid>
<h3 class="rz-mt-6">Custom Empty Text</h3>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H3" class="rz-mt-6">Custom Empty Text</RadzenText>
<div class="rz-mb-6">
Custom text: <RadzenTextBox @bind-Value="emptyText" class="rz-ms-2" Style="width: 300px;" aria-label="custom text" />
</div>
@@ -41,7 +41,7 @@
</Columns>
</RadzenDataGrid>
<h3 class="rz-mt-6">Render Fragment as Empty Text</h3>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H3" class="rz-mt-6">Render Fragment as Empty Text</RadzenText>
<RadzenDataGrid Data="@data">
<EmptyTemplate>
<p style="color: lightgrey; font-size: 24px; text-align: center; margin: 2rem;">No records to display.</p>

2
RadzenBlazorDemos/Pages/DialogBusy.razor
View File

@@ -33,7 +33,7 @@
await DialogService.OpenAsync("", ds =>
@<RadzenStack AlignItems="AlignItems.Center" Gap="2rem" class="rz-p-12">
<RadzenImage Path="images/community.svg" Style="width: 200px;" AlternateText="community" />
<RadzenText TextStyle="TextStyle.H6">Loading, please wait...</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Loading, please wait...</RadzenText>
</RadzenStack>, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto", CloseDialogOnEsc = false });
}

6
RadzenBlazorDemos/Pages/DialogCardPage.razor
View File

@@ -11,7 +11,7 @@
<RadzenStack>
<RadzenRow>
<RadzenColumn Size="12" SizeMD="6" class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border)">
<RadzenText TextStyle="TextStyle.Subtitle1">Contact</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Contact</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
<RadzenImage Path="@order.Employee?.Photo" Style="width: 80px; height: 80px; border-radius: 50%" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
<RadzenStack Gap="0" class="rz-text-truncate">
@@ -23,7 +23,7 @@
</RadzenStack>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="6" class="rz-p-4 rz-border-radius-1" Style="border: var(--rz-grid-cell-border)">
<RadzenText TextStyle="TextStyle.Subtitle1">Delivery Information</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Delivery Information</RadzenText>
<RadzenStack Gap="0" class="rz-text-truncate">
<RadzenText TextStyle="TextStyle.Overline" class="rz-mt-2 rz-my-0" Style="color: var(--rz-text-tertiary-color);">Address</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-text-truncate"><b>@(order.ShipAddress), @(order.ShipCity), @(order.ShipCountry)</b></RadzenText>
@@ -33,7 +33,7 @@
</RadzenColumn>
</RadzenRow>
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="AlignItems.Center">
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Order @OrderID Details</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Order @OrderID Details</RadzenText>
<RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text=@($"{String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)}")/>
</RadzenStack>
<RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"

2
RadzenBlazorDemos/Pages/DialogSideContent.razor
View File

@@ -1,4 +1,4 @@
<h3>DialogSideContent</h3>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H3">DialogSideContent</RadzenText>
<p>
Side Dialog

2
RadzenBlazorDemos/Pages/DialogWithCascadingValueImplementation.razor
View File

@@ -25,7 +25,7 @@
_dialog.Title = null;
_dialog.Options.TitleContent = service => @<RadzenCard>
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
<RadzenText TextStyle="TextStyle.Subtitle1">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">
Title with a counter: @_counter
</RadzenText>
<RadzenRow>

8
RadzenBlazorDemos/Pages/DropZoneCanDropNoDropStyles.razor
View File

@@ -6,19 +6,19 @@
<ChildContent>
<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" Wrap="FlexWrap.Wrap" class="rz-p-12">
<RadzenDropZone Value="Status.NotStarted" class="rz-display-flex rz-flex-column rz-border-base-300 rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Not started" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Not started" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
<RadzenDropZone Value="Status.Started" class="rz-display-flex rz-flex-column rz-border-base-300 rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Started" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Started" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
<RadzenDropZone Value="Status.Completed" class="rz-display-flex rz-flex-column rz-border-base-300 rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Completed" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Completed" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
<RadzenDropZone Value="Status.Deleted" class="rz-display-flex rz-flex-column rz-border-danger-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Drop here to delete" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Drop here to delete" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
</RadzenStack>
</ChildContent>

8
RadzenBlazorDemos/Pages/DropZoneConfig.razor
View File

@@ -6,19 +6,19 @@
<ChildContent>
<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" Wrap="FlexWrap.Wrap" class="rz-p-12">
<RadzenDropZone Value="Status.NotStarted" class="rz-display-flex rz-flex-column rz-background-color-warning-lighter rz-border-warning-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Not started" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Not started" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
<RadzenDropZone Value="Status.Started" class="rz-display-flex rz-flex-column rz-background-color-info-lighter rz-border-info-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Started" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Started" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
<RadzenDropZone Value="Status.Completed" class="rz-display-flex rz-flex-column rz-background-color-success-lighter rz-border-success-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Completed" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Completed" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
<RadzenDropZone Value="Status.Deleted" class="rz-display-flex rz-flex-column rz-background-color-danger-lighter rz-border-danger-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Drop here to delete" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Drop here to delete" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
</RadzenStack>
</ChildContent>

8
RadzenBlazorDemos/Pages/DropZoneFooterTemplate.razor
View File

@@ -7,7 +7,7 @@
<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" Wrap="FlexWrap.Wrap" class="rz-p-12">
<RadzenDropZone Value="Status.NotStarted" class="rz-display-flex rz-flex-column rz-background-color-warning-lighter rz-border-warning-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<ChildContent>
<RadzenText Text="Not started" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Not started" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</ChildContent>
<Footer>
<div>
@@ -17,15 +17,15 @@
</RadzenDropZone>
<RadzenDropZone Value="Status.Started" class="rz-display-flex rz-flex-column rz-background-color-info-lighter rz-border-info-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Started" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Started" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
<RadzenDropZone Value="Status.Completed" class="rz-display-flex rz-flex-column rz-background-color-success-lighter rz-border-success-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Completed" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Completed" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
<RadzenDropZone Value="Status.Deleted" class="rz-display-flex rz-flex-column rz-background-color-danger-lighter rz-border-danger-light rz-border-radius-2 rz-p-4" Style="flex: 1; gap: 1rem;">
<RadzenText Text="Drop here to delete" TextStyle="TextStyle.Subtitle2" />
<RadzenText Text="Drop here to delete" TextStyle="TextStyle.Subtitle2" TagName="TagName.P" />
</RadzenDropZone>
</RadzenStack>
</ChildContent>

2
RadzenBlazorDemos/Pages/FieldsetConfig.razor
View File

@@ -33,7 +33,7 @@
<RadzenStack Orientation="Orientation.Horizontal">
<RadzenImage Path="@order.Employee?.Photo" Style="width: 80px; height: 80px; border-radius: 50%;" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
<RadzenStack Gap="0.25rem">
<h4 class="rz-mb-0">@(order.Employee?.FirstName + " " + order.Employee?.LastName)</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.P" class="rz-mb-0">@(order.Employee?.FirstName + " " + order.Employee?.LastName)</RadzenText>
<div>@order.ShipAddress</div>
<div style="font-size: .8em">@(order.ShipCity), @(order.ShipCountry)</div>
</RadzenStack>

2
RadzenBlazorDemos/Pages/FileInputConfig.razor
View File

@@ -5,7 +5,7 @@
<RadzenStack AlignItems="AlignItems.Center">
<RadzenCard class="rz-m-0 rz-m-md-12" Style="width: 100%; max-width: 600px;">
<RadzenText TextStyle="TextStyle.H4">Employee: <strong>@(firstEmployee.FirstName + " " + firstEmployee.LastName)</strong></RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.P">Employee: <strong>@(firstEmployee.FirstName + " " + firstEmployee.LastName)</strong></RadzenText>
<RadzenFileInput @bind-Value=@firstEmployee.Photo @bind-FileName=@fileName @bind-FileSize=@fileSize TValue="string" Style="width: 100%"
Change=@(args => OnChange(args, "FileInput")) Error=@(args => OnError(args, "FileInput")) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select file" }})"/>
</RadzenCard>

4
RadzenBlazorDemos/Pages/GanttTooltips.razor
View File

@@ -62,10 +62,10 @@
{
TooltipService.Open(args.Element, ts =>
@<RadzenStack Orientation="Orientation.Vertical" Gap="0" class="rz-p-2" Style="min-width: 250px; max-width: 500px;">
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-mb-2" Style="color: var(--rz-tooltip-color);">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-mb-2" Style="color: var(--rz-tooltip-color);">
@args.Data?.Name
</RadzenText>
<RadzenText TextStyle="TextStyle.H3" class="rz-mb-2" Style="color: var(--rz-tooltip-color);">
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.P" class="rz-mb-2" Style="color: var(--rz-tooltip-color);">
@($"{args.Data?.Progress ?? 0} %")
</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" Gap="4px">

2
RadzenBlazorDemos/Pages/HtmlEditorCustomDialog.razor
View File

@@ -11,7 +11,7 @@
<div style="width: 50%; padding: 16px; text-align: center;">
@if (!string.IsNullOrEmpty(Path.GetExtension(selectedFile)))
{
<h4>Preview</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Preview</RadzenText>
<RadzenImage Path=@(selectedFile) style="max-width: 100%" AlternateText="Selected image file preview" />
}
</div>

2
RadzenBlazorDemos/Pages/IconPage.razor
View File

@@ -90,7 +90,7 @@
<RadzenText Anchor="icon#video-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
How to Use RadzenIcon in Radzen Blazor Studio
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">
This video shows how to select icons visually, adjust colors and styles.
</RadzenText>
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">

52
RadzenBlazorDemos/Pages/Index.razor
View File

@@ -38,7 +38,7 @@
<RadzenColumn Size="8" SizeSM="5">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
<RadzenSidebarToggle Click="@(() => demoSidebarExpanded = !demoSidebarExpanded)" />
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">My Dashboard</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0" Style="color: inherit;">My Dashboard</RadzenText>
</RadzenStack>
</RadzenColumn>
<RadzenColumn Size="4" SizeSM="7">
@@ -91,7 +91,7 @@
<RadzenStack JustifyContent="JustifyContent.SpaceBetween" class="rz-h-100" Gap="0.5rem;">
<RadzenText TextStyle="TextStyle.Overline">Overdue</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.End" Gap="0.5rem">
<RadzenText TextStyle="TextStyle.DisplayH3" Style="line-height: 0.9; color: var(--rz-series-3)">@overdueTasks</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.P" Style="line-height: 0.9; color: var(--rz-series-3)">@overdueTasks</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-series-3)">need attention</RadzenText>
</RadzenStack>
@@ -104,7 +104,7 @@
<RadzenStack JustifyContent="JustifyContent.SpaceBetween" class="rz-h-100" Gap="0.5rem;">
<RadzenText TextStyle="TextStyle.Overline">Completed Today</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.End" Gap="0.5rem">
<RadzenText TextStyle="TextStyle.DisplayH3" Style="line-height: 0.9; color: var(--rz-series-1">@tasksCompletedToday</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.P" Style="line-height: 0.9; color: var(--rz-series-1">@tasksCompletedToday</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenIcon Icon="trending_up" Style="color: var(--rz-series-1)" />
<RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-series-1)">+3 from yesterday</RadzenText>
@@ -118,7 +118,7 @@
<RadzenStack JustifyContent="JustifyContent.SpaceBetween" class="rz-h-100" Gap="0.5rem;">
<RadzenText TextStyle="TextStyle.Overline">In Progress</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.End" Gap="0.5rem">
<RadzenText TextStyle="TextStyle.DisplayH3" Style="line-height: 0.9; color: var(--rz-series-2)">@tasksInProgress</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.P" Style="line-height: 0.9; color: var(--rz-series-2)">@tasksInProgress</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenText TextStyle="TextStyle.Body2" Style="color: var(--rz-series-2)">active tasks</RadzenText>
</RadzenStack>
@@ -131,7 +131,7 @@
<RadzenStack JustifyContent="JustifyContent.SpaceBetween" class="rz-h-100" Gap="0.5rem;">
<RadzenText TextStyle="TextStyle.Overline">Upcoming Deadlines</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.End" Gap="0.5rem">
<RadzenText TextStyle="TextStyle.DisplayH3" Style="line-height: 0.9;">@upcomingDeadlines</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.P" Style="line-height: 0.9;">@upcomingDeadlines</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenText TextStyle="TextStyle.Body2">next 7 days</RadzenText>
</RadzenStack>
@@ -274,7 +274,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="speed" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Built in C#/Razor" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Built in C#/Razor" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Implemented in C#/Razor with no wrappers around external JavaScript libraries or frameworks." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -283,7 +283,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="extension" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Open and flexible" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Open and flexible" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Open source under the MIT license and easy to extend. No vendor lock-in." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -292,7 +292,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="devices_other" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Responsive layouts" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Responsive layouts" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Adjusts automatically to any screen size or device." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -301,7 +301,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="accessibility_new" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Accessibility" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Accessibility" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Includes ARIA support and full keyboard navigation." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -310,7 +310,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="sync_alt" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="RTL" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="RTL" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Supports right-to-left layouts for multilingual apps." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -319,7 +319,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="verified" class="rz-text-tertiary-color rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Consistent quality" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Consistent quality" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Actively maintained and tested by the Radzen team." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -344,7 +344,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="palette" class="rz-color-series-1 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Premium Themes & Swatches" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Premium Themes & Swatches" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Ensure a consistent, polished look that matches your brand and supports accessibility." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -353,7 +353,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="brush" class="rz-color-series-1 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Theme Editor" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Theme Editor" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Customize colors, typography, and component properties visually. No manual CSS required." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -362,7 +362,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="widgets" class="rz-color-series-1 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Reusable UI Blocks" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Reusable UI Blocks" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Assemble pages quickly from ready-made layouts, forms, and dashboards." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -371,7 +371,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="dashboard_customize" class="rz-color-series-1 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Complete App Templates" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Complete App Templates" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Start faster with project templates that cover common business scenarios." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -380,7 +380,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="format_shapes" class="rz-color-series-2 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Visual Design-Time Experience" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Visual Design-Time Experience" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Design pages visually in your Visual Studio or the standalone Radzen Blazor Studio IDE." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -389,7 +389,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="assistant" class="rz-color-series-2 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Page & Layout Wizards" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Page & Layout Wizards" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Use guided wizards to build new pages and layouts quickly and consistently." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -398,7 +398,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="dns" class="rz-color-series-2 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="CRUD" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="CRUD" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Generate create, read, update, and delete pages from your data sources in minutes." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -407,7 +407,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="filter_alt" class="rz-color-series-2 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Query Builder" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Query Builder" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Sort and Filter your data when you bind it to components." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -416,7 +416,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="schema" class="rz-color-series-3 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Visual Method Editor" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Visual Method Editor" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Define and edit custom logic visually with a clean, intuitive interface." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -425,7 +425,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="bug_report" class="rz-color-series-3 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Debugging" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Debugging" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Run, test, and debug your applications without leaving the environment." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -434,7 +434,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="support" class="rz-color-series-3 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Dedicated Support" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Dedicated Support" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Get direct help from the Radzen team. Expert guidance when you need it most." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -443,7 +443,7 @@
<RadzenCard Variant="Variant.Outlined" class="rz-h-100">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="auto_fix_high" class="rz-color-series-3 rz-mb-2" Style="font-size: 32px; font-weight: 300" />
<RadzenText Text="Priority Fixes & Feature Requests" TextStyle="Radzen.Blazor.TextStyle.H6" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Priority Fixes & Feature Requests" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="TagName.P" Style="--rz-text-h6-font-weight: 600" />
<RadzenText Text="Subscribers receive priority handling for bug fixes and new feature requests." TextStyle="Radzen.Blazor.TextStyle.Body2" />
</RadzenStack>
</RadzenCard>
@@ -467,7 +467,7 @@
</RadzenText>
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
<RadzenStack Gap="0">
<RadzenText Text="Miguel Reis" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-secondary-color" />
<RadzenText Text="Miguel Reis" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="TagName.P" class="rz-m-0 rz-text-secondary-color" />
<RadzenText Text="R & D Project Manager at SIER Group" class="rz-m-0 rz-text-tertiary-color" />
</RadzenStack>
</RadzenStack>
@@ -488,7 +488,7 @@
</RadzenText>
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
<RadzenStack Gap="0">
<RadzenText Text="Carlos Carminati" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-secondary-color" />
<RadzenText Text="Carlos Carminati" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="TagName.P" class="rz-m-0 rz-text-secondary-color" />
<RadzenText Text="Solution Architect at Mine IT" class="rz-m-0 rz-text-tertiary-color" />
</RadzenStack>
</RadzenStack>
@@ -509,7 +509,7 @@
</RadzenText>
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
<RadzenStack Gap="0">
<RadzenText Text="Maximilian Rogl" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-secondary-color" />
<RadzenText Text="Maximilian Rogl" Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="TagName.P" class="rz-m-0 rz-text-secondary-color" />
<RadzenText Text="Chief Product Owner at adventics GmbH" class="rz-m-0 rz-text-tertiary-color" />
</RadzenStack>
</RadzenStack>

2
RadzenBlazorDemos/Pages/LinearGaugeRanges.razor
View File

@@ -17,7 +17,7 @@
<RadzenLinearGaugeScalePointer Value=@value ShowValue=@showValue Fill="var(--rz-secondary)">
<Template Context="pointer">
<RadzenStack AlignItems="AlignItems.Center" Gap="0">
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0"><strong>@pointer.Value</strong></RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0"><strong>@pointer.Value</strong></RadzenText>
<RadzenText TextStyle="TextStyle.Caption">km/h</RadzenText>
</RadzenStack>
</Template>

6
RadzenBlazorDemos/Pages/LocalizationLive.razor
View File

@@ -2,7 +2,7 @@
<RadzenStack Gap="1rem">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Wrap="FlexWrap.Wrap">
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-mb-0">Language</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-mb-0">Language</RadzenText>
<RadzenSelectBar @bind-Value="@culture" Data="@cultures" TextProperty="Name" ValueProperty="Culture" Size="ButtonSize.Small" />
</RadzenStack>
@@ -22,11 +22,11 @@
<RadzenStack Orientation="Orientation.Horizontal" Gap="2rem" Wrap="FlexWrap.Wrap" AlignItems="AlignItems.Start">
<RadzenStack Gap="0.5rem">
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-mb-0">DatePicker</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-mb-0">DatePicker</RadzenText>
<RadzenDatePicker @bind-Value="@date" Inline="true" ShowTime="true" />
</RadzenStack>
<RadzenStack Gap="0.5rem">
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-mb-0">Login</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-mb-0">Login</RadzenText>
<RadzenTemplateForm Data=@("Localization")>
<RadzenLogin AllowRegister="true" AllowResetPassword="true" AllowRememberMe="true" />
</RadzenTemplateForm>

2
RadzenBlazorDemos/Pages/LoginHorizontalExample.razor
View File

@@ -2,7 +2,7 @@
<RadzenColumn Size="12" SizeMD="6">
<RadzenCard class="rz-shadow-0 rz-border-radius-0 rz-text-align-center rz-p-12" Style="height: 100%; background: var(--rz-primary-light) no-repeat 100% 70% fixed url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwNCIgaGVpZ2h0PSIxNDU4IiB2aWV3Qm94PSIwIDAgMTIwNCAxNDU4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfNDkzXzEwMTM0KSI+CjxjaXJjbGUgY3g9IjcyMi4xMjgiIGN5PSI4MzkuMDIiIHI9IjQ4MS40MTkiIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF80OTNfMTAxMzQpIi8+CjwvZz4KPGcgb3BhY2l0eT0iMC41IiBmaWx0ZXI9InVybCgjZmlsdGVyMV9mXzQ5M18xMDEzNCkiPgo8Y2lyY2xlIGN4PSI0NzAuMzMzIiBjeT0iNTcwLjMzMyIgcj0iNDcwLjMzMyIgZmlsbD0idXJsKCNwYWludDFfcmFkaWFsXzQ5M18xMDEzNCkiLz4KPC9nPgo8ZyBvcGFjaXR5PSIwLjUiIGZpbHRlcj0idXJsKCNmaWx0ZXIyX2ZfNDkzXzEwMTM0KSI+CjxjaXJjbGUgY3g9IjY5MS41MTEiIGN5PSI1MjIuMjk3IiByPSIzMzEuNTAzIiBmaWxsPSJ1cmwoI3BhaW50Ml9yYWRpYWxfNDkzXzEwMTM0KSIvPgo8L2c+CjxnIG9wYWNpdHk9IjAuNSIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjNfZl80OTNfMTAxMzQpIj4KPGNpcmNsZSBjeD0iNjA4LjI0NCIgY3k9IjEwNzkuOTciIHI9IjMzMS41MDMiIHRyYW5zZm9ybT0icm90YXRlKC04MS4yMjQ0IDYwOC4yNDQgMTA3OS45NykiIGZpbGw9InVybCgjcGFpbnQzX3JhZGlhbF80OTNfMTAxMzQpIi8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl80OTNfMTAxMzQiIHg9IjE0MC43MDkiIHk9IjI1Ny42MDEiIHdpZHRoPSIxMTYyLjg0IiBoZWlnaHQ9IjExNjIuODQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjFfZl80OTNfMTAxMzQiIHg9Ii0xMDAiIHk9IjAiIHdpZHRoPSIxMTQwLjY3IiBoZWlnaHQ9IjExNDAuNjciIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjJfZl80OTNfMTAxMzQiIHg9IjI2MC4wMDgiIHk9IjkwLjc5MzkiIHdpZHRoPSI4NjMuMDA2IiBoZWlnaHQ9Ijg2My4wMDYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNTAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1cl80OTNfMTAxMzQiLz4KPC9maWx0ZXI+CjxmaWx0ZXIgaWQ9ImZpbHRlcjNfZl80OTNfMTAxMzQiIHg9IjE3Ni42OTQiIHk9IjY0OC40MjMiIHdpZHRoPSI4NjMuMSIgaGVpZ2h0PSI4NjMuMSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI1MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzQ5M18xMDEzNCIvPgo8L2ZpbHRlcj4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzQ5M18xMDEzNCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg3MjIuMTI4IDgzOS4wMikgcm90YXRlKDkwKSBzY2FsZSg0ODEuNDE5KSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRjFBNkMiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkYxQTZDIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDFfcmFkaWFsXzQ5M18xMDEzNCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg0NzAuMzMzIDU3MC4zMzMpIHJvdGF0ZSg5MCkgc2NhbGUoNDcwLjMzMykiPgo8c3RvcCBzdG9wLWNvbG9yPSIjM0FBQ0ZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzNBOTVGRiIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQyX3JhZGlhbF80OTNfMTAxMzQiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjkxLjUxMSA1MjIuMjk3KSByb3RhdGUoOTApIHNjYWxlKDMzMS41MDMpIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzQ4M0FGRiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ODNBRkYiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50M19yYWRpYWxfNDkzXzEwMTM0IiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwOC4yNDQgMTA3OS45Nykgcm90YXRlKDkwKSBzY2FsZSgzMzEuNTAzKSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkM4M0EiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkZDODNBIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K')">
<RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.H2" class="rz-color-white rz-mb-6">Welcome!</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-color-white">Join the world's largest community!</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-color-white">Join the world's largest community!</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-color-white">Let's get started with your <strong>30 days</strong> trial.</RadzenText>
</RadzenCard>
</RadzenColumn>

2
RadzenBlazorDemos/Pages/MediaQueryBasic.razor
View File

@@ -1,7 +1,7 @@
<RadzenCard class="rz-p-4">
<RadzenMediaQuery Query="(max-width: 768px)" Change=@OnChange />
<RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-mb-4">
Current viewport status:
</RadzenText>

2
RadzenBlazorDemos/Pages/MediaQueryMultipleBreakpoints.razor
View File

@@ -4,7 +4,7 @@
<RadzenMediaQuery Query="(min-width: 1025px)" Change=@(matches => OnBreakpointChange("lg", matches)) />
<RadzenCard class="rz-p-4">
<RadzenText TextStyle="TextStyle.H6" class="rz-mb-4">
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-mb-4">
Current Breakpoint: <strong>@currentBreakpoint</strong>
</RadzenText>

4
RadzenBlazorDemos/Pages/MediaQueryOrientation.razor
View File

@@ -4,7 +4,7 @@
@if (isPortrait)
{
<RadzenIcon Icon="stay_current_portrait" Style="font-size: 4rem; color: var(--rz-primary);" />
<RadzenText TextStyle="TextStyle.H5" class="rz-mt-4">
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.P" class="rz-mt-4">
Portrait Mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-mt-2">
@@ -14,7 +14,7 @@
else
{
<RadzenIcon Icon="stay_current_landscape" Style="font-size: 4rem; color: var(--rz-success);" />
<RadzenText TextStyle="TextStyle.H5" class="rz-mt-4">
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.P" class="rz-mt-4">
Landscape Mode
</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-mt-2">

4
RadzenBlazorDemos/Pages/MediaQueryResponsiveContent.razor
View File

@@ -4,7 +4,7 @@
@if (isMobile)
{
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenText TextStyle="TextStyle.H6">Mobile Navigation</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Mobile Navigation</RadzenText>
<RadzenButton Text="Home" Icon="home" Style="width: 100%" />
<RadzenButton Text="Products" Icon="shopping_cart" Style="width: 100%" />
<RadzenButton Text="About" Icon="info" Style="width: 100%" />
@@ -14,7 +14,7 @@
else
{
<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" AlignItems="AlignItems.Center">
<RadzenText TextStyle="TextStyle.H6">Desktop Navigation:</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Desktop Navigation:</RadzenText>
<RadzenButton Text="Home" Icon="home" />
<RadzenButton Text="Products" Icon="shopping_cart" />
<RadzenButton Text="About" Icon="info" />

2
RadzenBlazorDemos/Pages/NotFound.razor
View File

@@ -2,6 +2,6 @@
<RadzenText TextStyle="TextStyle.DisplayH1" TagName="TagName.H1" class="rz-my-12">
Page not found
</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH5" class="rz-my-12">
<RadzenText TextStyle="TextStyle.DisplayH5" TagName="TagName.P" class="rz-my-12">
Sorry, but there's nothing here!
</RadzenText>

2
RadzenBlazorDemos/Pages/NotificationCustomContent.razor
View File

@@ -12,7 +12,7 @@
{
Severity = NotificationSeverity.Warning,
Duration = 40000,
SummaryContent = ns =>@<RadzenText TextStyle="TextStyle.H6">Custom summary: <br /> @DateTime.Now</RadzenText>,
SummaryContent = ns =>@<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Custom summary: <br /> @DateTime.Now</RadzenText>,
DetailContent = ns => @<RadzenButton Text="Clear" Click="@(args => ns.Messages.Clear())" />
});
}

4
RadzenBlazorDemos/Pages/PanelConfig.razor
View File

@@ -23,7 +23,7 @@
<RadzenPanel AllowCollapse="true" class="rz-my-10 rz-mx-auto" Style="width: 700px;"
Expand=@(() => Change("Panel expanded")) Collapse=@(() => Change("Panel collapsed")) >
<HeaderTemplate>
<RadzenText TextStyle="TextStyle.H6" class="rz-display-flex rz-align-items-center rz-m-0">
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-display-flex rz-align-items-center rz-m-0">
<RadzenIcon Icon="account_box" class="rz-me-1" /><b>Orders</b>
</RadzenText>
</HeaderTemplate>
@@ -46,7 +46,7 @@
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem">
<RadzenImage Path="@order.Employee?.Photo" Style="width: 80px; height: 80px; border-radius: 50%" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.H6" class="rz-mb-0">@(order.Employee?.FirstName + " " + order.Employee?.LastName)</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-mb-0">@(order.Employee?.FirstName + " " + order.Employee?.LastName)</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">@order.ShipAddress</RadzenText>
<RadzenText TextStyle="TextStyle.Body2">@(order.ShipCity), @(order.ShipCountry)</RadzenText>
</RadzenStack>

8
RadzenBlazorDemos/Pages/PickListEmpty.razor
View File

@@ -3,7 +3,7 @@
@inherits DbContextPage
<h3>Default Empty Text</h3>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H3">Default Empty Text</RadzenText>
<RadzenPickList @bind-Source="@emptySource" @bind-Target="@emptyTarget" Style="height:300px; width:100%;"
TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)">
<SourceHeader>
@@ -14,7 +14,7 @@
</TargetHeader>
</RadzenPickList>
<h3 class="rz-mt-6">Custom Empty Text</h3>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H3" class="rz-mt-6">Custom Empty Text</RadzenText>
<RadzenPickList @bind-Source="@emptySource2" @bind-Target="@emptyTarget2" Style="height:300px; width:100%;"
TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)"
SourceEmptyText="No available customers" TargetEmptyText="No selected customers">
@@ -26,7 +26,7 @@
</TargetHeader>
</RadzenPickList>
<h3 class="rz-mt-6">Custom Empty Template</h3>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H3" class="rz-mt-6">Custom Empty Template</RadzenText>
<RadzenPickList @bind-Source="@emptySource3" @bind-Target="@emptyTarget3" Style="height:300px; width:100%;"
TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)">
<SourceHeader>
@@ -43,7 +43,7 @@
</TargetEmptyTemplate>
</RadzenPickList>
<h3 class="rz-mt-6">Empty Text with Data</h3>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.H3" class="rz-mt-6">Empty Text with Data</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
Move all items to see the empty message appear.
</RadzenText>

8
RadzenBlazorDemos/Pages/Playground.razor
View File

@@ -19,7 +19,7 @@
<RadzenStack class="rz-p-0 playground" Orientation="Orientation.Vertical" Gap="0" Style="height: 100%;">
<RadzenRow Gap="0.5rem" RowGap="0" class="rz-p-2 rz-ps-lg-4 rz-border-bottom" AlignItems="AlignItems.Center" Style="min-height: 48px;">
<RadzenColumn>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0" >
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0" >
Source Code
</RadzenText>
</RadzenColumn>
@@ -32,8 +32,8 @@
<RadzenColumn Size="12">
<RadzenAlert Visible=@(error != null) AlertStyle="AlertStyle.Danger" Variant="Variant.Flat" Shade="Shade.Lighter" Size="AlertSize.Small" class="rz-mb-2">@error</RadzenAlert>
<RadzenAlert Visible=@(saveSuccess) AlertStyle="AlertStyle.Success" Variant="Variant.Flat" Shade="Shade.Lighter" Size="AlertSize.Small" class="rz-mb-2">
<RadzenText TextStyle="TextStyle.Subtitle1">Snippet saved! Share this URL:</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2">@currentUrl</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Snippet saved! Share this URL:</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P">@currentUrl</RadzenText>
<RadzenButton Click="CopyUrl" Text="Copy" Icon="content_copy" ButtonStyle="ButtonStyle.Success" Size="ButtonSize.ExtraSmall" Variant="Variant.Flat" />
</RadzenAlert>
</RadzenColumn>
@@ -48,7 +48,7 @@
<RadzenStack class="rz-p-0 playground" Orientation="Orientation.Vertical" Gap="0" Style="height: 100%;">
<RadzenRow Gap="0.5rem" RowGap="0" class="rz-p-2 rz-ps-lg-4 rz-border-bottom" AlignItems="AlignItems.Center" Style="min-height: 48px;">
<RadzenColumn>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0" >
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0" >
Preview
</RadzenText>
</RadzenColumn>

2
RadzenBlazorDemos/Pages/PopupConfig.razor
View File

@@ -41,7 +41,7 @@
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem">
<RadzenImage Path="@order.Employee?.Photo" Style="width: 80px; height: 80px; border-radius: 50%" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.H6" class="rz-mb-0">@(order.Employee?.FirstName + " " + order.Employee?.LastName)</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-mb-0">@(order.Employee?.FirstName + " " + order.Employee?.LastName)</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">@order.ShipAddress</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-mb-0">@(order.ShipCity), @(order.ShipCountry)</RadzenText>
</RadzenStack>

2
RadzenBlazorDemos/Pages/RadialGaugeConfig.razor
View File

@@ -21,7 +21,7 @@
<RadzenRadialGaugeScalePointer Value=@value Length="0.6" ShowValue=@showValue>
<Template Context="pointer">
<RadzenStack AlignItems="AlignItems.Center" Gap="0" class="rz-mt-4">
<RadzenText TextStyle="TextStyle.H5" class="rz-m-0"><strong>@pointer.Value</strong></RadzenText>
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.P" class="rz-m-0"><strong>@pointer.Value</strong></RadzenText>
<RadzenText TextStyle="TextStyle.Caption">km/h</RadzenText>
</RadzenStack>
</Template>

2
RadzenBlazorDemos/Pages/RangeNavigatorCompact.razor
View File

@@ -3,7 +3,7 @@
<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
<RadzenCard Variant="Variant.Outlined">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem" Wrap="FlexWrap.Wrap">
<RadzenText TextStyle="TextStyle.Subtitle2" Style="margin: 0;">Selected: @GetDateLabel(start) — @GetDateLabel(end)</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" Style="margin: 0;">Selected: @GetDateLabel(start) — @GetDateLabel(end)</RadzenText>
<RadzenButton Text="Full Year" Click="@(() => { start = 0; end = 1; })" Variant="Variant.Outlined" Size="ButtonSize.Small" />
<RadzenButton Text="Q1" Click="@(() => { start = 0; end = 0.25; })" Variant="Variant.Outlined" Size="ButtonSize.Small" />
<RadzenButton Text="Q2" Click="@(() => { start = 0.25; end = 0.5; })" Variant="Variant.Outlined" Size="ButtonSize.Small" />

2
RadzenBlazorDemos/Pages/SankeyDiagramPage.razor
View File

@@ -3,7 +3,7 @@
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
Radzen Blazor Sankey Diagram
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
A Sankey diagram shows flow between stages as bands whose width is proportional to the amount - ideal for tracing where quantities move and split, like budgets, energy, or user journeys.
</RadzenText>

2
RadzenBlazorDemos/Pages/SchedulerTooltips.razor
View File

@@ -24,7 +24,7 @@
{
TooltipService.Open(args.Element, ts =>
@<RadzenStack Orientation="Orientation.Vertical" Gap="0" class="rz-p-6" Style="min-width: 250px; max-width: 500px;">
<RadzenText TextStyle="TextStyle.H4" class="rz-mb-4" Style="color: var(--rz-tooltip-color);">
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.P" class="rz-mb-4" Style="color: var(--rz-tooltip-color);">
@args.Data.Text
</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" Gap="4px">

6
RadzenBlazorDemos/Pages/SkeletonAnimations.razor
View File

@@ -3,7 +3,7 @@
<RadzenRow Gap="2rem" class="rz-p-12">
<RadzenColumn Size="12" SizeMD="4">
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenText TextStyle="TextStyle.H6">None (Default)</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">None (Default)</RadzenText>
<RadzenSkeleton Style="width: 100%;" />
<RadzenSkeleton Style="width: 100%;" />
<RadzenSkeleton Style="width: 60%;" />
@@ -11,7 +11,7 @@
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="4">
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenText TextStyle="TextStyle.H6">Wave Animation</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Wave Animation</RadzenText>
<RadzenSkeleton Animation="SkeletonAnimation.Wave" Style="width: 100%;" />
<RadzenSkeleton Animation="SkeletonAnimation.Wave" Style="width: 100%;" />
<RadzenSkeleton Animation="SkeletonAnimation.Wave" Style="width: 60%;" />
@@ -19,7 +19,7 @@
</RadzenColumn>
<RadzenColumn Size="6" SizeMD="4">
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenText TextStyle="TextStyle.H6">Pulse Animation</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Pulse Animation</RadzenText>
<RadzenSkeleton Animation="SkeletonAnimation.Pulse" Style="width: 100%;" />
<RadzenSkeleton Animation="SkeletonAnimation.Pulse" Style="width: 100%;" />
<RadzenSkeleton Animation="SkeletonAnimation.Pulse" Style="width: 60%;" />

6
RadzenBlazorDemos/Pages/SkeletonBasic.razor
View File

@@ -2,12 +2,12 @@
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" Gap="3rem" Wrap="FlexWrap.Wrap" class="rz-py-12 rz-px-6 rz-mx-auto" Style="max-width: 800px;">
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" Gap="1rem">
<RadzenText TextStyle="TextStyle.H6">Text (Default)</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Text (Default)</RadzenText>
<RadzenSkeleton /> <!-- Default Skeleton. Equivalent to Variant="SkeletonVariant.Text" -->
<RadzenSkeleton Style="height: 2rem;" />
</RadzenStack>
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" Gap="1rem">
<RadzenText TextStyle="TextStyle.H6">Circular</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Circular</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" >
<RadzenSkeleton Variant="SkeletonVariant.Circular" Style="width: 1rem; height: 1rem" />
<RadzenSkeleton Variant="SkeletonVariant.Circular" />
@@ -15,7 +15,7 @@
</RadzenStack>
</RadzenStack>
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center" Gap="1rem">
<RadzenText TextStyle="TextStyle.H6">Rectangular</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Rectangular</RadzenText>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
<RadzenSkeleton Variant="SkeletonVariant.Rectangular" />

2
RadzenBlazorDemos/Pages/SkeletonDataGrid.razor
View File

@@ -14,7 +14,7 @@
<div class="rz-p-12">
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
<RadzenText TextStyle="TextStyle.H6">DataGrid with Skeleton Loading</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">DataGrid with Skeleton Loading</RadzenText>
<RadzenButton Text="Toggle Loading" Click="@ToggleLoading" Style="margin-bottom: 20px;" />

6
RadzenBlazorDemos/Pages/SkeletonTextSize.razor
View File

@@ -1,13 +1,13 @@
@using Radzen
<RadzenStack Orientation="Orientation.Vertical" Gap="1rem" Wrap="FlexWrap.Wrap" class="rz-p-12">
<RadzenText TextStyle="TextStyle.H1">
<RadzenText TextStyle="TextStyle.H1" TagName="TagName.P">
<RadzenSkeleton Animation="SkeletonAnimation.Wave" /> Heading 1
</RadzenText>
<RadzenText TextStyle="TextStyle.H3">
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.P">
<RadzenSkeleton Animation="SkeletonAnimation.Wave" /> Heading 3
</RadzenText>
<RadzenText TextStyle="TextStyle.H5">
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.P">
<RadzenSkeleton Animation="SkeletonAnimation.Wave" /> Heading 5
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">

4
RadzenBlazorDemos/Pages/StackedBarChartConfig.razor
View File

@@ -12,7 +12,7 @@
<RadzenRow>
<RadzenColumn Size="12">
<h4>Auto-size stacked bar series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Auto-size stacked bar series</RadzenText>
<RadzenChart Animate="true" SeriesClick=@OnSeriesClick style="height: 400px">
<RadzenStackedBarSeries FillMode="FillMode.Gradient" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
@@ -29,7 +29,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<h4>Custom size stacked bar series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Custom size stacked bar series</RadzenText>
<RadzenChart Animate="true" SeriesClick=@OnSeriesClick style="height: 400px">
<RadzenStackedBarSeries FillMode="FillMode.Gradient" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue" />
<RadzenStackedBarSeries FillMode="FillMode.Gradient" Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue" />

4
RadzenBlazorDemos/Pages/StackedColumnChartConfig.razor
View File

@@ -10,7 +10,7 @@
<RadzenRow>
<RadzenColumn Size="12">
<h4>Auto-size stacked column series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Auto-size stacked column series</RadzenText>
<RadzenChart Animate="true">
<RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
@@ -27,7 +27,7 @@
</RadzenColumn>
<RadzenColumn Size="12">
<h4>Custom size stacked column series</h4>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.H3">Custom size stacked column series</RadzenText>
<RadzenChart Animate="true">
<RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2024" CategoryProperty="Quarter" Title="2024" LineType="LineType.Dashed" ValueProperty="Revenue" />
<RadzenStackedColumnSeries FillMode="FillMode.Gradient" Data="@revenue2023" CategoryProperty="Quarter" Title="2023" ValueProperty="Revenue" />

6
RadzenBlazorDemos/Pages/StepsTransitionConfig.razor
View File

@@ -9,7 +9,7 @@
<Steps>
<RadzenStepsItem Text="Personal Info">
<RadzenStack Gap="1rem" class="rz-p-4">
<RadzenText TextStyle="TextStyle.Subtitle1">Enter your personal information</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Enter your personal information</RadzenText>
<RadzenTextBox Placeholder="First name" />
<RadzenTextBox Placeholder="Last name" />
<RadzenTextBox Placeholder="Email" />
@@ -17,7 +17,7 @@
</RadzenStepsItem>
<RadzenStepsItem Text="Address">
<RadzenStack Gap="1rem" class="rz-p-4">
<RadzenText TextStyle="TextStyle.Subtitle1">Enter your address</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Enter your address</RadzenText>
<RadzenTextBox Placeholder="Street" />
<RadzenTextBox Placeholder="City" />
<RadzenTextBox Placeholder="Zip code" />
@@ -25,7 +25,7 @@
</RadzenStepsItem>
<RadzenStepsItem Text="Confirmation">
<RadzenStack Gap="1rem" class="rz-p-4">
<RadzenText TextStyle="TextStyle.Subtitle1">Review and confirm</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Review and confirm</RadzenText>
<RadzenText>Please review your information and click submit.</RadzenText>
</RadzenStack>
</RadzenStepsItem>

2
RadzenBlazorDemos/Pages/TabsPosition.razor
View File

@@ -30,7 +30,7 @@
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem">
<RadzenImage Path="@order.Employee?.Photo" class="rz-border-radius-10" Style="width: 80px; height: 80px;" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-mb-0"><strong>@(order.Employee?.FirstName + " " + order.Employee?.LastName)</strong></RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-mb-0"><strong>@(order.Employee?.FirstName + " " + order.Employee?.LastName)</strong></RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-mb-0">@order.ShipAddress</RadzenText>
<RadzenText TextStyle="TextStyle.Caption" class="rz-mb-0">@(order.ShipCity), @(order.ShipCountry)</RadzenText>
</RadzenStack>

12
RadzenBlazorDemos/Pages/TemplatesRepairShopPage.razor
View File

@@ -38,27 +38,27 @@
<RadzenText Text="Key Features" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Light and Dark Material 3 based custom color themes." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
<RadzenText Text="Light and Dark Material 3 based custom color themes." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Engaging Hero section – Eye-catching banner with a call-to-action for quick bookings." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
<RadzenText Text="Engaging Hero section – Eye-catching banner with a call-to-action for quick bookings." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Service Showcase – Clearly outlined auto repair services with icons and descriptions." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
<RadzenText Text="Service Showcase – Clearly outlined auto repair services with icons and descriptions." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Customer Reviews – Testimonial section to build trust and credibility." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
<RadzenText Text="Customer Reviews – Testimonial section to build trust and credibility." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Easy Appointment Booking – A sleek contact form for scheduling repairs." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
<RadzenText Text="Easy Appointment Booking – A sleek contact form for scheduling repairs." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="SEO-friendly & Mobile-optimized." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-m-0" />
<RadzenText Text="SEO-friendly & Mobile-optimized." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-m-0" />
</RadzenStack>
</RadzenStack>
</RadzenColumn>

14
RadzenBlazorDemos/Pages/TextDisplayHeadings.razor
View File

@@ -1,8 +1,8 @@
<div class="rz-p-12">
<RadzenText TextStyle="TextStyle.DisplayH1">Radzen Display 1</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH2">Radzen Display 2</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH3">Radzen Display 3</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH4">Radzen Display 4</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH5">Radzen Display 5</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH6">Radzen Display 6</RadzenText>
<div class="rz-p-12">
<RadzenText TextStyle="TextStyle.DisplayH1" TagName="TagName.P">Radzen Display 1</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH2" TagName="TagName.P">Radzen Display 2</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.P">Radzen Display 3</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH4" TagName="TagName.P">Radzen Display 4</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH5" TagName="TagName.P">Radzen Display 5</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH6" TagName="TagName.P">Radzen Display 6</RadzenText>
</div>

7
RadzenBlazorDemos/Pages/TextPage.razor
View File

@@ -23,6 +23,9 @@
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
You can use <code>TextStyle</code> together with <code>TagName</code> to apply different styling while keeping the code semantically correct.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
<code>TextStyle</code> controls only the visual style of the text, while <code>TagName</code> controls the HTML element that is rendered. Set <code>TagName</code> so that the document keeps a correct heading hierarchy as required by WCAG 1.3.1.
</RadzenText>
<RadzenExample Example="TextTagName">
<TextTagName />
</RadzenExample>
@@ -81,8 +84,8 @@
<RadzenText Anchor="typography#video-radzen-text" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
How Typography Works in Radzen Blazor Studio
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1">
Take full control of text styling in your Blazor applications using Radzen Blazor Studio.
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">
Take full control of text styling in your Blazor applications using Radzen Blazor Studio.
</RadzenText>
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">
<div class="embed-container">

18
RadzenBlazorDemos/Pages/TextStyles.razor
View File

@@ -1,12 +1,12 @@
<div class="rz-p-12">
<RadzenText TextStyle="TextStyle.H1">Radzen Heading 1</RadzenText>
<RadzenText TextStyle="TextStyle.H2">Radzen Heading 2</RadzenText>
<RadzenText TextStyle="TextStyle.H3">Radzen Heading 3</RadzenText>
<RadzenText TextStyle="TextStyle.H4">Radzen Heading 4</RadzenText>
<RadzenText TextStyle="TextStyle.H5">Radzen Heading 5</RadzenText>
<RadzenText TextStyle="TextStyle.H6">Radzen Heading 6</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1">Radzen Subtitle 1</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2">Radzen Subtitle 2</RadzenText>
<div class="rz-p-12">
<RadzenText TextStyle="TextStyle.H1" TagName="TagName.P">Radzen Heading 1</RadzenText>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.P">Radzen Heading 2</RadzenText>
<RadzenText TextStyle="TextStyle.H3" TagName="TagName.P">Radzen Heading 3</RadzenText>
<RadzenText TextStyle="TextStyle.H4" TagName="TagName.P">Radzen Heading 4</RadzenText>
<RadzenText TextStyle="TextStyle.H5" TagName="TagName.P">Radzen Heading 5</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P">Radzen Heading 6</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Radzen Subtitle 1</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P">Radzen Subtitle 2</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
<strong>Radzen Body 1</strong> Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.
</RadzenText>

2
RadzenBlazorDemos/Pages/ThemeServicePage.razor
View File

@@ -119,7 +119,7 @@ Register CookieThemeService in all <code>Program.cs</code> files of your applica
<RadzenText Anchor="theme-service#video-changing-themes-at-runtime" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
Changing themes at runtime in Radzen Blazor Studio
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-mb-6">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-mb-6">
Use Radzen ThemeService and a RadzenDropDown to change the app’s theme at runtime.
</RadzenText>
<RadzenCard Variant="Variant.Outlined" class="rz-p-7">

2
RadzenBlazorDemos/Pages/ThemesPage.razor
View File

@@ -186,7 +186,7 @@
<RadzenText Anchor="typography#text-tag-name" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
Customize themes in Radzen Blazor Studio
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">
The Appearance panel in Radzen Blazor Studio provides a comprehensive interface to easily customize the UI theme of your Blazor application in real time.
</RadzenText>
<RadzenLink Path="https://www.radzen.com/blazor-studio/documentation/appearance/edit-theme" target="_blank" class="rz-display-block rz-mb-6">

2
RadzenBlazorDemos/Pages/TileLayoutConfig.razor
View File

@@ -16,7 +16,7 @@
<RadzenTileLayoutItem @key=@tile.Id Title=@tile.Title Icon=@tile.Icon
@bind-Col=@tile.Col @bind-Row=@tile.Row
@bind-ColSpan=@tile.ColSpan @bind-RowSpan=@tile.RowSpan>
<RadzenText TextStyle="TextStyle.DisplayH4" class="rz-m-0">@tile.Value</RadzenText>
<RadzenText TextStyle="TextStyle.DisplayH4" TagName="TagName.P" class="rz-m-0">@tile.Value</RadzenText>
<RadzenText TextStyle="TextStyle.Caption">@tile.Col,@tile.Row · @tile.ColSpan×@tile.RowSpan</RadzenText>
</RadzenTileLayoutItem>
}

10
RadzenBlazorDemos/Pages/TimelineAlignItems.razor
View File

@@ -10,23 +10,23 @@
<Items>
<RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Warning">
<LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Warning" IsPill="true" Text="6th century BC" /></LabelContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" class="rz-m-0">Persian soldiers baked flatbreads with cheese and dates</RadzenText></ChildContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0">Persian soldiers baked flatbreads with cheese and dates</RadzenText></ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Danger">
<LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Danger" IsPill="true" Text="19 BC" /></LabelContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" class="rz-m-0">An early reference to a pizza-like food</RadzenText></ChildContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0">An early reference to a pizza-like food</RadzenText></ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Warning">
<LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Warning" IsPill="true" Text="997 AD" /></LabelContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" class="rz-m-0">The word pizza was first documented</RadzenText></ChildContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0">The word pizza was first documented</RadzenText></ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Danger">
<LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Danger" IsPill="true" Text="16th century" /></LabelContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" class="rz-m-0">A galette flatbread was referred to as a pizza in Naples</RadzenText></ChildContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0">A galette flatbread was referred to as a pizza in Naples</RadzenText></ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Warning">
<LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Warning" IsPill="true" Text="1843" /></LabelContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" class="rz-m-0">Alezandre Dumans described the diversity of pizza toppings</RadzenText></ChildContent>
<ChildContent><RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0">Alezandre Dumans described the diversity of pizza toppings</RadzenText></ChildContent>
</RadzenTimelineItem>
</Items>
</RadzenTimeline>

8
RadzenBlazorDemos/Pages/TimelineBasic.razor
View File

@@ -2,7 +2,7 @@
<Items>
<RadzenTimelineItem PointStyle="PointStyle.Primary">
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0">NOV 2022</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0">NOV 2022</RadzenText>
</LabelContent>
<ChildContent>
Celebrating the official release of Radzen Blazor Studio.
@@ -10,7 +10,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem>
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0">JAN 2021</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0">JAN 2021</RadzenText>
</LabelContent>
<ChildContent>
Radzen Blazor components open sourced under the MIT license.
@@ -18,7 +18,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem>
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0">JUN 2018</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0">JUN 2018</RadzenText>
</LabelContent>
<ChildContent>
Radzen 2.0 is a fact.
@@ -26,7 +26,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem>
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0">APR 2017</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0">APR 2017</RadzenText>
</LabelContent>
<ChildContent>
Radzen 1.0 is out the door - automatic page generation and MS SQL support.

8
RadzenBlazorDemos/Pages/TimelineOrientation.razor
View File

@@ -19,7 +19,7 @@
<Items>
<RadzenTimelineItem PointStyle="PointStyle.Primary">
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">NOV 2022</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0 rz-color-primary">NOV 2022</RadzenText>
</LabelContent>
<ChildContent>
Celebrating the official release of Radzen Blazor Studio.
@@ -27,7 +27,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem>
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">JAN 2021</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0 rz-color-primary">JAN 2021</RadzenText>
</LabelContent>
<ChildContent>
Radzen Blazor components open sourced under the MIT license.
@@ -35,7 +35,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem>
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">JUN 2018</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0 rz-color-primary">JUN 2018</RadzenText>
</LabelContent>
<ChildContent>
Radzen 2.0 is a fact.
@@ -43,7 +43,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem>
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0 rz-color-primary">APR 2017</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0 rz-color-primary">APR 2017</RadzenText>
</LabelContent>
<ChildContent>
Radzen 1.0 is out the door - automatic page generation and MS SQL support.

8
RadzenBlazorDemos/Pages/TimelinePointVariant.razor
View File

@@ -2,7 +2,7 @@
<Items>
<RadzenTimelineItem PointStyle="PointStyle.Primary" PointSize="PointSize.Large">
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0">Filled</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0">Filled</RadzenText>
</LabelContent>
<PointContent>
A
@@ -10,7 +10,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem PointStyle="PointStyle.Primary" PointSize="PointSize.Large" PointVariant="Variant.Flat">
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0">Flat</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0">Flat</RadzenText>
</LabelContent>
<PointContent>
B
@@ -18,7 +18,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem PointStyle="PointStyle.Primary" PointSize="PointSize.Large" PointVariant="Variant.Outlined">
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0">Outlined</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0">Outlined</RadzenText>
</LabelContent>
<PointContent>
C
@@ -26,7 +26,7 @@
</RadzenTimelineItem>
<RadzenTimelineItem PointStyle="PointStyle.Primary" PointSize="PointSize.Large" PointVariant="Variant.Text">
<LabelContent>
<RadzenText TextStyle="TextStyle.Subtitle2" class="rz-m-0">Text</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-m-0">Text</RadzenText>
</LabelContent>
<PointContent>
D

16
RadzenBlazorDemos/Pages/TimelineStyling.razor
View File

@@ -15,27 +15,27 @@
<RadzenTimelineItem PointVariant="Variant.Flat" PointSize="PointSize.Small" PointStyle="PointStyle.Info">
<PointContent><RadzenIcon Icon="check" /></PointContent>
<ChildContent>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Step 1</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Step 1</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-m-0">Register Your Account</RadzenText>
</ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem PointVariant="Variant.Flat" PointSize="PointSize.Small" PointStyle="PointStyle.Info">
<PointContent><RadzenIcon Icon="check" /></PointContent>
<ChildContent>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Step 2</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Step 2</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-m-0">Verify Your Identity</RadzenText>
</ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem PointVariant="Variant.Text" PointStyle="PointStyle.Info">
<PointContent><RadzenIcon Icon="more_horiz" /></PointContent>
<ChildContent>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Step 3</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Step 3</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-m-0">Complete Self-Certification</RadzenText>
</ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem PointVariant="Variant.Text" PointSize="PointSize.Small">
<ChildContent>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Step 4</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Step 4</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-m-0">Complete Your Profile</RadzenText>
</ChildContent>
</RadzenTimelineItem>
@@ -52,27 +52,27 @@
<RadzenTimelineItem PointVariant="Variant.Outlined" PointStyle="PointStyle.Info" PointShadow="0">
<PointContent><RadzenIcon Icon="how_to_reg" /></PointContent>
<ChildContent>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Step 1</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Step 1</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-m-0">Register Your Account</RadzenText>
</ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem PointVariant="Variant.Outlined" PointStyle="PointStyle.Info" PointShadow="0">
<PointContent><RadzenIcon Icon="fingerprint" /></PointContent>
<ChildContent>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Step 2</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Step 2</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-m-0">Verify Your Identity</RadzenText>
</ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem PointVariant="Variant.Outlined" PointSize="PointSize.Large" PointStyle="PointStyle.Info" PointShadow="0">
<PointContent><RadzenIcon Icon="workspace_premium" /></PointContent>
<ChildContent>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0 rz-color-info">Step 3</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0 rz-color-info">Step 3</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-m-0 rz-color-info">Complete Self-Certification</RadzenText>
</ChildContent>
</RadzenTimelineItem>
<RadzenTimelineItem PointVariant="Variant.Outlined" PointSize="PointSize.Small" PointStyle="PointStyle.Info" PointShadow="0">
<ChildContent>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-m-0">Step 4</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-m-0">Step 4</RadzenText>
<RadzenText TextStyle="TextStyle.Body2" class="rz-m-0">Complete Your Profile</RadzenText>
</ChildContent>
</RadzenTimelineItem>

2
RadzenBlazorDemos/Pages/TocConfig.razor
View File

@@ -50,7 +50,7 @@
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-8">
HTML heading content
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-py-12">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-12">
Copyright &copy; 2026 Radzen Ltd. All rights reserved.
</RadzenText>
</RadzenColumn>

2
RadzenBlazorDemos/Pages/TocOrientation.razor
View File

@@ -52,7 +52,7 @@
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-8">
HTML heading content
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-py-12">
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-py-12">
Copyright &copy; 2026 Radzen Ltd. All rights reserved.
</RadzenText>
</RadzenColumn>

10
RadzenBlazorDemos/Pages/UIBlocksCtaPage.razor
View File

@@ -22,7 +22,7 @@
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center" Gap="0" class="rz-my-6 rz-my-sm-12">
<RadzenText Text="CRUD Operations Simplified" TextStyle="Radzen.Blazor.TextStyle.Overline" TextAlign="Radzen.TextAlign.Center" class="rz-color-on-primary" Style="font-size: 1rem" />
<RadzenText Text="Effortless Development with Radzen" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-primary"/>
<RadzenText Text="Effortless Development with Radzen" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-primary"/>
<RadzenText Text="Exhausted by repetitive coding tasks? Radzen Blazor Studio streamlines your workflow with advanced data scaffolding, and efficient data management." TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-color-on-primary" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" Wrap="Radzen.FlexWrap.Wrap" class="rz-mt-12">
<RadzenLink Text="Download now" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-base rz-shade-lighter" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-cta" />
@@ -55,7 +55,7 @@
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Normal" Gap="0" class="rz-my-6 rz-my-sm-12">
<RadzenText Text="CRUD Operations Simplified" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary-light" />
<RadzenText Text="Effortless Development with Radzen" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" Style="max-width: 800px" class="rz-color-on-base-darker" />
<RadzenText Text="Effortless Development with Radzen" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" Style="max-width: 800px" class="rz-color-on-base-darker" />
<RadzenText Text="Exhausted by repetitive coding tasks? Radzen Blazor Studio streamlines your workflow with advanced data scaffolding, and efficient data management." TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-color-on-base-darker" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" Wrap="Radzen.FlexWrap.Wrap" class="rz-mt-12">
<RadzenLink Text="Download now" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-primary rz-shade-default" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-cta" />
@@ -88,7 +88,7 @@
<RadzenColumn Size="12" SizeMD="6" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Normal" Gap="0">
<RadzenText Text="Accelerate Your Success" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
<RadzenText Text="Accelerated, smarter, and cost-effective Blazor development" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" Style="max-width: 800px" class="rz-color-on-base-lighter" />
<RadzenText Text="Accelerated, smarter, and cost-effective Blazor development" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" Style="max-width: 800px" class="rz-color-on-base-lighter" />
</RadzenStack>
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="6" class="rz-p-6 rz-p-sm-12">
@@ -122,7 +122,7 @@
<RadzenColumn Size="12" SizeMD="6" class="rz-py-12 rz-px-6 rz-px-sm-12">
<RadzenStack Gap="0" class="rz-h-100" JustifyContent="Radzen.JustifyContent.Center">
<RadzenText Text="What's New" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary-light" />
<RadzenText Text="Cacti and Succulents" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" Style="max-width: 800px" class="rz-color-on-base-darker"/>
<RadzenText Text="Cacti and Succulents" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" Style="max-width: 800px" class="rz-color-on-base-darker"/>
<RadzenText Text="Cactus Coloring Book" TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-color-on-base-darker" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" Wrap="Radzen.FlexWrap.Wrap" class="rz-mt-12">
<RadzenLink Text="Get now" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-primary rz-shade-default" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-cta" />
@@ -158,7 +158,7 @@
<RadzenColumn Size="12" SizeMD="6" Order="2" OrderMD="1" class="rz-py-12 rz-px-6 rz-px-sm-12">
<RadzenStack Gap="0" class="rz-h-100" JustifyContent="Radzen.JustifyContent.Center">
<RadzenText Text="Yellow Clivia" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
<RadzenText Text="Clivia miniata var. citrina" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" Style="max-width: 800px" />
<RadzenText Text="Clivia miniata var. citrina" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" Style="max-width: 800px" />
<RadzenText Text="Easily grown in bright light and well-drained soils" TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-text-secondary-color" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="1rem" Wrap="Radzen.FlexWrap.Wrap" class="rz-mt-12">
<RadzenLink Text="Learn more" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-primary rz-shade-default" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-cta" />

8
RadzenBlazorDemos/Pages/UIBlocksFaqPage.razor
View File

@@ -19,7 +19,7 @@
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center" Gap="0" class="rz-my-6 rz-my-sm-12">
<RadzenText Text="Got Questions? " TextStyle="Radzen.Blazor.TextStyle.Overline" TextAlign="Radzen.TextAlign.Center" class="rz-color-primary" Style="font-size: 1rem" />
<RadzenText Text="We've Got Answers!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="" />
<RadzenText Text="We've Got Answers!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="" />
<RadzenText Text="Everything you need to know, all in one place." TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-text-secondary-color" />
</RadzenStack> <RadzenRow Gap="2rem" class="rz-my-6 rz-my-sm-12">
<RadzenColumn Size="12" SizeXS="6">
@@ -56,7 +56,7 @@
<RadzenColumn Size="12" SizeXS="4">
<RadzenStack Gap="0">
<RadzenText Text="Got Questions? " TextStyle="Radzen.Blazor.TextStyle.Overline" class="rz-color-primary" Style="font-size: 1rem" />
<RadzenText Text="We've Got Answers!" TextStyle="Radzen.Blazor.TextStyle.DisplayH4" Style="max-width: 800px" class="rz-m-0 rz-color-on-base-darker" />
<RadzenText Text="We've Got Answers!" TextStyle="Radzen.Blazor.TextStyle.DisplayH4" TagName="Radzen.Blazor.TagName.H2" Style="max-width: 800px" class="rz-m-0 rz-color-on-base-darker" />
<RadzenText Text="Everything you need to know, all in one place." TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-color-on-base-darker" />
</RadzenStack>
</RadzenColumn>
@@ -92,7 +92,7 @@
<RadzenColumn Size="12" SizeXS="4">
<RadzenStack Gap="0">
<RadzenText Text="Got Questions? " TextStyle="Radzen.Blazor.TextStyle.Overline" class="rz-color-on-primary" Style="font-size: 1rem" />
<RadzenText Text="We've Got Answers!" TextStyle="Radzen.Blazor.TextStyle.DisplayH4" Style="max-width: 800px" class="rz-m-0 rz-color-on-primary" />
<RadzenText Text="We've Got Answers!" TextStyle="Radzen.Blazor.TextStyle.DisplayH4" TagName="Radzen.Blazor.TagName.H2" Style="max-width: 800px" class="rz-m-0 rz-color-on-primary" />
<RadzenText Text="Everything you need to know, all in one place." TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-color-on-primary" />
</RadzenStack>
</RadzenColumn>
@@ -135,7 +135,7 @@
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center" Gap="0" class="rz-my-6 rz-my-sm-12">
<RadzenText Text="Got Questions? " TextStyle="Radzen.Blazor.TextStyle.Overline" TextAlign="Radzen.TextAlign.Center" class="rz-color-primary" Style="font-size: 1rem" />
<RadzenText Text="We've Got Answers!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-lighter" />
<RadzenText Text="We've Got Answers!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-lighter" />
<RadzenText Text="Everything you need to know, all in one place." TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-color-on-base-lighter" />
</RadzenStack>
<RadzenAccordion Multiple="true">

18
RadzenBlazorDemos/Pages/UIBlocksFeaturesPage.razor
View File

@@ -19,7 +19,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" class="rz-mb-4" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="tenancy" class="rz-color-primary" Style="font-size: 32px"></RadzenIcon>
<RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" class="rz-m-0" />
<RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" TagName="Radzen.Blazor.TagName.H3" class="rz-m-0" />
</RadzenStack>
<RadzenText Text="Integrate with databases, REST services, or migrate from existing systems? Radzen makes data integration a breeze." TextStyle="Radzen.Blazor.TextStyle.Body1" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ...">
@@ -28,7 +28,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" class="rz-mb-4" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="database" class="rz-color-primary" Style="font-size: 32px"></RadzenIcon>
<RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" class="rz-m-0" />
<RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" TagName="Radzen.Blazor.TagName.H3" class="rz-m-0" />
</RadzenStack>
<RadzenText Text="Create proof of concepts quickly by leveraging existing database schemas. Focus on delivering real value to end users." TextStyle="Radzen.Blazor.TextStyle.Body1" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ...">
@@ -37,7 +37,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" class="rz-mb-4" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="filter_alt" class="rz-color-primary" Style="font-size: 32px"></RadzenIcon>
<RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" class="rz-m-0" />
<RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.DisplayH5" TagName="Radzen.Blazor.TagName.H3" class="rz-m-0" />
</RadzenStack>
<RadzenText Text="Whether it's querying, or managing data, Radzen provides a direct approach that doesn't require you to dive deep into C# intricacies." TextStyle="Radzen.Blazor.TextStyle.Body1" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ...">
@@ -61,7 +61,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="tenancy" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-2 rz-mb-4" Style="font-size: 32px; min-width: 64px; min-height: 64px; font-weight: 300"></RadzenIcon>
<RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.H4" />
<RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="Integrate with databases, REST services, or migrate from existing systems? Radzen makes data integration a breeze." TextStyle="Radzen.Blazor.TextStyle.Body1" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
</RadzenStack>
@@ -69,7 +69,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="database" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-2 rz-mb-4" Style="font-size: 32px; min-width: 64px; min-height: 64px; font-weight: 300"></RadzenIcon>
<RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.H4" />
<RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="Create proof of concepts quickly by leveraging existing database schemas. Focus on delivering real value to end users." TextStyle="Radzen.Blazor.TextStyle.Body1" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
</RadzenStack>
@@ -77,7 +77,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Gap="0.5rem">
<RadzenIcon Icon="filter_alt" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-2 rz-mb-4" Style="font-size: 32px; min-width: 64px; min-height: 64px; font-weight: 300"></RadzenIcon>
<RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.H4" />
<RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="Whether it's querying, or managing data, Radzen provides a direct approach that doesn't require you to dive deep into C# intricacies." TextStyle="Radzen.Blazor.TextStyle.Body1" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
</RadzenStack>
@@ -100,7 +100,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Gap="0.75rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="tenancy" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10 rz-mb-6" Style="min-width: 80px; min-height: 80px; font-weight: 300; font-size: 40px"></RadzenIcon>
<RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.H3" TextAlign="Radzen.TextAlign.Center" />
<RadzenText Text="Seamless integration" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.H3" TextAlign="Radzen.TextAlign.Center" />
<RadzenText Text="Integrate with databases, REST services, or migrate from existing systems? Radzen makes data integration a breeze." TextStyle="Radzen.Blazor.TextStyle.Body1" TextAlign="Radzen.TextAlign.Center" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
</RadzenStack>
@@ -108,7 +108,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Gap="0.75rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="database" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10 rz-mb-6" Style="min-width: 80px; min-height: 80px; font-weight: 300; font-size: 40px"></RadzenIcon>
<RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.H3" TextAlign="Radzen.TextAlign.Center" />
<RadzenText Text="Rapid Prototyping" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.H3" TextAlign="Radzen.TextAlign.Center" />
<RadzenText Text="Create proof of concepts quickly by leveraging existing database schemas. Focus on delivering real value to end users." TextStyle="Radzen.Blazor.TextStyle.Body1" TextAlign="Radzen.TextAlign.Center" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
</RadzenStack>
@@ -116,7 +116,7 @@
<RadzenColumn Size="12" SizeXS="4" class="rz-p-6">
<RadzenStack Gap="0.75rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="filter_alt" class="rz-background-color-primary-light rz-color-on-primary-light rz-border-radius-10 rz-mb-6" Style="font-size: 40px; min-width: 80px; min-height: 80px; font-weight: 300"></RadzenIcon>
<RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.H3" TextAlign="Radzen.TextAlign.Center" />
<RadzenText Text="Common Procedures" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.H3" TextAlign="Radzen.TextAlign.Center" />
<RadzenText Text="Whether it's querying, or managing data, Radzen provides a direct approach that doesn't require you to dive deep into C# intricacies." TextStyle="Radzen.Blazor.TextStyle.Body1" TextAlign="Radzen.TextAlign.Center" />
<RadzenLink Path="/ui-blocks-features" Text="Learn more ..."></RadzenLink>
</RadzenStack>

10
RadzenBlazorDemos/Pages/UIBlocksFooterPage.razor
View File

@@ -23,14 +23,14 @@
<RadzenColumn Size="12" SizeXS="6" SizeLG="4">
<RadzenStack AlignItems="Radzen.AlignItems.Start">
<RadzenImage Path="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAAAWCAYAAABAHklQAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAjZSURBVHgB7Vz9VSM3EB/87v/4KoiugvgqiKjguApYKgAqOLkCjgowFWAqYKngfBXcpgOnAqLxjkAe/6SVFuPkkvze0zOrj1l9zJdGWo6oAM65qf/hZHxa++cVVWIfNP7HfxOeVwz1vMOp888d7QlC28jjyj+vaSQ0j1Pf1yS9oxyho6Oj86enJ+sfrSpmgkuf5rmJiGg09DLAGK1Pt77egjLw5db/3ICiS1+2zLQz/ucBFF37sq+q7p3/mVEaa0msNB5z741oNv7nCyjiRf480Jb796m0nc/ncZooixf+WMp47qxqsjMHES00F5dDYwZ9YByPERZZu3OfGuoZWqOlAt5J0LbUr8sM0O6E9ry0377eBfVrZUHxysvA0svAraY3oXTnvvkGLkGQO9z49GM+nyPmIp9/yuVCwxCG9enGv++HTHYOBqTzgTY20Q4t5jRRN6SZ0OOJvpM+N5THpwStE9GSOUwT7WyiPnpPwCMoO0VEZB1ONJ0SZTPQh2J43uF1/UH9XKfmyVLPOw8FvLMB1xMF8SDtEW1DPW9/E6HK0ZsxH/g/rwjLCWMmMvCg+WVH+ESYkAaDYMK6k0zD5y8oPXEahvrBzqgOdoCJT+ntYHy6SSkfgc2UNTQOXyrrk1iHTmXPEoKM6M/pQPB9uvK887WiiaWesc0AXeatb5RfkxjMV1cpZSf0iuWEAL9MFMETkdIasBu2iGiYETQYPNhiLRYBaiehY+mNIcrH0u772XrkFMMnGgebsX453IK8E0RfPXfUbzHeHGLxLupbbhj7LlUYbT9KjUEAu+Ztgt7dCHpb/DJRBK8SbVjzffTpg/yeUb8onD6rTeVDgsa1tOfEexHEDDyYWs3+eyLf0uvB+6vQ53jcGoiJtXBp6zFktXOotn4ebE3WKu807oMoDKPq3LpXBCFKIUobCR6/m+cu5p0O1Jtl3MSU4LVCD/HlKkOP59+A/GVEj/nlOtF+E794F578pvDUD96AisdA+lchL95EikQbQONSbe65TSuLqvdtjc+/rFjwjSUAfdyHy7l225vklTxrBcOCphfKqmdeGB5rzATM7AuqR2rMSfB8+sTMEAvuVPoZLBuyxgs6DCxh3vmo1oD//iB7N6vq8ti2XFbZZ5ldspuAilN5HfV86SgBMVINKLoGwnrh+qi+DhYaXr9nyycRSdTBlnAnOrcbDUIM37pEVI3J0K42ZjSUx3f1bLeI7rqcLe0JMh+6z1NVx9L2goejlVa1S1ltBP3OfVm/jfJLMNXC7TGsPwAUPPuaef8ZyJu6XZccKpQBAesy77Ugj+s6wrQWhPnvdCIVZoS1w4LqgAImt6nKYt1Q+W+UxxNtux564bQb2NFhod+/kt9HXa/C9bynbcGxrnLvJ/OtXaGZ9MGCJgcJtMj7Ee9cZ9p0hJla00FbgiRPFgApzNblPTU0jmfLZxIEO6oDmsDVQJsW5FnKgxcrnkCt8c7V+49oTxBFhc6GYmhtey+/rcpPMR0C19WLONb6aboN7SqwQ1o9NAfrgvd/B3nPijuhnNY17jqAAXn3A21aRCfs+dDg0cCScIkopRu+yTJUjmCoH1DMfOzytsCKs5COjSxuwaUP+x+jOsiLWElZuEGh930tDeNX6veV8ZhttPfrqCDsLXs/npN4i8B/ax44iNUTIOtfwheozvtaug5fDgjonFxWEKB6OasX5lyv+0vApZbgG8MU1Omo72MYEDPxGe26GUsaL3x3kTsxpXRoObYmVpVpTbtSdZjxL2gYU9mLtKo9CyPn1azXgraFTwveGK/nNZjS/vDLCLqGRl4IEKwL62z1Z5KpvM8Jocr3dFTWDrmesU8eNs6GxmFK+VsxDH0NSQedtKbVLsrUle3dTHifyg97vz+pECLAbabKIa0eAzHvofhvHyjpq9EZQfjWJZVzSGlKN3xojjpeokm43VLlMePb6DnskQztH9zHyzhqJmPVVoSF6yYkwhv2EyqECI4eN1u/juqQErCVe92eaAw6kGdoGGaA1qv5GqCaZiqoFoSvA2U1YXDK0LGUB2K8P6gAIOzfqCpL2i/4XS3JoS84QrGgzUz6FRIab5FbHCmyS/Deqm2CzN0KFF3T4dGBvGmB4kY8Gscq0PgMoMvblWNKX/5I0Q+YDbSxIK8LwteCwlJ3KAaK+gwddiPGqxGaFLPsY98S33B57+lx4ksHzuHQ8tiDfVPAaM+QcWkmGbOvRWPo6MCQuUSC0mTaGEp8RRDV6QiPp1G02pBoePyon6cuf2SE1qYN53xBo2vcZKKYLJwouKFhQb0N5JKpAUUtlSNVd0iDlWAtQY7ODdy4cemzslI0VAenni393ECK+zyjlNAxSwdcZsQHX1I8WYAF4UsW8NhHDFgDih7jgAvaAxhSn0KI0Fnqr1hxNPAiKmspLcQXisZV4gL2osZiZd65b5dzCGgx2Sofg3QG6la5+TJHf4eLWAvj+k95YIrqsQuPmBrxH19qbsC7EA8juow72YfPYto0cMFDlDBSFBdsTMKYmJZcFEcXvjtfvngXEW3d7vkPg4mFYEFHu5aKP7uIN+k8AVbVmUq9K8qfR61pXKTtXr1zMWSp3gDQfXbp63k8F7GrYoWxavrtqF+vKf1z8ZAr9OP9EDwLn3jt9eV+Qz3/cf6a8udxC0A/RZfRUH+XeNOeyoMxbEh4vbfmXYyJE8XIF8VT7Tc8PgFEV5SGSeQ/m1xhtvkIGowzN26ftlDP+3A5a2HV89BNClTWUAUcvi7208L1AazU2oVjH4SOeo8iR3dIqZtE/hrQ47zPI2gx5kFJTADRkohPjKXuiOtVSY0F2wzGlX0tvYOo35vkDhwqFzdcW5/VQLNHkDcmaJJyq35KiItZo1A6KvhXFSN4MtA+S9BrKf15UwpbR1MTQHQtE8CE2wwhLuNB6+/5Ah1HfZSQBTnFHMHN/DBW8KL3te4lYnVooCjnmPt+4ZJzMf5t1o8h8YEh/utIvjMt9ZYUT+batNQf5zDtVYZeSy/GqktU4/Vh3t45mvoL7FkLQPL5d7EAAAAASUVORK5CYII=" AlternateText="Company Logo" />
<RadzenText Text="It's easier than you think." TextStyle="Radzen.Blazor.TextStyle.H5" class="rz-text-tertiary-color" />
<RadzenText Text="It's easier than you think." TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color" />
</RadzenStack>
</RadzenColumn>
<RadzenColumn Size="12" SizeLG="8" SizeXL="6" OffsetXL="2">
<RadzenRow Gap="1rem" RowGap="3rem">
<RadzenColumn Size="12" SizeXS="6" SizeMD="3">
<RadzenStack AlignItems="Radzen.AlignItems.Start" Gap="1rem">
<RadzenText Text="Products" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" />
<RadzenText Text="Products" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="Radzen.Blazor.TagName.P" />
<RadzenLink Text="Product 1" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
<RadzenLink Text="Product 2" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
<RadzenLink Text="Product 3" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
@@ -39,7 +39,7 @@
</RadzenColumn>
<RadzenColumn Size="12" SizeXS="6" SizeMD="3">
<RadzenStack AlignItems="Radzen.AlignItems.Start" Gap="1rem">
<RadzenText Text="Solutions" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" />
<RadzenText Text="Solutions" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="Radzen.Blazor.TagName.P" />
<RadzenLink Text="Solution 1" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
<RadzenLink Text="Solution 2" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
<RadzenLink Text="Solution 3" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
@@ -49,7 +49,7 @@
</RadzenColumn>
<RadzenColumn Size="12" SizeXS="6" SizeMD="3">
<RadzenStack AlignItems="Radzen.AlignItems.Start" Gap="1rem">
<RadzenText Text="Company" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" />
<RadzenText Text="Company" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="Radzen.Blazor.TagName.P" />
<RadzenLink Text="About us" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
<RadzenLink Text="Blogs" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
<RadzenLink Text="Support" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
@@ -58,7 +58,7 @@
</RadzenColumn>
<RadzenColumn Size="12" SizeXS="6" SizeMD="3">
<RadzenStack AlignItems="Radzen.AlignItems.Start" Gap="1rem">
<RadzenText Text="Legal" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" />
<RadzenText Text="Legal" class="rz-color-on-base-darker" TextStyle="Radzen.Blazor.TextStyle.H6" TagName="Radzen.Blazor.TagName.P" />
<RadzenLink Text="Privacy policy" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
<RadzenLink Text="Terms of use" Path="/ui-blocks-footers" class="rz-text-tertiary-color"></RadzenLink>
</RadzenStack>

4
RadzenBlazorDemos/Pages/UIBlocksLogosPage.razor
View File

@@ -18,7 +18,7 @@
<RadzenRow RowGap="3rem" Gap="1rem" class="rz-w-100 rz-mx-auto rz-background-color-base-darker" >
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-my-6 rz-my-sm-12">
<RadzenText Text="Trusted by employees at top companies" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-darker" />
<RadzenText Text="Trusted by employees at top companies" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.P" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-darker" />
<RadzenText Text="Join the brands that rely on us for excellence" TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-color-on-base-darker" />
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-12 rz-mx-12" Orientation="Radzen.Orientation.Horizontal" Wrap="Radzen.FlexWrap.Wrap" JustifyContent="Radzen.JustifyContent.Center" Gap="3rem">
<RadzenImage Path="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAAAWCAYAAABAHklQAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAjZSURBVHgB7Vz9VSM3EB/87v/4KoiugvgqiKjguApYKgAqOLkCjgowFWAqYKngfBXcpgOnAqLxjkAe/6SVFuPkkvze0zOrj1l9zJdGWo6oAM65qf/hZHxa++cVVWIfNP7HfxOeVwz1vMOp888d7QlC28jjyj+vaSQ0j1Pf1yS9oxyho6Oj86enJ+sfrSpmgkuf5rmJiGg09DLAGK1Pt77egjLw5db/3ICiS1+2zLQz/ucBFF37sq+q7p3/mVEaa0msNB5z741oNv7nCyjiRf480Jb796m0nc/ncZooixf+WMp47qxqsjMHES00F5dDYwZ9YByPERZZu3OfGuoZWqOlAt5J0LbUr8sM0O6E9ry0377eBfVrZUHxysvA0svAraY3oXTnvvkGLkGQO9z49GM+nyPmIp9/yuVCwxCG9enGv++HTHYOBqTzgTY20Q4t5jRRN6SZ0OOJvpM+N5THpwStE9GSOUwT7WyiPnpPwCMoO0VEZB1ONJ0SZTPQh2J43uF1/UH9XKfmyVLPOw8FvLMB1xMF8SDtEW1DPW9/E6HK0ZsxH/g/rwjLCWMmMvCg+WVH+ESYkAaDYMK6k0zD5y8oPXEahvrBzqgOdoCJT+ntYHy6SSkfgc2UNTQOXyrrk1iHTmXPEoKM6M/pQPB9uvK887WiiaWesc0AXeatb5RfkxjMV1cpZSf0iuWEAL9MFMETkdIasBu2iGiYETQYPNhiLRYBaiehY+mNIcrH0u772XrkFMMnGgebsX453IK8E0RfPXfUbzHeHGLxLupbbhj7LlUYbT9KjUEAu+Ztgt7dCHpb/DJRBK8SbVjzffTpg/yeUb8onD6rTeVDgsa1tOfEexHEDDyYWs3+eyLf0uvB+6vQ53jcGoiJtXBp6zFktXOotn4ebE3WKu807oMoDKPq3LpXBCFKIUobCR6/m+cu5p0O1Jtl3MSU4LVCD/HlKkOP59+A/GVEj/nlOtF+E794F578pvDUD96AisdA+lchL95EikQbQONSbe65TSuLqvdtjc+/rFjwjSUAfdyHy7l225vklTxrBcOCphfKqmdeGB5rzATM7AuqR2rMSfB8+sTMEAvuVPoZLBuyxgs6DCxh3vmo1oD//iB7N6vq8ti2XFbZZ5ldspuAilN5HfV86SgBMVINKLoGwnrh+qi+DhYaXr9nyycRSdTBlnAnOrcbDUIM37pEVI3J0K42ZjSUx3f1bLeI7rqcLe0JMh+6z1NVx9L2goejlVa1S1ltBP3OfVm/jfJLMNXC7TGsPwAUPPuaef8ZyJu6XZccKpQBAesy77Ugj+s6wrQWhPnvdCIVZoS1w4LqgAImt6nKYt1Q+W+UxxNtux564bQb2NFhod+/kt9HXa/C9bynbcGxrnLvJ/OtXaGZ9MGCJgcJtMj7Ee9cZ9p0hJla00FbgiRPFgApzNblPTU0jmfLZxIEO6oDmsDVQJsW5FnKgxcrnkCt8c7V+49oTxBFhc6GYmhtey+/rcpPMR0C19WLONb6aboN7SqwQ1o9NAfrgvd/B3nPijuhnNY17jqAAXn3A21aRCfs+dDg0cCScIkopRu+yTJUjmCoH1DMfOzytsCKs5COjSxuwaUP+x+jOsiLWElZuEGh930tDeNX6veV8ZhttPfrqCDsLXs/npN4i8B/ax44iNUTIOtfwheozvtaug5fDgjonFxWEKB6OasX5lyv+0vApZbgG8MU1Omo72MYEDPxGe26GUsaL3x3kTsxpXRoObYmVpVpTbtSdZjxL2gYU9mLtKo9CyPn1azXgraFTwveGK/nNZjS/vDLCLqGRl4IEKwL62z1Z5KpvM8Jocr3dFTWDrmesU8eNs6GxmFK+VsxDH0NSQedtKbVLsrUle3dTHifyg97vz+pECLAbabKIa0eAzHvofhvHyjpq9EZQfjWJZVzSGlKN3xojjpeokm43VLlMePb6DnskQztH9zHyzhqJmPVVoSF6yYkwhv2EyqECI4eN1u/juqQErCVe92eaAw6kGdoGGaA1qv5GqCaZiqoFoSvA2U1YXDK0LGUB2K8P6gAIOzfqCpL2i/4XS3JoS84QrGgzUz6FRIab5FbHCmyS/Deqm2CzN0KFF3T4dGBvGmB4kY8Gscq0PgMoMvblWNKX/5I0Q+YDbSxIK8LwteCwlJ3KAaK+gwddiPGqxGaFLPsY98S33B57+lx4ksHzuHQ8tiDfVPAaM+QcWkmGbOvRWPo6MCQuUSC0mTaGEp8RRDV6QiPp1G02pBoePyon6cuf2SE1qYN53xBo2vcZKKYLJwouKFhQb0N5JKpAUUtlSNVd0iDlWAtQY7ODdy4cemzslI0VAenni393ECK+zyjlNAxSwdcZsQHX1I8WYAF4UsW8NhHDFgDih7jgAvaAxhSn0KI0Fnqr1hxNPAiKmspLcQXisZV4gL2osZiZd65b5dzCGgx2Sofg3QG6la5+TJHf4eLWAvj+k95YIrqsQuPmBrxH19qbsC7EA8juow72YfPYto0cMFDlDBSFBdsTMKYmJZcFEcXvjtfvngXEW3d7vkPg4mFYEFHu5aKP7uIN+k8AVbVmUq9K8qfR61pXKTtXr1zMWSp3gDQfXbp63k8F7GrYoWxavrtqF+vKf1z8ZAr9OP9EDwLn3jt9eV+Qz3/cf6a8udxC0A/RZfRUH+XeNOeyoMxbEh4vbfmXYyJE8XIF8VT7Tc8PgFEV5SGSeQ/m1xhtvkIGowzN26ftlDP+3A5a2HV89BNClTWUAUcvi7208L1AazU2oVjH4SOeo8iR3dIqZtE/hrQ47zPI2gx5kFJTADRkohPjKXuiOtVSY0F2wzGlX0tvYOo35vkDhwqFzdcW5/VQLNHkDcmaJJyq35KiItZo1A6KvhXFSN4MtA+S9BrKf15UwpbR1MTQHQtE8CE2wwhLuNB6+/5Ah1HfZSQBTnFHMHN/DBW8KL3te4lYnVooCjnmPt+4ZJzMf5t1o8h8YEh/utIvjMt9ZYUT+batNQf5zDtVYZeSy/GqktU4/Vh3t45mvoL7FkLQPL5d7EAAAAASUVORK5CYII=" AlternateText="Company Logo" Style="height: 20px;"></RadzenImage>
@@ -50,7 +50,7 @@
<RadzenTabsItem Text="Theme's default">
<RadzenRow RowGap="2rem" Gap="1rem" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Normal" class="rz-w-100 rz-mx-auto rz-p-6 rz-p-sm-12 rz-background-color-" >
<RadzenColumn Size="12" SizeLG="6">
<RadzenText Text="Trusted by employees at top companies" TextStyle="Radzen.Blazor.TextStyle.DisplayH4" Style="max-width: 800px" class="" />
<RadzenText Text="Trusted by employees at top companies" TextStyle="Radzen.Blazor.TextStyle.DisplayH4" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px" class="" />
<RadzenText Text="Join the brands that rely on us for excellence" TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-m-0 rz-text-secondary-color" />
</RadzenColumn>
<RadzenColumn Size="12" SizeLG="6">

4
RadzenBlazorDemos/Pages/UIBlocksNewsletterPage.razor
View File

@@ -19,7 +19,7 @@
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center" Gap="0" class="rz-my-6 rz-my-sm-12">
<RadzenText Text="Newsletter" TextStyle="Radzen.Blazor.TextStyle.Overline" TextAlign="Radzen.TextAlign.Center" class="rz-color-primary" Style="font-size: 1rem" />
<RadzenText Text="Stay in the Loop!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="" />
<RadzenText Text="Stay in the Loop!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="" />
<RadzenText Text="Subscribe to our newsletter for the latest updates, exclusive deals, and insider content—delivered straight to your inbox!" TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-text-secondary-color" />
<RadzenTemplateForm TItem="dynamic" class="rz-w-100">
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-8" Gap="0.5rem">
@@ -59,7 +59,7 @@
<RadzenColumn Size="12" SizeMD="6" Order="2" OrderMD="1" class="rz-py-12 rz-px-6 rz-px-sm-12">
<RadzenStack Gap="0" class="rz-h-100" JustifyContent="Radzen.JustifyContent.Center">
<RadzenText Text="Newsletter" TextStyle="Radzen.Blazor.TextStyle.Overline" Style="max-width: 800px; font-size: 1rem" class="rz-color-primary" />
<RadzenText Text="Stay in the Loop!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" Style="max-width: 800px" class="" />
<RadzenText Text="Stay in the Loop!" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" Style="max-width: 800px" class="" />
<RadzenText Text="Subscribe to our newsletter for the latest updates, exclusive deals, and insider content—delivered straight to your inbox!" TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-text-secondary-color" />
<RadzenStack Gap="1rem" class="rz-mt-6">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">

38
RadzenBlazorDemos/Pages/UIBlocksPricingPage.razor
View File

@@ -19,31 +19,31 @@
<RadzenRow class="rz-w-100 rz-mx-auto" Style="max-width: 1440px">
<RadzenColumn Size="12" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center" Gap="0" class="rz-my-6 rz-my-sm-12">
<RadzenText Text="Choose your plan" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" />
<RadzenText Text="Choose your plan" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" />
<RadzenText Text="Unlock endless possibilities" TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-text-secondary-color" />
<RadzenRow Gap="1rem" RowGap="1rem" AlignItems="Radzen.AlignItems.Center" class="rz-mt-12 rz-w-100 rz-w-md-75" >
<RadzenColumn Size="12" SizeSM="4" Style="height: fit-content; z-index: 1;">
<RadzenCard class="rz-pt-6" Style="flex: 1;">
<RadzenStack class="rz-p-6" Gap="0">
<RadzenText Text="Basic" TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="For personal use and exploration of the technology." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color" />
<RadzenText Text="For personal use and exploration of the technology." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center" class="rz-my-6" JustifyContent="Radzen.JustifyContent.Center">
<RadzenText Text="Free" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" class="rz-m-0" TagName="Radzen.Blazor.TagName.H4" />
<RadzenText Text="/ forever" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="/ forever" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
<RadzenLink Text="Get Started" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-primary rz-shade-lighter rz-my-3" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-pricing" />
<RadzenStack Gap="0.5rem" class="rz-mt-6">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="50 requests per day" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="50 requests per day" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Free trial feature access" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="Free trial feature access" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Limited API access" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="Limited API access" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
</RadzenStack>
</RadzenStack>
@@ -54,24 +54,24 @@
<RadzenStack class="rz-p-6 rz-py-12" Gap="0" Style="position: relative">
<RadzenBadge Text="Popular" Style="position: absolute; top: -1.25rem; padding: 8px 12px; left: 50%; width: 6rem; margin-left: -3rem" Shade="Radzen.Shade.Lighter" Variant="Radzen.Variant.Flat" BadgeStyle="Radzen.BadgeStyle.Danger"></RadzenBadge>
<RadzenText Text="Premium" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-color-primary" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="Perfect for professionals and small businesses." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color" />
<RadzenText Text="Perfect for professionals and small businesses." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center" class="rz-my-6" JustifyContent="Radzen.JustifyContent.Center">
<RadzenText Text="$79" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" class="rz-m-0" TagName="Radzen.Blazor.TagName.H4" />
<RadzenText Text="/ month" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="/ month" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
<RadzenLink Text="Get Started" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-primary rz-shade-default rz-my-3" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-pricing" />
<RadzenStack Gap="0.5rem" class="rz-mt-6">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Unlimited requests" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="Unlimited requests" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Full new feature access" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="Full new feature access" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Priority support" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="Priority support" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
</RadzenStack>
</RadzenStack>
@@ -81,7 +81,7 @@
<RadzenCard class="rz-pt-6" Style="flex: 1;">
<RadzenStack class="rz-p-6" Gap="0">
<RadzenText Text="Enterprise" TextStyle="Radzen.Blazor.TextStyle.H5" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="Ideal for large businesses and organizations." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color" />
<RadzenText Text="Ideal for large businesses and organizations." TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color" />
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center" class="rz-my-6" JustifyContent="Radzen.JustifyContent.Center">
<RadzenIcon Icon="alternate_email" Style="font-size: 48px"></RadzenIcon>
</RadzenStack>
@@ -89,15 +89,15 @@
<RadzenStack Gap="0.5rem" class="rz-mt-6">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Custom deployment" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="Custom deployment" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="On-Premises installation" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="On-Premises installation" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" Gap="0.5rem" AlignItems="Radzen.AlignItems.Center">
<RadzenIcon Icon="check_circle" IconStyle="Radzen.IconStyle.Primary"></RadzenIcon>
<RadzenText Text="Phone support" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" class="rz-text-tertiary-color rz-m-0" />
<RadzenText Text="Phone support" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" class="rz-text-tertiary-color rz-m-0" />
</RadzenStack>
</RadzenStack>
</RadzenStack>
@@ -123,7 +123,7 @@
<RadzenRow class="rz-w-100 rz-mx-auto" >
<RadzenColumn Size="12" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center" Gap="0" class="rz-my-6 rz-my-sm-12">
<RadzenText Text="Choose the Perfect Plan for You" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" />
<RadzenText Text="Choose the Perfect Plan for You" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" />
<RadzenText Text="Pick a plan that fits your needs—whether you're just starting out or ready to scale up!" TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.P" Style="max-width: 800px; line-height: 1.5" class="rz-text-secondary-color" />
<RadzenRow RowGap="1rem" Gap="0" class="rz-mt-12 rz-w-100 rz-w-md-75" AlignItems="Radzen.AlignItems.Center">
<RadzenColumn Size="12" SizeSM="4" Style="height: fit-content;">
@@ -131,7 +131,7 @@
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-p-6" Gap="1rem">
<RadzenText Text="Community" TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="Free" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.H4" />
<RadzenText Text="forever" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TextAlign="Radzen.TextAlign.Center" class="rz-text-tertiary-color" />
<RadzenText Text="forever" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" TextAlign="Radzen.TextAlign.Center" class="rz-text-tertiary-color" />
<RadzenLink Text="Download Now" class="rz-button rz-button-lg rz-variant-outlined rz-text-align-center rz-primary rz-shade-default" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-pricing" />
</RadzenStack>
</RadzenCard>
@@ -141,7 +141,7 @@
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-p-12" Gap="1rem">
<RadzenText Text="Professional" TextStyle="Radzen.Blazor.TextStyle.H4" TextAlign="Radzen.TextAlign.Center" class="rz-color-primary" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="$799" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" class="rz-color-on-base-light" TagName="Radzen.Blazor.TagName.H4" />
<RadzenText Text="annual subscription" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TextAlign="Radzen.TextAlign.Center" class="rz-color-on-base-light" />
<RadzenText Text="annual subscription" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" TextAlign="Radzen.TextAlign.Center" class="rz-color-on-base-light" />
<RadzenLink Text="Get Professional" class="rz-button rz-button-lg rz-variant-flat rz-text-align-center rz-primary rz-shade-default" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-pricing" />
</RadzenStack>
</RadzenCard>
@@ -151,7 +151,7 @@
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-p-6" Gap="1rem">
<RadzenText Text="Enterprise" TextStyle="Radzen.Blazor.TextStyle.H5" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.H3" />
<RadzenText Text="$1599" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" TagName="Radzen.Blazor.TagName.H4" />
<RadzenText Text="annual subscription" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TextAlign="Radzen.TextAlign.Center" class="rz-text-tertiary-color" />
<RadzenText Text="annual subscription" TextStyle="Radzen.Blazor.TextStyle.Subtitle2" TagName="Radzen.Blazor.TagName.P" TextAlign="Radzen.TextAlign.Center" class="rz-text-tertiary-color" />
<RadzenLink Text="Go Enterprise" class="rz-button rz-button-lg rz-variant-outlined rz-text-align-center rz-primary rz-shade-default" Style="--rz-link-hover-text-decoration: none" Path="/ui-blocks-pricing" />
</RadzenStack>
</RadzenCard>

20
RadzenBlazorDemos/Pages/UIBlocksTestimonialsPage.razor
View File

@@ -34,7 +34,7 @@
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
<RadzenImage Path="@order?.Employee?.Photo" Style="border-radius: 50%; width: 4rem; height: 4rem"></RadzenImage>
<RadzenStack Gap="0">
<RadzenText Text="Jessica M." Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-tertiary-color" />
<RadzenText Text="Jessica M." Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.P" class="rz-m-0 rz-text-tertiary-color" />
<RadzenText Text="Product Manager" class="rz-m-0 rz-text-disabled-color" />
</RadzenStack>
</RadzenStack>
@@ -55,7 +55,7 @@
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
<RadzenImage Path="@order?.Employee?.Photo" Style="border-radius: 50%; width: 4rem; height: 4rem"></RadzenImage>
<RadzenStack Gap="0">
<RadzenText Text="Linda R." Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-tertiary-color" />
<RadzenText Text="Linda R." Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.P" class="rz-m-0 rz-text-tertiary-color" />
<RadzenText Text="Product Manager" class="rz-m-0 rz-text-disabled-color" />
</RadzenStack>
</RadzenStack>
@@ -76,7 +76,7 @@
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
<RadzenImage Path="@order?.Employee?.Photo" Style="border-radius: 50%; width: 4rem; height: 4rem"></RadzenImage>
<RadzenStack Gap="0">
<RadzenText Text="Sophia L." Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-tertiary-color" />
<RadzenText Text="Sophia L." Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.P" class="rz-m-0 rz-text-tertiary-color" />
<RadzenText Text="Product Manager" class="rz-m-0 rz-text-disabled-color" />
</RadzenStack>
</RadzenStack>
@@ -103,7 +103,7 @@
<RadzenRow RowGap="3rem" Gap="1rem" class="rz-w-100 rz-mx-auto rz-background-color-base-darker" >
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center"class="rz-my-6 rz-my-sm-12" Gap="3rem">
<RadzenText Text="What Our Customers Say" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-darker" />
<RadzenText Text="What Our Customers Say" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-darker" />
<RadzenRow class="rz-w-100" Gap="3rem" RowGap="2rem">
<RadzenColumn Size="12" SizeSM="4">
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="Radzen.JustifyContent.SpaceBetween" Gap="0">
@@ -167,7 +167,7 @@
<RadzenRow RowGap="3rem" Gap="1rem" class="rz-w-100 rz-mx-auto rz-background-color-base-lighter" >
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center"class="rz-my-6 rz-my-sm-12" Gap="3rem">
<RadzenText Text="Rated by the best in the field" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-lighter" />
<RadzenText Text="Rated by the best in the field" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="rz-color-on-base-lighter" />
<RadzenRow class="rz-w-100" Gap="2rem" RowGap="2rem">
<RadzenColumn Size="12" SizeSM="4">
<RadzenCard Variant="Radzen.Variant.Outlined" class="rz-p-6 rz-p-sm-12 rz-w-100 rz-h-100">
@@ -238,7 +238,7 @@
<RadzenRow RowGap="3rem" Gap="1rem" class="rz-w-100 rz-mx-auto rz-background-color-">
<RadzenColumn Size="12" Style="height: fit-content" class="rz-p-6 rz-p-sm-12">
<RadzenStack AlignItems="Radzen.AlignItems.Center"class="rz-my-6 rz-my-sm-12" Gap="3rem">
<RadzenText Text="Rated by the best in the field" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="" />
<RadzenText Text="Rated by the best in the field" TextStyle="Radzen.Blazor.TextStyle.DisplayH3" TagName="Radzen.Blazor.TagName.H2" TextAlign="Radzen.TextAlign.Center" Style="max-width: 800px" class="" />
<RadzenCardGroup> <RadzenCard class="rz-p-6 rz-p-sm-12" Variant="Radzen.Variant.Outlined"> <RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="Radzen.JustifyContent.SpaceBetween" Gap="0">
<RadzenRating Disabled="false" ReadOnly="true" Value="5"></RadzenRating>
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="Radzen.JustifyContent.End" Gap="0.25rem">
@@ -302,17 +302,17 @@
<RadzenStack Style="margin-top: 60px" Gap="1rem">
<RadzenText Text="&ldquo;" TextStyle="Radzen.Blazor.TextStyle.DisplayH1" TagName="Radzen.Blazor.TagName.P" Style="line-height: 8px; font-weight: 700; font-family: Georgia, serif" class="rz-m-0 rz-color-on-primary" />
<RadzenText Text="I was blown away by the quality and service! From start to finish, the process was seamless, and the product exceeded my expectations. Highly recommend!" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.P" Style="line-height: 1.1em; font-weight: 600" class="rz-color-on-primary" />
<RadzenText Text="— Jessica M." TextStyle="Radzen.Blazor.TextStyle.H4" Style="font-weight: 600" class="rz-m-0 rz-color-on-primary" />
<RadzenText Text="— Jessica M." TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.P" Style="font-weight: 600" class="rz-m-0 rz-color-on-primary" />
</RadzenStack>
<RadzenStack Style="margin-top: 60px" Gap="1rem">
<RadzenText Text="&ldquo;" TextStyle="Radzen.Blazor.TextStyle.DisplayH1" TagName="Radzen.Blazor.TagName.P" Style="line-height: 8px; font-weight: 700; font-family: Georgia, serif" class="rz-m-0 rz-color-on-primary" />
<RadzenText Text="Absolutely fantastic experience! The team was super helpful, and the attention to detail was top-notch. Will definitely be coming back for more!" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.P" Style="font-weight: 600; line-height: 1.1em" class="rz-color-on-primary" />
<RadzenText Text="— Linda R." TextStyle="Radzen.Blazor.TextStyle.H4" Style="font-weight: 600" class="rz-m-0 rz-color-on-primary" />
<RadzenText Text="— Linda R." TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.P" Style="font-weight: 600" class="rz-m-0 rz-color-on-primary" />
</RadzenStack>
<RadzenStack Style="margin-top: 60px" Gap="1rem">
<RadzenText Text="&ldquo;" TextStyle="Radzen.Blazor.TextStyle.DisplayH1" TagName="Radzen.Blazor.TagName.P" Style="line-height: 8px; font-weight: 700; font-family: Georgia, serif" class="rz-m-0 rz-color-on-primary" />
<RadzenText Text="I couldn't be happier with my purchase. Great value for money, fast delivery, and outstanding customer support. 10/10!" TextStyle="Radzen.Blazor.TextStyle.H3" TagName="Radzen.Blazor.TagName.P" Style="font-weight: 600; line-height: 1.1em" class="rz-color-on-primary" />
<RadzenText Text="— Sophia L." TextStyle="Radzen.Blazor.TextStyle.H4" Style="font-weight: 600" class="rz-m-0 rz-color-on-primary" />
<RadzenText Text="— Sophia L." TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.P" Style="font-weight: 600" class="rz-m-0 rz-color-on-primary" />
</RadzenStack>
</RadzenStack>
</RadzenColumn>
@@ -343,7 +343,7 @@
<RadzenStack AlignItems="Radzen.AlignItems.Center" class="rz-mt-4" Gap="1rem" Orientation="Radzen.Orientation.Horizontal">
<RadzenImage Path="@order?.Employee?.Photo" Style="border-radius: 50%; width: 4rem; height: 4rem"></RadzenImage>
<RadzenStack Gap="0">
<RadzenText Text="Jessica M." Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" class="rz-m-0 rz-text-disabled-color" />
<RadzenText Text="Jessica M." Style="font-weight: 600" TextStyle="Radzen.Blazor.TextStyle.H4" TagName="Radzen.Blazor.TagName.P" class="rz-m-0 rz-text-disabled-color" />
<RadzenText Text="Product Manager" class="rz-m-0 rz-text-disabled-color" />
</RadzenStack>
</RadzenStack>

2
RadzenBlazorDemos/Shared/HomeLayout.razor
View File

@@ -52,7 +52,7 @@
{
<RadzenColumn Size="2" class="rz-display-none rz-display-md-block">
<div class="demos-right-nav">
<RadzenText Text="On this page" TextStyle="TextStyle.H6" class="rz-mt-lg-12 rz-mb-4" />
<RadzenText Text="On this page" TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-mt-lg-12 rz-mb-4" />
<RadzenToc Selector=".rz-body">
@foreach (var item in example.Toc)
{

2
RadzenBlazorDemos/Shared/MainLayout.razor
View File

@@ -102,7 +102,7 @@
{
<RadzenColumn Size="2" class="rz-display-none rz-display-md-block">
<div class="demos-right-nav">
<RadzenText Text="On this page" TextStyle="TextStyle.H6" class="rz-mt-lg-12 rz-mb-4" />
<RadzenText Text="On this page" TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-mt-lg-12 rz-mb-4" />
<RadzenToc Selector=".rz-body">
@foreach (var item in example.Toc)
{

14
RadzenBlazorDemos/Shared/MainTopNav.razor
View File

@@ -15,7 +15,7 @@
</div>
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Efficiency at its best –</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">CRUD Operations and Data Management</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0" Style="color: inherit;">CRUD Operations and Data Management</RadzenText>
</RadzenStack>
</RadzenStack>
</Template>
@@ -30,7 +30,7 @@
</div>
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Connect to your data –</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Seamless Integration</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0" Style="color: inherit;">Seamless Integration</RadzenText>
</RadzenStack>
</RadzenStack>
</Template>
@@ -45,7 +45,7 @@
</div>
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Say Hello to The Future –</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Digital Transformation and Modernization</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0" Style="color: inherit;">Digital Transformation and Modernization</RadzenText>
</RadzenStack>
</RadzenStack>
</Template>
@@ -60,7 +60,7 @@
</div>
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Promote Your Branding –</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Design Systems and Consistency</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0" Style="color: inherit;">Design Systems and Consistency</RadzenText>
</RadzenStack>
</RadzenStack>
</Template>
@@ -75,7 +75,7 @@
</div>
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Versatile Use Cases –</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">From Prototyping to Production</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0" Style="color: inherit;">From Prototyping to Production</RadzenText>
</RadzenStack>
</RadzenStack>
</Template>
@@ -90,7 +90,7 @@
</div>
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">Seize the Market Faster –</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Time to Market Reduced</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0" Style="color: inherit;">Time to Market Reduced</RadzenText>
</RadzenStack>
</RadzenStack>
</Template>
@@ -105,7 +105,7 @@
</div>
<RadzenStack Gap="0">
<RadzenText TextStyle="TextStyle.Overline" class="rz-display-none rz-display-sm-block" Style="color: inherit;">A Teaching Tool –</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-m-0" Style="color: inherit;">Empower the Next Generation</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.P" class="rz-m-0" Style="color: inherit;">Empower the Next Generation</RadzenText>
</RadzenStack>
</RadzenStack>
</Template>