Typography

Headings H tags

h1. Mudblazor heading

h2. Mudblazor heading

h3. Mudblazor heading

h4. Mudblazor heading

h5. Mudblazor heading
h6. Mudblazor heading
<MudText Typo="Typo.h1" Class="mb-3">h1. Mudblazor heading</MudText>
<MudText Typo="Typo.h2" Class="mb-3">h2. Mudblazor heading</MudText>
<MudText Typo="Typo.h3" Class="mb-3">h3. Mudblazor heading</MudText>
<MudText Typo="Typo.h4" Class="mb-3">h4. Mudblazor heading</MudText>
<MudText Typo="Typo.h5" Class="mb-3">h5. Mudblazor heading</MudText>
<MudText Typo="Typo.h6" Class="mb-3">h6. Mudblazor heading</MudText>

Inline text Elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<MudText Class="mb-4">You can use the mark tag to <mark>highlight</mark> text.</MudText>
<MudText Class="mb-4"><del>This line of text is meant to be treated as deleted text.</del></MudText>
<MudText Class="mb-4"><s>This line of text is meant to be treated as no longer
        accurate.</s> </MudText>
<MudText Class="mb-4"><ins>This line of text is meant to be treated as an addition to the
        document.</ins></MudText>
<MudText Class="mb-4"><u>This line of text will render as underlined.</u></MudText>
<MudText Class="mb-4"><small>This line of text is meant to be treated as fine
        print.</small>
</MudText>
<MudText Class="mb-4"><strong>This line rendered as bold text.</strong></MudText>
<MudText Class="mb-0"><em>This line rendered as italicized text.</em></MudText>

Customizing Headings

Fancy display heading With faded secondary text

<MudText Typo="Typo.h3" Class="mb-3">Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</MudText>

Lead Paragraph

This is a lead paragraph. It stands out from regular paragraphs.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. 

<MudText Class="fs-20 mb-0">
    <b>This is a lead paragraph. It stands out from regular paragraphs</b>.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
</MudText>

Font Sizes

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

<MudText class="fs-1 mb-2">.fs-1 text</MudText>
<MudText Class="fs-2 mb-2">.fs-2 text</MudText>
<MudText Class="fs-3 mb-2">.fs-3 text</MudText>
<MudText Class="fs-4 mb-2">.fs-4 text</MudText>
<MudText Class="fs-5 mb-2">.fs-5 text</MudText>
<MudText Class="fs-6 mb-0">.fs-6 text</MudText>
Blockquotes

Left Aligned

The greatest glory in living lies not in never falling, but in rising every time we fall.
Nelson Mandela
<figure class="blockquote-container">
    <blockquote class="blockquote mb-2">
        <MudText Typo="Typo.h6">The greatest glory in living lies not in never falling, but in rising every time we fall.</MudText>
    </blockquote>
    <figcaption class="blockquote-footer mt-0 mb-0 text-muted op-7"><cite title="Source Title">Nelson Mandela</cite>
    </figcaption>
</figure>

Right Aligned

The greatest glory in living lies not in never falling, but in rising every time we fall.
Nelson Mandela
<figure class="blockquote-container text-end">
    <blockquote class="blockquote mb-2">
        <MudText Typo="Typo.h6">The greatest glory in living lies not in never falling, but in rising every time we fall.</MudText>
    </blockquote>
    <figcaption class="blockquote-footer mt-0 mb-0 text-muted op-7"><cite title="Source Title">Nelson Mandela</cite>
    </figcaption>
</figure>
Custom Blockquotes

Primary Blockquote

The future belongs to those who believe in the beauty of their dreams..
Someone famous as -Eleanor Roosevelt
<blockquote class="blockquote custom-blockquote primary mb-0 text-center">
    <MudText Typo="Typo.h6">The future belongs to those who believe in the beauty of their dreams..</MudText>
    <footer class="blockquote-footer mt-3 fs-14 text-muted op-7 mb-0">Someone famous as <cite title="Source Title">-Eleanor Roosevelt</cite></footer>
    <span class="quote-icon"><i class="ri-information-line"></i></span>
</blockquote>

Secondary Blockquote

The future belongs to those who believe in the beauty of their dreams..
Someone famous as -Eleanor Roosevelt
<blockquote class="blockquote custom-blockquote secondary mb-0 text-center">
    <MudText Typo="Typo.h6">The future belongs to those who believe in the beauty of their dreams..</MudText>
    <footer class="blockquote-footer mt-3 fs-14 text-muted op-7 mb-0">Someone famous as <cite title="Source Title">-Eleanor Roosevelt</cite></footer>
    <span class="quote-icon"><i class="ri-information-line"></i></span>
</blockquote>

Warning Blockquote

The future belongs to those who believe in the beauty of their dreams..
Someone famous as -Eleanor Roosevelt
<blockquote class="blockquote custom-blockquote warning mb-0 text-center">
    <MudText Typo="Typo.h6">The future belongs to those who believe in the beauty of their dreams..</MudText>
    <footer class="blockquote-footer mt-3 fs-14 text-muted op-7 mb-0">Someone famous as <cite title="Source Title">-Eleanor Roosevelt</cite></footer>
    <span class="quote-icon"><i class="ri-information-line"></i></span>
