Default text content
Very small text
Normal text
Larger text
Very large text
Inline span textNormal weight
Medium weight
Semibold weight
Bold weight
Default text color
Muted text color
Subtle text color
Primary brand color
Sans-serif text
Serif text
Monospace code text
Display decorative text
Primary brand font
Tight line height for compact text that needs to save space vertically.
Normal line height for standard readability and comfortable reading.
Relaxed line height for improved readability and breathing room.
Loose line height for maximum readability and spacious feeling.
Left aligned text
Center aligned text
Right aligned text
This is a very long piece of text that will be truncated with ellipsis when it exceeds the container width.
Styled Call-to-Action Text Styled but not colored Call-to-Action TextThis is a default paragraph with good reading size and spacing. It automatically gets appropriate line height and max-width for readability.
Smaller paragraph text for captions or secondary information.
Standard paragraph size for main body content.
Larger paragraph text for introductory content or emphasis.
Even larger paragraph 6 for featured content or lead paragraphs.
Even larger paragraph 7 for featured content or lead paragraphs.
Even larger paragraph 8 for featured content or lead paragraphs.
Tight line height paragraph for when you need to save vertical space but still maintain readability for body text content.
Normal line height paragraph which is the default for most body text and provides good balance between readability and space efficiency.
Check this default. Normal line height paragraph which is the default for most body text and provides good balance between readability and space efficiency.
Relaxed line height paragraph that provides extra breathing room between lines for improved readability, especially good for longer form content.
Loose line height paragraph with maximum spacing for the most comfortable reading experience, ideal for important or featured content.
Sans-serif paragraph using your design system's sans-serif font stack for modern, clean readability.
Serif paragraph using traditional serif fonts for a more classic, literary feel that's excellent for long-form reading.
Monospace paragraph for code documentation, technical content, or when you need consistent character spacing.
Default colored paragraph for main body content.
Muted colored paragraph for secondary or supporting information.
Subtle colored paragraph for tertiary information or footnotes.
Primary colored paragraph to emphasize important brand messaging.
Accent colored paragraph to emphasize important brand messaging.
Left-aligned paragraph which is the standard for most text content.
Center-aligned paragraph for featured quotes, callouts, or special content.
Right-aligned paragraph for special layouts or design emphasis.
Justified paragraph where text is aligned to both left and right margins, creating clean edges on both sides for formal document layouts.
Narrow paragraph with custom max-width for sidebars or constrained layouts.
Wide paragraph with extended max-width for fuller layouts when you need more text per line.
Featured paragraph with custom styling for introductory content, testimonials, or other special emphasis text that needs to stand out.
Lead paragraph: This introductory paragraph uses larger text and relaxed line height to draw attention and set the tone for the content.
Main body paragraph: Standard sized paragraph for the bulk of your content with optimal readability settings.
Another body paragraph: Consistent sizing maintains good reading rhythm throughout your content.
Conclusion or caption: Smaller, muted text for supplementary information or photo captions.
This shows how Text and Text components work together.
You can mix different text styles within paragraphs, and use
inline emphasis
as needed for highlighted content .This page demonstrates various Headings
Edge-to-edge content
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Wider than normal but not full width
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Have you used named grid lines in your projects? I'd love to hear about your experiences in the comments below!
