Skip to content

← All components

Foundation and layout

Prose

Long-form article typography and media rhythm.

Live example

Long-form rhythm

Headings, paragraphs, links, and inline code share a comfortable reading measure.

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

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

/**
 * Complete Prose parameter reference.
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param article attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function ProseExample() {
  return (
    <Prose size="default">…</Prose>
  );
}

Svelte

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

  // Complete Prose parameter reference.
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // article attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Prose size="default">…</Prose>

HTML

html
<!--
  Complete Prose parameter reference.
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  article attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<article class="cf-prose" data-size="default">…</article>

Parameters

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

ParameterTypeDefaultAdaptersExampleDescription
size"sm" | "md" | "lg" (plus heading sizes)"md"React · Svelte · HTML"md"Applies a design-system size token.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.
article attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.