Skip to main content

Body

Implemented

Paragraph-level body text (text-ep-sm/base/lg scale, text-ep-text-body color, SECONDARY font slot by default). Renders a semantic <p>; polymorphic via as for span/div inline usage.

Categoryatoms
Sourcesrc/components/atoms/Body/Body.tsx
AI HintPrimary body-text atom. Defaults to the SECONDARY font slot (Space Grotesk); a consumer font-text-primary/secondary/code class in className replaces the baked default (Tailwind emits utilities in config order, so keeping both would silently resolve to secondary). No directional styles, RTL-safe by inheritance.

Body component.

Body

design-system

Body component preview and API reference.

Body

Props

Preview

Body

Prop
Type
Required
Default
Description
size
'sm' | 'base' | 'lg'
Optional
'base'

Visual scale token (rem-based, paired line-height)

weight
'normal' | 'medium' | 'semibold'
Optional
'normal'

Semantic weight token

as
'p' | 'span' | 'div'
Optional
'p'

Element to render (semantic paragraph by default)

children
React.ReactNode
Required
-

Body content

Quick use:<Body />

Accessibility

a11y

4 rules

WCAG 1.3.1

Renders semantic <p> by default (as override for span/div inline usage)

WCAG 1.4.3

text-ep-text-body >= 4.5:1 on page and card surfaces in both themes (7.56:1 light bg, 7.22:1 light card, 11.81:1 dark bg, 9.93:1 dark card, 13.44:1 bg-page-dark)

WCAG 1.4.4

rem-based size tokens scale with user font-size (200% text resize safe)

WCAG 2.3.3

motion-safe color transitions with motion-reduce:transition-none fallback

Usage

Import

tsxSnippet
import { Body } from "@epasslive/design-system"

Example 1

tsxSnippet
<Body>Paragraph copy</Body>

Example 2

tsxSnippet
<Body size='lg' weight='semibold'>Emphasized lead paragraph</Body>

Example 3

tsxSnippet
<Body as='span' size='sm'>Inline body text</Body>

Anti-patterns

— Do not use for muted helper/caption text - use Caption

— Do not use for headings - use Heading/H1-H6

Design System v4.1.0 | ePassLive