Components / Text
Text
Semantic typography component. Renders proper HTML elements (h1-h6, p, span) based on the "as" prop.
typography v0.1.0
Playground
Examples
Sizes
<cg-stack gap="xs"><cg-text size="xs">Extra Small</cg-text><cg-text size="sm">Small</cg-text><cg-text size="md">Medium</cg-text><cg-text size="lg">Large</cg-text><cg-text size="xl">Extra Large</cg-text><cg-text size="2xl">2XL Heading</cg-text></cg-stack>Weights
<cg-stack gap="xs"><cg-text weight="normal">Normal</cg-text><cg-text weight="medium">Medium</cg-text><cg-text weight="semibold">Semibold</cg-text><cg-text weight="bold">Bold</cg-text></cg-stack>Hierarchy
<cg-stack gap="xs"><cg-text color="default" weight="semibold">Default — primary headings & body</cg-text><cg-text color="secondary">Secondary — subheadings & supporting copy</cg-text><cg-text color="muted">Muted — captions, timestamps, labels</cg-text></cg-stack>Semantic colors
<cg-stack gap="xs"><cg-text color="accent" weight="medium">Accent — brand highlight</cg-text><cg-text color="success">Success message</cg-text><cg-text color="warning">Warning message</cg-text><cg-text color="danger">Error message</cg-text></cg-stack>Import
import { CgText } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-text';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
as | "h1"-"h6" | "p" | "span" | "p" | HTML element to render |
size | "xs"-"4xl" | "md" | Font size |
weight | "normal" | "medium" | "semibold" | "bold" | "normal" | Font weight |
color | "default" | "secondary" | "muted" | "accent" | "success" | "warning" | "danger" | "inherit" | "default" | Text color — `default` → `secondary` → `muted` form a 3-level hierarchy |