@purpurds/text-spacing
v4.4.0
Published
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
Downloads
2,352
Readme
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>
);
};