</blockquote>

Success Blockquote

The future belongs to those who believe in the beauty of their dreams..
Someone famous as -Eleanor Roosevelt
<blockquote class="blockquote custom-blockquote success mb-0 text-center">
    <MudText Typo="Typo.h6">The future belongs to those who believe in the beauty of their dreams..</MudText>
    <footer class="blockquote-footer mt-3 fs-14 text-muted op-7 mb-0">Someone famous as <cite title="Source Title">-Eleanor Roosevelt</cite></footer>
    <span class="quote-icon"><i class="ri-information-line"></i></span>
</blockquote>

Info Blockquote

The future belongs to those who believe in the beauty of their dreams..
Someone famous as -Eleanor Roosevelt
<blockquote class="blockquote custom-blockquote info mb-0 text-center">
    <MudText Typo="Typo.h6">The future belongs to those who believe in the beauty of their dreams..</MudText>
    <footer class="blockquote-footer mt-3 fs-14 text-muted op-7 mb-0">Someone famous as <cite title="Source Title">-Eleanor Roosevelt</cite></footer>
    <span class="quote-icon"><i class="ri-information-line"></i></span>
</blockquote>

Danger Blockquote

The future belongs to those who believe in the beauty of their dreams..
Someone famous as -Eleanor Roosevelt
<blockquote class="blockquote custom-blockquote danger mb-0 text-center">
    <MudText Typo="Typo.h6">The future belongs to those who believe in the beauty of their dreams..</MudText>
    <footer class="blockquote-footer mt-3 fs-14 text-muted op-7 mb-0">Someone famous as <cite title="Source Title">-Eleanor Roosevelt</cite></footer>
    <span class="quote-icon"><i class="ri-information-line"></i></span>
</blockquote>

Description List Alignment

Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.
<MudGrid Class="mb-0">
<MudItem xs="3" Class="fw-bold">Description lists</MudItem>
<MudItem xs="9">A description list is perfect for defining terms.</MudItem>

<MudItem xs="3" Class="fw-bold">Term</MudItem>
<MudItem xs="9">
    <MudText>Definition for the term.</MudText>
    <MudText>And some more placeholder definition text.</MudText>
</MudItem>

<MudItem xs="3" Class="fw-bold">Another term</MudItem>
<MudItem xs="9">This definition is short, so no extra paragraphs or
    anything.</MudItem>

<MudItem xs="3" Class="text-truncate fw-bold">Truncated term is truncated</MudItem>
<MudItem xs="9">This can be useful when space is tight. Adds an
    ellipsis at
    the end.</MudItem>

<MudItem xs="3" Class="fw-bold">Nesting</MudItem>
<MudItem xs="9" Class="mb-0">
    <MudGrid Class="mb-0">
        <MudItem xs="4" Class="fw-bold">Nested definition list</MudItem>
        <MudItem xs="8" Class="mb-0">I heard you like definition lists. Let me put a
            definition list inside your definition list.</MudItem>
    </MudGrid>
</MudItem>
</MudGrid>

List Unstyled

This is a list.

It appears completely unstyled.

Structurally, it's still a list.

However, this style only applies to immediate child elements.

Nested lists:

are unaffected by this style

will still show a bullet

and have appropriate left margin

This may still come in handy in some situations.

<MudList T="string">
    <MudListItem class="pa-0">This is a list.</MudListItem>
    <MudListItem class="pa-0">It appears completely unstyled.</MudListItem>
    <MudListItem class="pa-0">Structurally, it's still a list.</MudListItem>
    <MudListItem class="pa-0">However, this style only applies to immediate child elements.</MudListItem>
    <MudListItem Class="pa-0 mb-2">
        Nested lists:
        <MudList>
            <MudListItem class="pa-0">are unaffected by this style</MudListItem>
            <MudListItem class="pa-0">will still show a bullet</MudListItem>
            <MudListItem class="pa-0">and have appropriate left margin</MudListItem>
        </MudList>
    </MudListItem>
    <MudListItem class="pa-0">This may still come in handy in some situations.</MudListItem>
</MudList>

Abbreviations

attr

HTML

<MudText><abbr title="attribute">attr</abbr></MudText>
<MudText Class="mb-0"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></MudText>

List Inline

  • This is a list item.
  • And another one.
  • But they're displayed inline.
<ul class="list-inline mb-0">
    <li class="list-inline-item">This is a list item.</li>
    <li class="list-inline-item">And another one.</li>
    <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Horizontal Rules

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolorem fuga iste obcaecati natus eos officiis adipisci voluptatibus ipsum, architecto veniam delectus vel dolor magni a vero sunt ut harum.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto perspiciatis, magni numquam quos perferendis nulla magnam odit amet excepturi quisquam provident.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus aliquid consequatur aut doloremque assumenda voluptatem, id qui vero adipisci! Nostrum ipsam praesentium!

