Text
A versatile component for rendering semantic text elements with consistent typography.
Props
Prop | Type | Default | Description |
|---|---|---|---|
type | string | 'p' | The HTML element to render (h1-h6, p, span, code, etc.). |
class | string | '' | CSS classes to apply to the element. |
overrideDefaultStyling | boolean | false | If true, removes the base fluid-text class. |
children | Snippet | — | The text content to render. |
...rest | HTMLAttributes | — | Standard HTML attributes for the chosen element type. |
Samples
Semantic Headings
Render various heading levels using the type prop.
Heading 1
Heading 2
Heading 3
0
<Text type="h1" class="text-2xl font-bold">Heading 1</Text>1
<Text type="h2" class="text-xl font-semibold">Heading 2</Text>Inline Emphasis
Use semantic tags for bold, italic, or highlighted text.
This is bold, italic, and highlighted.
0
<Text>1
This is <Text type="strong">bold</Text> and <Text type="em">italic</Text>.2
</Text>Code & Preformatted
Perfect for technical documentation or data display.
const fluid = 'awesome'; {
"library": "fluid-ui",
"framework": "svelte"
}0
<Text type="code">const fluid = 'awesome';</Text>1
<Text type="pre">{"{...}"}</Text>Semantic Markers
Support for deleted, inserted, sub and superscript.
Old price New price
H2O and E = mc2
0
<Text type="del">Old</Text> <Text type="ins">New</Text>1
<Text>H<Text type="sub">2</Text>O</Text>