Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Typography

Use MudText to present your design and content as clearly and efficiently as possible.

See Typography API for parameter documentation.

General

Mudblazors default font is Roboto and is not loaded automatically. The installation instructions include how to load the font. But in general the fastest and easiest way is to load it from Google Fonts as in the example below.

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.

BUTTON TEXT caption text OVERLINE TEXT
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.button">BUTTON TEXT</MudText>
<MudText Typo="Typo.caption">caption text</MudText>
<MudText Typo="Typo.overline">OVERLINE TEXT</MudText>

Alignment

Left Lorem ipsum dolor sit amet.

Right Lorem ipsum dolor sit amet.

Center Lorem ipsum dolor sit amet.

Justify Lorem ipsum dolor sit amet.

Inherit Lorem ipsum dolor sit amet.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudText Align="Align.Left"><b>Left</b> Lorem ipsum dolor sit amet.</MudText>
<MudText Align="Align.Right"><b>Right</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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