<MudText class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolorem fuga iste obcaecati natus eos officiis adipisci voluptatibus ipsum, architecto veniam delectus vel dolor magni a vero sunt ut harum.</MudText>
<MudDivider />
<MudText class=" mb-1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto perspiciatis, magni numquam quos perferendis nulla magnam odit amet excepturi quisquam provident.</MudText>
<MudDivider Class="border-2 opacity-50" />
<MudText class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus aliquid consequatur aut doloremque assumenda voluptatem, id qui vero adipisci! Nostrum ipsam praesentium!</MudText>
<MudDivider Class="mud-border-secondary border-2 opacity-75" />

Text transform

lowercased text

Uppercased text

Capitalized Text

<MudText Class="text-lowercase">lowercased text</MudText>
<MudText Class="text-uppercase">Uppercased text</MudText>
<MudText Class="text-capitalize mb-0">Capitalized Text</MudText>

Text Decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed 
<MudText Class="text-decoration-underline">This text has a line underneath it.
</MudText>
<MudText Class="text-decoration-line-through">This text has a line going
    through
    it.
</MudText>
<MudLink Href="javascript:void(0);" Class="text-default" Underline="Underline.None">This link has its text
    decoration
    removed
</MudLink>

Font Weight and Italics

Bold text.

Bolder weight text (relative to the parent element).

Semibold weight text.

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

<MudText Class="fw-bold"><b>Bold text.</b></MudText>
<MudText Class="fw-bolder">Bolder weight text (relative to the parent element).</MudText>
<MudText Class="fw-semibold">Semibold weight text.</MudText>
<MudText Class="fw-normal">Normal weight text.</MudText>
<MudText Class="fw-light">Light weight text.</MudText>
<MudText Class="fw-lighter">Lighter weight text (relative to the parent element).</MudText>
<MudText Class="fst-italic">Italic text.</MudText>
<MudText Class="fst-normal mb-0">Text with normal font style</MudText>

Line Height

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API. 

<MudText Class="lh-1">This is a long paragraph written to show how the line-height of
    an
    element is affected by our utilities. Classes are applied to the element
    itself
    or sometimes the parent element. These classes can be customized as needed
    with
    our utility API.
</MudText>
<MudText Class="lh-sm">This is a long paragraph written to show how the line-height of
    an
    element is affected by our utilities. Classes are applied to the element
    itself
    or sometimes the parent element. These classes can be customized as needed
    with
    our utility API.
</MudText>
<MudText Class="lh-base">This is a long paragraph written to show how the line-height
    of
    an element is affected by our utilities. Classes are applied to the element
    itself or sometimes the parent element. These classes can be customized as
    needed with our utility API.
</MudText>
<MudText Class="lh-lg mb-0">This is a long paragraph written to show how the
    line-height
    of an
    element is affected by our utilities. Classes are applied to the element
    itself
    or sometimes the parent element. These classes can be customized as needed
    with
    our utility API.
</MudText>

Monospace

This is in monospace

<MudText Class="font-monospace mb-0">This is in monospace</MudText>

Reset Color

Muted text with a reset link. 

<MudText Class="text-muted mb-0">
    Muted text with a <MudLink Href="javascript:void(0);" Underline="Underline.Always" Class="mud-dark-text">reset link</MudLink>.
</MudText>

Visible Text

This is visible text

<MudText Class="visible mb-0">This is visible text</MudText>

Invisible Text

<MudText Class="invisible mb-0">This is invisible text</MudText>

Text Alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra-large) or wider.

<MudText Class="text-start">Start aligned text on all viewport sizes.</MudText>
<MudText Class="text-center">Center aligned text on all viewport sizes.</MudText>
<MudText Class="text-end">End aligned text on all viewport sizes.</MudText>

<MudText Class="text-sm-start">Start aligned text on viewports sized SM (small) or
    wider.
</MudText>
<MudText Class="text-md-start">Start aligned text on viewports sized MD (medium) or
    wider.
</MudText>
<MudText Class="text-lg-start">Start aligned text on viewports sized LG (large) or
    wider.
</MudText>
<MudText Class="text-xl-start">Start aligned text on viewports sized XL (extra-large)
    or
    wider.</MudText>

Text wrapping and Overflow

This text should wrap.

use class .text-nowrap to prevent text from wrapping

This text should overflow the parent. 
<MudBadge Content="This text should wrap." Color="Color.Primary" Class="text-wrap mb-3"></MudBadge>
<MudText Class="text-muted mb-2"> use class <code>.text-nowrap</code> to prevent text from wrapping</MudText>
<div class="text-nowrap bg-light border" style="width: 8rem;">
    This text should overflow the parent.
</div>
@code {
public string BadgeContent { get; set; } = "This text should wrap.";
}

Word Break

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 

<MudText Class="text-break mb-0">
    mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
</MudText>