Foundation and layout

Text

Body, muted, lead, small, and caption text styles.

Live example

Readable body text for long-form content.

Supporting metadata stays quiet.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Text } from "@cofob/design-system-react";

/**
 * Complete Text parameter reference.
 * @param as
 *   type: element name (adapter-specific union)
 *   default: component default
 *   example: "article"
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param tone
 *   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
 *   default: "neutral"
 *   example: "success"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function TextExample() {
  return (
    <Text>Content</Text>
  );
}

Svelte

<script lang="ts">
  import { Text } from "@cofob/design-system-svelte";

  // Complete Text parameter reference.
  // as
  //   type: element name (adapter-specific union)
  //   default: component default
  //   example: "article"
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // tone
  //   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
  //   default: "neutral"
  //   example: "success"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

<Text>Content</Text>

HTML

<!--
  Complete Text parameter reference.
  as
    type: element name (adapter-specific union)
    default: component default
    example: "article"
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  tone
    type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
    default: "neutral"
    example: "success"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<p class="cf-text" data-tone="muted">Metadata</p>

Contract

CSS selector	`.cf-text`
Adapters	Native · React · Svelte
Primary props	as · size · tone · children
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`as`	`element name (adapter-specific union)`	`component default`	React · Svelte · HTML	`"article"`	Chooses the rendered semantic element.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	React · Svelte · HTML	`"md"`	Applies a design-system size token.
`tone`	`"neutral" \| "accent" \| "info" \| "success" \| "warning" \| "danger"`	`"neutral"`	React · Svelte · HTML	`"success"`	Applies semantic color intent without hard-coded colors.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.