Paragraph
Body, lead, small and label paragraphs.
On this page
Paragraph renders a <p> in one of four token text styles: body copy, a lead, small print or a label. The style also picks the color, so labels and body text follow the active color system.
Systhema turns your Figma variables into CSS variables, Tailwind utilities and typed components. Change a token, run a sync, and every page picks it up.
import { Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
<div className="max-w-xl">
<Paragraph>
Systhema turns your Figma variables into CSS variables, Tailwind utilities and typed
components. Change a token, run a sync, and every page picks it up.
</Paragraph>
</div>
)
}ImportLink to this section
import { Paragraph } from '@systhemaui/next'In a React app without Next.js, import it from @systhemaui/react. The API is the same.
Variants and tagsLink to this section
The type prop selects the text style. It defaults to 'body'.
type | Classes | Use for |
|---|---|---|
body | text-body color-body | Running text |
lead | text-lead color-body | The introduction under a title |
small | text-small color-body | Captions, footnotes, legal text |
label | text-label color-label | Eyebrows and short labels above a title |
The sizes and colors below come from the default tokens.
Label
Lead: a short introduction that sets up the section below it.
Body: the default style for running text, set for comfortable reading.
Small: captions, footnotes and the fine print under a form.
import { Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
<div className="flex max-w-xl flex-col gap-5">
<Paragraph type="label">Label</Paragraph>
<Paragraph type="lead">Lead: a short introduction that sets up the section below it.</Paragraph>
<Paragraph>Body: the default style for running text, set for comfortable reading.</Paragraph>
<Paragraph type="small">Small: captions, footnotes and the fine print under a form.</Paragraph>
</div>
)
}ExamplesLink to this section
Title blockLink to this section
A label, a heading and a lead together make the standard section intro.
Case study
From Figma to production in a week
How a four-person team replaced a hand-maintained style guide with tokens.
import { Heading, Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
<div className="flex max-w-xl flex-col gap-3">
<Paragraph type="label">Case study</Paragraph>
<Heading.h3>From Figma to production in a week</Heading.h3>
<Paragraph type="lead">
How a four-person team replaced a hand-maintained style guide with tokens.
</Paragraph>
</div>
)
}Caption under mediaLink to this section
small fits captions and footnotes.
The northern coast, photographed for the Northwind spring campaign.
import { Image, Paragraph } from '@systhemaui/next'
export default function Demo() {
return (
<div className="flex w-full max-w-md flex-col gap-2">
<Image
src="/demo-assets/coast.webp"
alt="A rocky coastline at dusk"
width={1800}
height={1200}
aspectRatio="3/2"
/>
<Paragraph type="small">
The northern coast, photographed for the Northwind spring campaign.
</Paragraph>
</div>
)
}Scroll revealLink to this section
Paragraph adds the animationClasses from your Systhema config, so it reveals on scroll like the other text components. Pass disableAnimation to render it without them.
import { Paragraph } from '@systhemaui/next'
export function Intro() {
return (
<Paragraph type="lead" disableAnimation>
Visible immediately, without a scroll reveal.
</Paragraph>
)
}PropsLink to this section
Paragraph also takes every <p> attribute and forwards a ref to the element.
| Prop | Type | Default | Description |
|---|---|---|---|
type | ParagraphType | - | |
className | string | - | |
disableAnimation | boolean | - | |
…and all <p> attributes |
HTML and CSSLink to this section
Without React, combine a text style class with a color class:
<p class="text-label color-label">Case study</p>
<p class="text-lead color-body">How a four-person team replaced a hand-maintained style guide.</p>
<p class="text-body color-body">Running text goes here.</p>
<p class="text-small color-body">The fine print.</p>The text-* classes set font family, size, weight, letter spacing and line height from the typography and font tokens; color-body and color-label read the typography colors of the active color system. The full list is on Typography.
Next.jsLink to this section
@systhemaui/next re-exports Paragraph from @systhemaui/react unchanged. It is a server-compatible component.
AccessibilityLink to this section
A label paragraph is still a <p>: it is not a heading and does not appear in the document outline. When the eyebrow text names the section, keep the real title in the Heading that follows it.