@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/heading": "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/heading/styles";

In MyComponent.tsx

import { Heading } from "@purpurds/heading";

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