Paragraph

const Preview = () => {
  return (
    <Paragraph>
      Personvernerklæringen gir informasjon om hvilke personopplysninger vi
      behandler, hvordan disse blir behandlet og hvilke rettigheter du har.
    </Paragraph>
  );
};

render(<Preview />)

Example

Sizes

Paragraph is available in multiple text sizes to suit different needs.

const Sizes = () => {
  return (
    <>
      <Paragraph data-size='xl'>This is an xl paragraph</Paragraph>
      <Paragraph data-size='lg'>This is a lg paragraph</Paragraph>
      <Paragraph data-size='md'>This is a md paragraph</Paragraph>
      <Paragraph data-size='sm'>This is a sm paragraph</Paragraph>
      <Paragraph data-size='xs'>This is an xs paragraph</Paragraph>
    </>
  );
};

render(<Sizes />)

Guidelines

Keep paragraphs focused and well structured, and break up long blocks of text into smaller sections to make the content easier to scan and understand. Ensure that line length and spacing support good readability.

Text

Body text should be clear, concise, and written in plain language. Start with the most important information so users can quickly understand the context.

Each paragraph should cover one topic or idea at a time. When explaining complex information, divide it into several paragraphs to avoid cognitive overload and make the content easier for everyone to follow.