@purpurds/heading

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

import * as HeadingStories from "./src/heading.stories"; import packageInfo from "./package.json";

Heading

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.

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 { Heading } from "@purpurds/purpur";

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