BlazorUI Demo

Text

Semantic typography without giving up ordinary Razor content.

Typography scale

Heading roles render the matching semantic heading element.

Heading two

Heading four

Subtitle text

Readable body text for ordinary content.

Supporting caption
View code 
<BuiStack Gap="2">
    <BuiText Typo="Typo.H2">Heading two</BuiText>
    <BuiText Typo="Typo.H4">Heading four</BuiText>
    <BuiText Typo="Typo.Subtitle1">Subtitle text</BuiText>
    <BuiText>Readable body text for ordinary content.</BuiText>
    <BuiText Typo="Typo.Caption" Color="Colors.Secondary">Supporting caption</BuiText>
</BuiStack>
Alignment and decoration

Centred and bold

Underlined primary text

Italic supporting copy

View code 
<BuiStack Gap="2">
    <BuiText Align="TextAlign.Center" Weight="FontWeight.Bold">Centred and bold</BuiText>
    <BuiText Decoration="TextDecoration.Underline" Color="Colors.Primary">Underlined primary text</BuiText>
    <BuiText Italic Color="Colors.Secondary">Italic supporting copy</BuiText>
</BuiStack>