← Components

Rich Text

RichTextComponent (value: html string, toolbar: minimal/full). Matches the TinyMCE editor already used in production for marketing/redemption copy: Key Features, Product Specs, Software License Details, Redemption Instructions, Meta Description, Terms & Conditions, and similar fields are rich text today, not plain textareas, so this mockup represents them the same way. Toolbar buttons are static in this mockup (no real editing behavior).

Full toolbar

Our friends are fulfilling orders as we speak so sit back and relax, your order is on its way!

Thank you for your purchase and enjoy!

Compact variant: .rich-text--compact (short fields, e.g. Meta Description)

Grab this deal at 75% off for a limited time.

Usage guidance

Use .rich-text for any field that's a TinyMCE editor in the live app today, audited per-field, not assumed: Product edit's Key Features, Product Specs, Software License Details, Bundle Highlights, and Redemption Instructions; Sale edit's Meta Description, Terms & Conditions, and Opt-in Options. Plain .field textarea is still correct for genuinely plain-text fields (Email Description, internal notes). Default body height is generous (12rem) since fields like Product Specs and Software License Details tend to hold a lot of text and each get their own full-width row rather than sharing a 2-column grid. Add .rich-text--compact only for genuinely short single-purpose fields like Meta Description. Toolbar can be trimmed to just Bold/Italic for those compact fields, or full (links, images, lists) for longer marketing copy.