Docs

This page isn't translated yet

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.

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.

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'.

typeClassesUse for
bodytext-body color-bodyRunning text
leadtext-lead color-bodyThe introduction under a title
smalltext-small color-bodyCaptions, footnotes, legal text
labeltext-label color-labelEyebrows and short labels above a title

The sizes and colors below come from the default tokens.

Paragraph types

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.

Label, heading and lead

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.

Caption
A rocky coastline at dusk

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.

PropTypeDefaultDescription
typeParagraphType-
classNamestring-
disableAnimationboolean-
…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.

RelatedLink to this section