Paragraph Examples
Default Paragraph #
Use the Paragraph component to render text content with consistent styling. The default paragraph uses base text size and gray color scheme.
The Paragraph component provides a flexible way to display text content with consistent styling across your application. It supports various text sizes, weights, alignments, and color options.
<Paragraph>
The Paragraph component provides a flexible way to display text content with
consistent styling across your application. It supports various text sizes,
weights, alignments, and color options.
</Paragraph>Text Sizes #
Control the size of your paragraph text using the Size parameter. Choose from extra small (XS) to extra large (9XL) sizes.
Extra small paragraph text (text-xs)
Small paragraph text (text-sm)
Base paragraph text (text-base)
Large paragraph text (text-lg)
Extra large paragraph text (text-xl)
2XL paragraph text (text-2xl)
<div class="space-y-4">
<Paragraph Size="TextSize.XS">Extra small paragraph text (text-xs)</Paragraph>
<Paragraph Size="TextSize.SM">Small paragraph text (text-sm)</Paragraph>
<Paragraph Size="TextSize.Base">Base paragraph text (text-base)</Paragraph>
<Paragraph Size="TextSize.LG">Large paragraph text (text-lg)</Paragraph>
<Paragraph Size="TextSize.XL">Extra large paragraph text (text-xl)</Paragraph>
<Paragraph Size="TextSize.XXL">2XL paragraph text (text-2xl)</Paragraph>
</div>Font Weights #
Adjust the font weight of paragraph text to create visual hierarchy or emphasis. Available weights range from thin to black.
Light paragraph text
Normal paragraph text
Medium paragraph text
Semi-bold paragraph text
Bold paragraph text
<div class="space-y-4">
<Paragraph Weight="FontWeight.Light">Light paragraph text</Paragraph>
<Paragraph Weight="FontWeight.Normal">Normal paragraph text</Paragraph>
<Paragraph Weight="FontWeight.Medium">Medium paragraph text</Paragraph>
<Paragraph Weight="FontWeight.SemiBold">Semi-bold paragraph text</Paragraph>
<Paragraph Weight="FontWeight.Bold">Bold paragraph text</Paragraph>
</div>Text Alignment #
Control paragraph text alignment using the Align parameter. Supports left, center, right, and justified alignment.
Left-aligned paragraph text. This is the default alignment for most text content.
Center-aligned paragraph text. Useful for emphasis or decorative content.
Right-aligned paragraph text. Often used for quotes or specific design layouts.
Justified paragraph text. The text is spread evenly between the left and right edges.
<div class="space-y-4">
<Paragraph Align="TextAlign.Left">
Left-aligned paragraph text. This is the default alignment for most text content.
</Paragraph>
<Paragraph Align="TextAlign.Center">
Center-aligned paragraph text. Useful for emphasis or decorative content.
</Paragraph>
<Paragraph Align="TextAlign.Right">
Right-aligned paragraph text. Often used for quotes or specific design layouts.
</Paragraph>
<Paragraph Align="TextAlign.Justify">
Justified paragraph text. The text is spread evenly between the left and right edges.
</Paragraph>
</div>Line Height (Leading) #
Adjust the spacing between lines of text using the Leading parameter to improve readability.
Tight line height paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Normal line height paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Relaxed line height paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="space-y-4">
<Paragraph Leading="LineHeight.Tight">
Tight line height paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
<Paragraph Leading="LineHeight.Normal">
Normal line height paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
<Paragraph Leading="LineHeight.Relaxed">
Relaxed line height paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</div>Italic and Underline #
Add text decorations like italic and underline to emphasize or style paragraph content.
This paragraph uses italic styling for emphasis.
This paragraph has underlined text.
This paragraph combines italic and underline.
<div class="space-y-4">
<Paragraph Italic="true">This paragraph uses italic styling for emphasis.</Paragraph>
<Paragraph Underline="true">This paragraph has underlined text.</Paragraph>
<Paragraph Italic="true" Underline="true">This paragraph combines italic and underline.</Paragraph>
</div>First Letter Styling #
Create drop cap effects by styling the first letter of a paragraph with larger, bolder text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<Paragraph FirstLetterUpper="true" Size="TextSize.LG" Leading="LineHeight.Relaxed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Paragraph>Gradient Paragraphs #
Apply gradient color effects to paragraph text for modern, eye-catching designs.
Purple to blue gradient paragraph text
Green to blue gradient paragraph text
Red to yellow gradient paragraph text
<div class="space-y-4">
<Paragraph Gradient="GradientColor.PurpleToBlue" Size="TextSize.XL" Weight="FontWeight.Bold">
Purple to blue gradient paragraph text
</Paragraph>
<Paragraph Gradient="GradientColor.GreenToBlue" Size="TextSize.XL" Weight="FontWeight.Bold">
Green to blue gradient paragraph text
</Paragraph>
<Paragraph Gradient="GradientColor.RedToYellow" Size="TextSize.XL" Weight="FontWeight.Bold">
Red to yellow gradient paragraph text
</Paragraph>
</div>Custom Colors #
Use custom Tailwind CSS color classes to style paragraphs with specific colors.
Blue colored paragraph text
Green colored paragraph text
Red colored paragraph text
<div class="space-y-4">
<Paragraph CustomColor="text-blue-600 dark:text-blue-400">
Blue colored paragraph text
</Paragraph>
<Paragraph CustomColor="text-green-600 dark:text-green-400">
Green colored paragraph text
</Paragraph>
<Paragraph CustomColor="text-red-600 dark:text-red-400">
Red colored paragraph text
</Paragraph>
</div>