RichText

Organism component for displaying rich text content with optional title. Renders CMS RichText component content.

Props

The component accepts all fields from the RichText type directly:

Prop	Type	Required	Default	Description
`title`	`string`	No	-	Rich text section title
`title_tag`	`"h1" \| "h2" \| "h3" \| "h4" \| "p"`	No	`"h2"`	HTML tag for title
`title_variant`	`TypographyVariant`	No	-	Typography variant for title styling
`fancy_background`	`boolean`	No	-	Adds gradient background with rounded corners (`curated-product-card-gradient`)
`copy`	`JSONRTE`	No	-	Rich text content (JSON RTE format)
`$`	`CSLPFieldMapping`	No	-	CSLP mapping for editable fields
`noPadding`	`boolean`	No	`false`	Removes section padding (used when nested in TwoColumn)

Usage

1import { RichText } from '@/components/organisms/RichText';
2
3<RichText
4  title="Section Title"
5  title_tag="h2"
6  title_variant="cs-h2"
7  copy={richTextContent}
8  $={cslpMapping}
9/>

import { RichText } from '@/components/organisms/RichText';

<RichText
  title="Section Title"
  title_tag="h2"
  title_variant="cs-h2"
  copy={richTextContent}
  $={cslpMapping}
/>

Features

Title support: Optional title with configurable HTML tag and typography variant
Rich text rendering: Uses RichTextRenderer atom for JSON RTE content
Typography variants: Supports all Title component variants via title_variant
CSLP support: Supports Contentstack Live Preview for all fields
Prose styling: Rich text content uses prose class for typography
Fancy background: Optional gradient background with curated-product-card-gradient styling
No padding: Supports noPadding for nested use inside TwoColumn

Title Variants

The title_variant prop accepts any value from the Title component's TypographyVariant type:

"cs-h1-display", "h1-standard", "h1-compact", "h1-display-compact"
"cs-h1-header", "cs-h1-3xl"
"cs-h2", "cs-h3", "cs-h4", "cs-h5", "cs-h6"
"hero-text", "section-heading"

Component Structure

1<section className={`${noPadding ? "" : "section"} ${fancy_background ? "curated-product-card-gradient p-6 rounded-lg" : ""}`}>
2  {title && (
3    <Title
4      text={title}
5      as={title_tag || 'h2'}
6      variant={title_variant || undefined}
7      $={$?.title}
8      classes="mb-4"
9    />
10  )}
11  {copy && (
12    <div className="prose" {...getCSLPAttributes($?.copy)}>
13      <RichTextRenderer json={copy} />
14    </div>
15  )}
16</section>

<section className={`${noPadding ? "" : "section"} ${fancy_background ? "curated-product-card-gradient p-6 rounded-lg" : ""}`}>
  {title && (
    <Title
      text={title}
      as={title_tag || 'h2'}
      variant={title_variant || undefined}
      $={$?.title}
      classes="mb-4"
    />
  )}
  {copy && (
    <div className="prose" {...getCSLPAttributes($?.copy)}>
      <RichTextRenderer json={copy} />
    </div>
  )}
</section>

Notes

Returns null if both title and copy are missing
Title is optional - component can render with just rich text content
Uses prose class for rich text content styling
Integrated into ComponentsRenderer system (available as rich_text component)