@purpurds/paragraph

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.

Element	Tag	Description
Bring Attention To	<b>	Used to draw the reader's attention to the element's contents.
Citation	<cite>	Used to describe a reference to a cited creative work.
Emphasis	<em>	Marks text that has stress emphasis.
Idiomatic Text	<i>	Represents a range of text that is set off from the normal text for some reason.
Strong Importance	<strong>	Indicates that its contents have strong importance, seriousness, or urgency.
Time	<time>	Represents a specific period in time.

Showcase

Properties

Installation

Via NPM

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

From outside the monorepo (build-time)

To install this package, you need to setup access to the artifactory. Click here to go to the guide on how to do that.

In MyApp.tsx

import "@purpurds/tokens/index.css";

and

import "@purpurds/paragraph/styles";

In MyComponent.tsx

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

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