Paragraph

Usage

• Use Paragraph as the default choice for body text — descriptions, explanations, instructions, confirmations, and subtitles.
• Prefer Paragraph over Text when element semantics matter and the content belongs in a <p>.
• Use Text instead only when neither Paragraph nor another semantic typographic Pluma component fits.
• Pair a short Heading with a Paragraph that adds supporting context — never pack that context into the Heading itself.
• Differentiate Paragraphs that serve different roles with sizeVariant and variant; never style them identically.

Variants

• variant="active" — Semibold weight and active color for key content such as questions or primary instructions. At sizeVariant="xs" it applies semibold weight without changing the text color.
• variant="secondary" — Subtle text color for supplementary information that supports surrounding content without competing for attention. At sizeVariant="xs" it reads as de-emphasized helper text.
• Omit variant for standard body copy.

Appearance

• sizeVariant="md" (default) — Standard body text.
• sizeVariant="xs" — Supporting or supplementary text. Combine with variant="secondary" for the most de-emphasized level of the hierarchy.

Content

• Follow the Pluma Foundations Content guidelines for general copy.
• Defer to a specific component's own content section for copy rendered inside that component.

Implementation Notes

• Paragraph wraps Text and defaults as to "p". Override with as (React) or @as (Ember) to render a different element.
• sizeVariant and variant are Paragraph's only own props; every other Text prop (text, size, weight, color, family, fontStyle) passes through. Passing text or color directly overrides the typography style and color Paragraph derives from sizeVariant and variant.
• Content is children in React and the default block ({{yield}}) in Ember.
• Ember: invoke <PlumaParagraph> with @sizeVariant and @variant.