GitHub

Text

Demonstration and configuration of the Radzen Blazor Text component.

RadzenText

Use the <RadzenText> component to format text in your application.

Radzen Heading 1

Radzen Heading 2

Radzen Heading 3

Radzen Heading 4

Radzen Heading 5
Radzen Heading 6
Radzen Subtitle 1
Radzen Subtitle 2

Radzen Body 1 Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

Radzen Body 2 Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

Radzen Button
Radzen Caption
Radzen Overline

TextStyle and TagName

You can use TextStyle together with TagName to apply different styling while keeping the code semantically correct.

This is a paragraph styled as H3

Display headings

Use display headings to emphasise a text or page title. Display headings are usually larger than traditional headings.

Radzen Display 1

Radzen Display 2

Radzen Display 3

Radzen Display 4

Radzen Display 5
Radzen Display 6

TextAlign

You can use TextAlign to vertically align your text.

TextAlign.Center
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.Left
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.Right
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.Start
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.End
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

TextAlign.Justify
Radzen Blazor Components are open source and free for commercial use. You can install them from nuget or build your own copy from source.

Text Functional Colors

These are the theme's text color CSS variables. Each theme has its own text color values assigned. Change the theme to preview them. You can use CSS variables in styles e.g. style="color: var(--rz-text-secondary-color);"

--rz-text-color
--rz-text-secondary-color
--rz-text-tertiary-color
--rz-text-disabled-color
--rz-text-contrast-color

Source Code licensed under MIT