Components
Text
Renders prose at a chosen size and semantic tag.
Usage
Basic
A title
Design tokens keep every component on brand.
Supporting detail
HTML
<bs:bsui-stack direction="column" gap="2">
<bs:bsui-text content="A title" variant="title" tag="h3" />
<bs:bsui-text content="Design tokens keep every component on brand." variant="body" tag="p" />
<bs:bsui-text content="Supporting detail" variant="muted" tag="p" />
</bs:bsui-stack>Every variant
All eight variants on the same tag, so only the type scale changes.
Heading
Title
Lead
Body
Label
Muted
Caption
Code
HTML
<bs:bsui-stack direction="column" gap="2">
<bs:bsui-text content="Heading" variant="heading" tag="span" />
<bs:bsui-text content="Title" variant="title" tag="span" />
<bs:bsui-text content="Lead" variant="lead" tag="span" />
<bs:bsui-text content="Body" variant="body" tag="span" />
<bs:bsui-text content="Label" variant="label" tag="span" />
<bs:bsui-text content="Muted" variant="muted" tag="span" />
<bs:bsui-text content="Caption" variant="caption" tag="span" />
<bs:bsui-text content="Code" variant="code" tag="span" />
</bs:bsui-stack>Tag and variant
The tag sets the outline level and the variant sets the size, chosen separately.
Release notes
Version 7.4
Breaking changes
Blocks
HTML
<bs:bsui-stack direction="column" gap="2">
<bs:bsui-text content="Release notes" variant="heading" tag="h1" />
<bs:bsui-text content="Version 7.4" variant="title" tag="h2" />
<bs:bsui-text content="Breaking changes" variant="label" tag="h3" />
<bs:bsui-text content="Blocks" variant="caption" tag="h4" />
</bs:bsui-stack>Attributes
| Attribute | Type | Default |
|---|---|---|
content |
richtext
|
— |
variant |
body |
|
tag |
p |
