Text - Docs - Artefact

Text

Typography

Presentational

Introduction

A polymorphic component for displaying body text, paragraphs, or spans with consistent typography.

Usage

This is a paragraph.

import { Text } from "../components/ui";

export default function MyPage() {
  return (
    <Text size="lg" class="muted">
      This is a paragraph.
    </Text>
  );
}

CMS Page Builder

This component is available as a text block in the Page Builder (content/pages/*.json):

{
  "type": "text",
  "content": "This is a paragraph.",
  "size": "lg"
}

Props

Prop	Type	Description
`children`	`any`	The text or content.
`class`	`string`	Custom CSS classes.
`as`	`string`	The HTML element to render (e.g., "p", "span"). Defaults to "p".
`size`	`string`	The font size variant.
`variant`	`string`	Typographic style variant (e.g., "heading", "label").
`interactive`	`boolean`	Whether to enable client-side hydration.