Body text

Running text, emphasis, fine print and labels, each with its size and weight fixed.

Overview

Every run of text that is not a heading: a paragraph, a supporting line, a note, a label.

Paragraph

import { Body, BodyStrong, Caption, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Body as="p">
    Invoice <BodyStrong>INV-204</BodyStrong> is due on Friday.
  </Body>
  <Caption as="p">Sent 2 minutes ago</Caption>
</Stack>

Body copy is Body as="p", with BodyStrong for emphasis inside it and Caption for the fine print.

Don't

import { Stack } from "@hackcove/ui";

<Stack gap="xs">
  <p>
    Invoice <strong>INV-204</strong> is due on Friday.
  </p>
  <small>Sent 2 minutes ago</small>
</Stack>

Plain HTML text elements carry no size, weight or colour of the theme. Every run of text is a typography part.

Meaning

import { Body, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Body as="p" tone="positive">
    Saved.
  </Body>
  <Body as="p" tone="danger">
    Could not save: the name is taken.
  </Body>
</Stack>

tone says what a run of text means: positive for "Saved.", danger for an error.

Don't

import { Body, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Body as="p" color="brand">
    Saved.
  </Body>
  <Body as="p" color="muted">
    Could not save: the name is taken.
  </Body>
</Stack>

color is the hierarchy of text, not its meaning: an error in the accent colour reads as a link, and in muted grey as nothing at all.

Labels

import { Overline, SectionHeading, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Overline>Billing</Overline>
  <SectionHeading>Invoices</SectionHeading>
</Stack>

An Overline is the small label above a heading, naming the group it belongs to.

Don't

import { Body, Overline, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Overline>Invoices</Overline>
  <Body as="p">Two invoices are due this week.</Body>
</Stack>

An Overline is a span, not a heading: a section titled by one has no place in the page outline. Use SectionHeading.

Usage

Set a paragraph in Body as="p". Body is a span by default so it sits inside a sentence; a block of it stops at a readable line length.
Emphasise a run with BodyStrong inside the Body. Use Caption for fine print and metadata, as Caption as="p" when it stands alone.
Put Subtitle under a heading and Lead under a Display. Overline is the small all-caps label above a group, not a title.
tone says what a run means: positive, warn, danger, info or muted. It beats color, and the words still say it, so colour is never the only signal. color is only the hierarchy of the text.
numeric sets tabular figures so a column of amounts lines up, mono the monospace face for an id or a path, and truncate cuts a run to one line.
preserveNewlines on Body keeps the line breaks of text a person typed, such as a note.
Never write a bare <p>, <span>, <strong> or <small>: they carry none of the theme's type scale or colour.

API

Body

Default running text. span (inline; as="p" for a paragraph), text-sm/5 normal, secondary. A block of it stops at a readable line length (max-w-[72ch]), wherever it sits. preserveNewlines keeps the line breaks in the text (a user-typed note); runs of spaces still collapse. tone colours it by meaning (positive for "Saved.", danger for an error; it wins over color), numeric sets tabular figures, mono the monospace face, and truncate cuts it to one line with an ellipsis (the full text becomes its title).

BodyStrong

Emphasised run of body text. span, text-sm/5 medium, primary text. Takes tone, numeric, mono and truncate like Body.

Caption

Fine print / metadata. span (inline; as="p" for a block), text-xs/4 normal, tertiary. Takes tone, numeric, mono and truncate like Body.

Overline

Small all-caps label above a group. span, text-xs semibold uppercase, tertiary. tone, numeric, mono and truncate are opt-in, as on Body.

Body text

Overview

Paragraph

Meaning

Labels

Invoices

Usage

Accessibility

API

Body

BodyStrong

Caption

Overline

Lead

Subtitle