TextBlock

Edit This Page

The 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

NameTypeDefaultDescription
variant string "body" Determines which preset text style should be used.
tag any undefined Overrides the default HTML tag of the block's element with your own tag.
element null | HTMLElement null Obtains a bound DOM reference to the text's element.

Slots

NameSlot PropsFallback
Unnamed (Default) {} Empty

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

None