Fluent Svelte TextBlock
Edit This PageThe TextBlock control renders a block of text in a given style depending on it’s indended purpose in the layout. As the visual representation of language, TextBlock’s main task is to communicate information. Its style should never get in the way of that goal.
import { TextBlock } from "fluent-svelte";Caption
Body
Body Strong
Body Large
Subtitle
Title
Title Large
Display
Usage
TextBlocks only render a single given element, depending on which style is specified.
Styles
TextBlocks can be customized to a given purpose by passing in a variant property. The default variant is body.
| Variant | HTML Tag | Weight | Primary Font Family | Size / Line Height | Preview | |
|---|---|---|---|---|---|---|
caption |
<span> |
400 |
Segoe UI Variable Small | 12/16px | Text | |
body |
<span> |
400 |
Segoe UI Variable Text | 14/20px | Text | |
bodyStrong |
<h6> |
600 |
Segoe UI Variable Text | 14/20px | Text |
|
bodyLarge |
<h5> |
600 |
Segoe UI Variable Text | 18/24px | Text |
|
subtitle |
<h4> |
600 |
Segoe UI Variable Display | 20/28px | Text |
|
title |
<h3> |
600 |
Segoe UI Variable Display | 28/36px | Text |
|
titleLarge |
<h2> |
600 |
Segoe UI Variable Display | 40/52px | Text |
|
display |
<h1> |
600 |
Segoe UI Variable Display | 68/92px | Text |
Component API
API docs automatically generated by sveld and vite-plugin-sveld.Props
| Name | Type | Default | Description |
|---|---|---|---|
variant |
string |
"body" |
Determines which preset text style should be used. |
className |
string |
"" |
Specifies a custom class name for the text block |
element |
null | HTMLHeadingElement | HTMLHeadingElement | HTMLHeadingElement | HTMLHeadingElement | HTMLHeadingElement | HTMLHeadingElement | HTMLSpanElement |
null |
Obtains a bound DOM reference to the text's element. |
Slots
| Name | Slot Props | Fallback |
|---|---|---|
Unnamed (Default) |
{} |
Empty |
Events
All DOM events are forwarded to this component's respective elements by default. Learn More
Dispatched Events
None