@purpurds/text-spacing v5.24.1

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

import * as TextSpacingStories from "./src/text-spacing.stories"; import packageInfo from "./package.json";

TextSpacing

Version {packageInfo.version}

Component provides margins between headings and paragraphs within it. It is supposed to be used with Purpur's Heading and Paragraph components, since it targets those class names (e.g. purpur-heading--title-100).

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, Paragraph, TextSpacing } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <TextSpacing>
        <Heading tag="h2" variant="title-300">
          This is a heading
        </Heading>
        <Paragraph variant="preamble-100">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam tenetur, praesentium
          laudantium impedit sed id provident iure quod.
        </Paragraph>
        <Paragraph variant="paragraph-100">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum maiores laborum fugit
          corporis. Est asperiores accusamus sed voluptatum cumque facere velit ea id quia maiores
          aliquid, culpa aperiam, dicta nemo?
        </Paragraph>
      </TextSpacing>
    </div>
  );
};