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

Name	Type	Default	Description
`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.

This component uses $$restProps.

All unused props will be passed through to the underlying svelte:element element as regular attributes.

More Info

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