Paragraph

<p class="gi-paragraph-md">This is a paragraph</p>

<span class="gi-span-md">This is an inline paragraph</span>

{{ govieParagraph({"content": "This is a paragraph"}) }}

{{ govieParagraph({"content": "This is an inline paragraph", "as":"span"}) }}

import { Paragraph } from '@govie-ds/react';

<Paragraph>This is a paragraph</Paragraph>

<Paragraph as="span">This is an inline paragraph</Paragraph>

Small text

<p class="gi-paragraph-sm">This is a paragraph</p>

<span class="gi-span-sm">This is an inline paragraph</span>

{{ govieParagraph({
  "content": "This is a paragraph", 
  "size": "sm"
  })
}}

{{ govieParagraph({
  "content": "This is an inline paragraph", 
  "size": "sm",
  "as": "span"
  })
}}

import { Paragraph } from '@govie-ds/react';

<Paragraph size="sm">This is a paragraph</Paragraph>

<Paragraph size="sm" as="span">This is an inline paragraph</Paragraph>

Large text

<p class="gi-paragraph-lg">This is a paragraph</p>

<span class="gi-span-lg">This is an inline paragraph</span>

{{ govieParagraph({
  "content": "This is a paragraph", 
  "size": "lg"
  })
}}

{{ govieParagraph({
  "content": "This is an inline paragraph", 
  "size": "lg",
  "as": "span"
  })
}}

import { Paragraph } from '@govie-ds/react';

<Paragraph size="lg">This is a paragraph</Paragraph>

<Paragraph size="lg" as="span">This is an inline paragraph</Paragraph>

When to use this component

Use the Paragraph component when you need to display text content with consistent styling across your web application. It is designed to handle various text elements, such as paragraphs (<p>) or inline text (<span>), with responsive typography that adjusts based on the screen size (xs, md, xl). This component is ideal for creating readable, well-spaced text blocks that adhere to your design system guidelines, ensuring a cohesive look and feel. Additionally, it allows for quick customisation of text size through the size property (lg, md, sm), making it versatile for different use cases, such as headings, subheadings, or standard text content.

When not to use this component

Avoid using the Paragraph component when you need highly customised text styles or content structures that go beyond the component's capabilities. This component is not suitable for scenarios where advanced typography or layout features are required, such as complex text formatting, animations, or interactions. Additionally, if you need to apply specific styles not covered by the predefined class options or need more flexibility in structuring the text, consider using custom HTML and CSS instead. This component is also not intended for use in non-responsive or print-oriented designs where the predefined responsive classes may not apply effectively.