@purpurds/paragraph v5.24.1

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as ParagraphStories from "./src/paragraph.stories"; import packageInfo from "./package.json";

Paragraph

Version {packageInfo.version}

Note that the responsive behaviour of this component is more fluid than the specification in Figma, meaning that it adheres to the min and max sizes specified, but in viewports in-between in will be a ratio to the viewport with rather than a fixed size.

Create a block level element with text content styled as a paragraph.

• paragraph-100 the default paragraph style for body texts
• paragraph-200 has extended line height for long texts, e.g. blog or article texts

Accessibility

Paragraphs make a page more accessible and physically separated from adjacent blocks through blank lines. Assistive technology supports shortcuts to navigate through next and previous paragraph. For more detailed accessibilty guidelines See W3Cs information about p element.

Inline elements

Inline elements can be used inside paragraph to highlight a specific part of text. They add an effect on the text, for example bolding or italics, and for screen reader the pronounciation is be different. Tags marking an inline element can be placed inside the paragraph tags without breaking the flow of the content. The most commonly used inline elements are presented below.

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

import { Paragraph } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <Paragraph {...someProps}>Some content</Paragraph>
    </div>
  );
};