BrandUI Text - PrimerBlazor

Basic Text

This is basic text.

<PrimerBrandText>
    This is basic text.
</PrimerBrandText>

Alignment, Size, Weight, Color

Center aligned bold text with muted color

<PrimerBrandText Size="BrandTextSize._400"
                    Weight="BrandTextWeight.Bold"
                    Color="BrandTextColor.Muted"
                    Align="BrandTextAlign.Center">
    Center aligned bold text with muted color
</PrimerBrandText>

Antialiased Text

This text is rendered with antialiasing.

<PrimerBrandText Antialiased="true">
    This text is rendered with antialiasing.
</PrimerBrandText>

Text Sizes

Size 700

Size 500

Size 300

Size 200

Size 100

<PrimerBrandText Size="BrandTextSize._700">Size 700</PrimerBrandText>
<PrimerBrandText Size="BrandTextSize._500">Size 500</PrimerBrandText>
<PrimerBrandText Size="BrandTextSize._300">Size 300</PrimerBrandText>
<PrimerBrandText Size="BrandTextSize._200">Size 200</PrimerBrandText>
<PrimerBrandText Size="BrandTextSize._100">Size 100</PrimerBrandText>

Combined Styling

Styled with size, weight, color, alignment, and antialiasing

<PrimerBrandText Size="BrandTextSize._600"
                    Weight="BrandTextWeight.Semibold"
                    Color="BrandTextColor.Default"
                    Align="BrandTextAlign.End"
                    Antialiased="true">
    Styled with size, weight, color, alignment, and antialiasing
</PrimerBrandText>

PrimerBrandText Options

Available parameters for the PrimerBrandText component

Name	Description	Default Value	CSS Class
ChildContent	The inner content to display	-	-
Size	Text size level	null	Text--{size}
Weight	Font weight	null	Text--weight-{value}
Color	Text color	null	Text--{color}
Font	Font family	null	Text-font--{font}
Align	Text alignment	null	Text-align--{align}
Antialiased	Enable antialiasing for smoother text	false	Text--antialiased
AdditionalClass	Additional custom class	""	-
ClassName	User-defined class	""	-
Style	Inline CSS style	""	-