Consistent typographical components like text and link.
This is the standard text component for body copy and general content throughout your application.
<flux:heading>Text component</flux:heading><flux:text class="mt-2">This is the standard text component for body copy and general content throughout your application.</flux:text>Use standard Tailwind to control the size of the text so that you can more easily adapt to different screen sizes.
Larger text size
Default text size
Smaller text
<flux:text class="text-base">Base text size</flux:text><flux:text>Default text size</flux:text><flux:text class="text-xs">Smaller text</flux:text>Use standard Tailwind to control the color of the text so that you can more easily adapt to different screen sizes.
Strong text color
Default text color
Subtle text color
Colored text
<flux:text variant="strong">Strong text color</flux:text><flux:text>Default text color</flux:text><flux:text variant="subtle">Subtle text color</flux:text><flux:text color="blue">Colored text</flux:text>Use the link component to create clickable text that navigates to other pages or resources.
Visit our documentation for more information.
<flux:text>Visit our <flux:link href="#">documentation</flux:link> for more information.</flux:text>Links can be styled differently based on their context and importance.
<flux:link href="#">Default link</flux:link><flux:link href="#" variant="ghost">Ghost link</flux:link><flux:link href="#" variant="subtle">Subtle link</flux:link>|
Prop
|
Description
|
|---|---|
| size |
Size of the text. Options: sm, default, lg, xl. Default: default.
|
| variant |
Text variant. Options: strong, subtle. Default: default.
|
| color |
Color of the text. Options: default, red, orange, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Default: default.
|
| inline |
If true, the text element will be a span instead of a p.
|
|
Prop
|
Description
|
|---|---|
| href |
The URL that the link points to. Required.
|
| variant |
Link style variant. Options: default, ghost, subtle. Default: default.
|
| external |
If true, the link will open in a new tab.
|