Text
Text renders body text with control over size, weight, color, alignment, truncation, and more.
Basic Usage
The quick brown fox jumps over the lazy dog.
import { Text } from "@paramanu/typography-react"
export default function App() {return <Text size="md">The quick brown fox jumps over the lazy dog.</Text>}<p class="pm-text pm-text--size-md">The quick brown fox jumps over the lazy dog.</p>Accessibility
Text renders as a <p> by default. Use the as prop to change the element for appropriate semantics. Use color variants that meet contrast requirements.
React Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | "p" | "span" | "div" | "label" | ... | "p" | HTML element |
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | — | Font size |
weight | "normal" | "medium" | "semibold" | "bold" | — | Font weight |
align | "left" | "center" | "right" | "justify" | — | Text alignment |
color | "default" | "muted" | "dimmed" | "primary" | ... | — | Semantic color |
truncate | boolean | false | Single-line truncation |
lineClamp | 1-6 | — | Multi-line truncation |
italic | boolean | false | Italic style |
transform | "uppercase" | "lowercase" | "capitalize" | "none" | — | Text transform |
decoration | "underline" | "line-through" | "none" | — | Text decoration |
inherit | boolean | false | Inherit parent font styles |
inline | boolean | false | Render inline |
CSS Classes
| Class | Purpose |
|---|---|
pm-text | Base |
pm-text--size-{s} | Font size |
pm-text--weight-{w} | Font weight |
pm-text--color-{c} | Color |
pm-text--truncate | Truncation |
pm-text--italic | Italic |
pm-text--inline | Inline display |