Blazorise Typography components
Control text size, alignment, wrapping, overflow, transforms and more.
We create a font convention to ensure the best presentation across different platforms.
Examples
Text component
Displays a simple static text on a page.<Text TextColor="TextColor.Primary"> Lorem ipsum dolor sit amet. </Text> <Text TextColor="TextColor.Secondary"> Cursus euismod quis viverra nibh cras. </Text>
Paragraph component
Block of text separated from adjacent blocks by blank lines and/or first-line indentation.Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy.
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
<Paragraph> Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy. </Paragraph> <Paragraph> Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. </Paragraph>
Lead component
The leading text can be used as the first paragraph inside an article content page.Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy.
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
<Lead> Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy. </Lead> <Paragraph> Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes. </Paragraph>
Heading component
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 component
Traditional 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>
API
Attributes
All typography components
Name | Description | Type | Default |
---|---|---|---|
TextColor |
Sets the text color. | TextColor |
Default |
TextAlignment |
Sets the text alignment. | TextAlignment |
Default |
TextTransform |
Sets the text transformation. | TextTransform |
Default |
TextWeight |
Sets the text weight. | TextWeight |
Default |
TextOverflow |
Determines how the text will behave when it is larger than a parent container. | TextOverflow |
Default |
Italic |
Italicize text if set to true. | bool |
false |
CopyToClipboard |
If true, the content of the component will be copied to clipboard on click event. | 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 |