Typography components

Control text size, alignment, wrapping, overflow, transforms and more.

Examples

Text

Displays a simple static text on a page.
Lorem ipsum dolor sit amet. Cursus euismod quis viverra nibh cras.
<Text TextColor="TextColor.Primary">
    Lorem ipsum dolor sit amet.
</Text>
<Text TextColor="TextColor.Secondary">
    Cursus euismod quis viverra nibh cras.
</Text>

Paragraph

Block of text separated from adjacent blocks by blank lines and/or first-line indentation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat pretium nibh ipsum consequat. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Nunc sed velit dignissim sodales ut. Mi bibendum neque egestas congue quisque egestas diam in arcu. Quis vel eros donec ac odio tempor. Fermentum posuere urna nec tincidunt praesent. Eget velit aliquet sagittis id consectetur. Molestie at elementum eu facilisis sed odio morbi quis commodo. Ut consequat semper viverra nam libero justo laoreet sit.

Cursus euismod quis viverra nibh cras. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Varius quam quisque id diam vel quam. Eget sit amet tellus cras adipiscing enim eu turpis. In est ante in nibh mauris cursus mattis. Interdum velit laoreet id donec ultrices tincidunt. Sollicitudin aliquam ultrices sagittis orci a. Turpis egestas sed tempus urna et pharetra pharetra. Felis bibendum ut tristique et egestas quis ipsum suspendisse. Ipsum dolor sit amet consectetur adipiscing elit ut. Enim eu turpis egestas pretium aenean pharetra. Diam sit amet nisl suscipit adipiscing bibendum est. Turpis massa sed elementum tempus egestas. Accumsan in nisl nisi scelerisque eu ultrices vitae. Purus ut faucibus pulvinar elementum integer. Id interdum velit laoreet id donec ultrices tincidunt arcu. Aliquam vestibulum morbi blandit cursus risus at ultrices.

<Paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat pretium nibh ipsum consequat. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Nunc sed velit dignissim sodales ut. Mi bibendum neque egestas congue quisque egestas diam in arcu. Quis vel eros donec ac odio tempor. Fermentum posuere urna nec tincidunt praesent. Eget velit aliquet sagittis id consectetur. Molestie at elementum eu facilisis sed odio morbi quis commodo. Ut consequat semper viverra nam libero justo laoreet sit.
</Paragraph>
<Paragraph>
    Cursus euismod quis viverra nibh cras. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Varius quam quisque id diam vel quam. Eget sit amet tellus cras adipiscing enim eu turpis. In est ante in nibh mauris cursus mattis. Interdum velit laoreet id donec ultrices tincidunt. Sollicitudin aliquam ultrices sagittis orci a. Turpis egestas sed tempus urna et pharetra pharetra. Felis bibendum ut tristique et egestas quis ipsum suspendisse. Ipsum dolor sit amet consectetur adipiscing elit ut. Enim eu turpis egestas pretium aenean pharetra. Diam sit amet nisl suscipit adipiscing bibendum est. Turpis massa sed elementum tempus egestas. Accumsan in nisl nisi scelerisque eu ultrices vitae. Purus ut faucibus pulvinar elementum integer. Id interdum velit laoreet id donec ultrices tincidunt arcu. Aliquam vestibulum morbi blandit cursus risus at ultrices.
</Paragraph>

Headings

All HTML headings, h1 through h6, are available.

h1. Blazorise heading

h2. Blazorise heading

h3. Blazorise heading

h4. Blazorise heading

h5. Blazorise heading
h6. Blazorise heading
<Heading Size="HeadingSize.Is1">h1. Blazorise heading</Heading>
<Heading Size="HeadingSize.Is2">h2. Blazorise heading</Heading>
<Heading Size="HeadingSize.Is3">h3. Blazorise heading</Heading>
<Heading Size="HeadingSize.Is4">h4. Blazorise heading</Heading>
<Heading Size="HeadingSize.Is5">h5. Blazorise heading</Heading>
<Heading Size="HeadingSize.Is6">h6. Blazorise heading</Heading>

Display Headings

raditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

<DisplayHeading Size="DisplayHeadingSize.Is1">Display 1</DisplayHeading>
<DisplayHeading Size="DisplayHeadingSize.Is2">Display 2</DisplayHeading>
<DisplayHeading Size="DisplayHeadingSize.Is3">Display 3</DisplayHeading>
<DisplayHeading Size="DisplayHeadingSize.Is4">Display 4</DisplayHeading>

Attributes

All typography components

Name Description Type Default
TextColor Sets the text color. TextColor None
TextAlignment Sets the text alignment. TextAlignment None
TextTransform Sets the text transformation. TextTransform None
TextWeight Sets the text weight. TextWeight None
TextOverflow Determines how the text will behave when it is larger than a parent container. TextOverflow None
Italic Italicize text if set to true. bool false

Heading

Name Description Type Default
Size Sets the heading size. HeadingSize Is3

DisplayHeading

Name Description Type Default
Size Sets the display heading size. DisplayHeadingSize Is2