General
MudBlazor's default font is Roboto which is not loaded automatically. The installation instructions include how to load the font, but generally the easiest way is to load it from Google Fonts, as in the example below.
The type of element that's created depends on the typo used and can be overridden with the HtmlTag property.
Use Inspect to compare how the text below is rendered.
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
input. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur caption text OVERLINE TEXTbutton typo but the element is h3
body2 typo but the element is strong<MudText Typo="Typo.h1">h1. Heading</MudText> <MudText Typo="Typo.h2">h2. Heading</MudText> <MudText Typo="Typo.h3">h3. Heading</MudText> <MudText Typo="Typo.h4">h4. Heading</MudText> <MudText Typo="Typo.h5">h5. Heading</MudText> <MudText Typo="Typo.h6">h6. Heading</MudText> <MudText Typo="Typo.subtitle1">subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</MudText> <MudText Typo="Typo.subtitle2">subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</MudText> <MudText Typo="Typo.body1">body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</MudText> <MudText Typo="Typo.body2">body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</MudText> <MudText Typo="Typo.input">input. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</MudText> <MudText Typo="Typo.button">BUTTON TEXT</MudText> <MudText Typo="Typo.caption">caption text</MudText> <MudText Typo="Typo.overline">OVERLINE TEXT</MudText> <MudText Typo="Typo.button" HtmlTag="h3">button typo but the element is h3</MudText> <MudText Typo="Typo.body2" HtmlTag="strong">body2 typo but the element is strong</MudText>
Alignment
This demonstrates the Align property.
Note: This will not work with an inline element like span.
Left Lorem ipsum dolor sit amet.
Start Lorem ipsum dolor sit amet.
Right Lorem ipsum dolor sit amet.
End Lorem ipsum dolor sit amet.
Center Lorem ipsum dolor sit amet.
Justify Lorem ipsum dolor sit amet.
Inherit Lorem ipsum dolor sit amet.
<MudText Align="Align.Left"><b>Left</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Start"><b>Start</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Right"><b>Right</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.End"><b>End</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Center"><b>Center</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Justify"><b>Justify</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Inherit"><b>Inherit</b> Lorem ipsum dolor sit amet.</MudText>
Inline
This demonstrates the Inline property.
The text after here is:
block.
<MudText>The text after here is: <MudText Inline="@_inline" Color="Color.Primary">@(_inline ? "inline." : "block.")</MudText></MudText> <MudSwitch @bind-Value="_inline" Color="Color.Primary" Label="Inline" />
@code { bool _inline; }