Text

Flexible typography + container helper. Renders content inside any HTML element kind with declarative size, weight, alignment, padding, margin, border, and fill parameters.

SSR mode

Divergence from Blok

Blazor-side addition; no equivalent in the Blok design system. Text exists to absorb the recurring <div class="bg-background border border-border rounded-lg p-6 text-center"><p class="text-sm">…</p></div> Tailwind-in-markup boilerplate that otherwise litters Catalogue examples and consumer apps.

Examples

Default — `<p>` at Md size

A short helper sentence.

Sizes

Xs (text-xs)

Sm (text-sm)

Md (text-base)

Lg (text-lg)

Xl2 (text-2xl) Bold

Headings via Kind

Heading 1

Heading 2

Heading 3

Inline span, muted

Container preset — bordered card

Centered card-style block (replaces a div+p Tailwind boilerplate).

Italic + muted

An italic, muted aside.

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Text	Renders ChildContent inside the HTML element specified by `Kind` (default `<p>`) with declarative typography and container parameters. Designed to absorb recurring `<div class="...">+<p class="...">` boilerplate.

Text

Renders ChildContent inside the HTML element specified by Kind (default <p>) with declarative typography and container parameters. Designed to absorb recurring <div class="...">+<p class="..."> boilerplate.

Property	Type	Description
ChildContent	RenderFragment?	The text or markup to render.
Kind	TextKind	HTML element kind. Default: `TextKind.P`. Other values: `Span`, `Div`, `H1`, `H2`, `H3`, `H4`, `H5`, `H6`.
Size	Size	Font size. Default: `Size.Md` (`text-base`). Maps `Xs` → `text-xs`, `Sm` → `text-sm`, `Md` → `text-base`, `Lg` → `text-lg`, `Xl` → `text-xl`, `Xl2..Xl8` → `text-2xl..text-8xl`.
Alignment	Alignment	Text alignment. Default: `Alignment.Start`. Maps `Start` → `text-start`, `Center` → `text-center`, `End` → `text-end`, `Stretch` → `text-justify`.
Bold	bool	Toggles `font-bold`. Default: `false`. Wins over `SemiBold` if both are set.
SemiBold	bool	Toggles `font-semibold`. Default: `false`. Ignored if `Bold` is also `true`.
Italic	bool	Toggles `italic`. Default: `false`.
Muted	bool	Toggles `text-muted-foreground`. Default: `false`.
Padding	int?	Tailwind spacing-scale padding (`p-{value}`). Supported values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 12. Null (default) adds no padding class.
Margin	int?	Tailwind spacing-scale margin (`m-{value}`). Supported values: 0, 1, 2, 3, 4, 5, 6, 8. Null (default) adds no margin class.
Border	bool	Toggles `border border-border`. Default: `false`.
Rounded	bool	Toggles `rounded-lg`. Default: `false`.
FullWidth	bool	Toggles `w-full`. Default: `false`.
FullHeight	bool	Toggles `h-full`. Default: `false`. Useful for filling resizable pane wrappers and other height-constrained slots.
BgFilled	bool	Toggles `bg-background`. Default: `false`.
ClassName	string?	Extra CSS classes appended after the computed classes. Use to override or extend.