Paragraph Properties
A flexible paragraph component that provides consistent text styles with various size options. This component is designed for body text across your application with proper spacing and readability.
Basic Paragraph
The basic Paragraph component renders with default styling. By default, it uses medium size.
Default paragraph text with medium sizing.
Paragraph Sizes
The size prop allows you to adjust the visual size of the paragraph. Available sizes are 'sm', 'md' (default), and 'lg'.
Large paragraph text. This is the largest size option and uses the type-text-paragraph-md class for optimal readability when you need to emphasize content or use as introduction text.
Medium paragraph text. This is the default size and uses the size-p-sm class. It's ideal for most body content throughout your application.
Small paragraph text. This uses the type-text-paragraph-xs class and is perfect for supporting text, captions, or when space is limited.
Examples
Below are examples showing how the Paragraph component can be used in different contexts.
Section Title
Introduction paragraph text that provides an overview of the section. This larger text size helps to establish context before diving into more detailed information.
Main content using the medium size. This is where most of your information would be presented, using a comfortable reading size that works well for extended content blocks.
Additional information or note in smaller text. Perfect for supplementary details that support the main content but don't need as much visual emphasis.