Text
A polymorphic text component with control over size, weight, color, and semantic HTML element.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Text />
Extra small text (xs)
Small text (sm)
Default text (base)
Large text (lg)
Extra large text (xl)
2XL text
Foreground
Muted
Primary
Destructive
Light weight
Normal weight
Medium weight
Semibold weight
Bold weight
This is a very long piece of text that should be truncated when it overflows the container width.
This is a longer passage of text that is clamped to two lines. Anything beyond the second line is hidden and an ellipsis is shown at the end of the visible content. Use LineClamp for multi-line truncation where a single-line ellipsis would be too aggressive.
Left aligned text
Center aligned text
Right aligned text
Tight leading. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus.
Relaxed leading. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus.
Paragraph element (default)
Span element Small element Strong elementPick a size to see it applied live.
The quick brown fox jumps over the lazy dog.
Pick a color to see it applied live.
The quick brown fox jumps over the lazy dog.
Pick a weight to see it applied live.
The quick brown fox jumps over the lazy dog.