Skip to main content
The RichText block renders Sanity Portable Text inside a constrained, typographically styled prose container. Use it for long-form editorial content such as program descriptions, policy text, announcements, or any body copy that needs formatting beyond a simple paragraph.

​
Props

​
content
PortableTextBlock[]
Portable Text value array from Sanity. Rendered by astro-portabletext using the project’s shared portableTextComponents, which includes custom renderers for marks, annotations, and embedded images.
​
backgroundVariant
'white' | 'light' | 'dark' | 'primary'
Background colour token from the shared block base. Defaults to white.
​
spacing
'none' | 'small' | 'default' | 'large'
Vertical padding override. Defaults to default.
​
maxWidth
'narrow' | 'default' | 'full'
Content container max-width. Defaults to default.
​
class
string
Additional CSS classes.
​
id
string
HTML id for anchor targeting.

​
Usage in Sanity Studio

  1. Add a Rich Text block to a page’s Blocks array.
  2. Use the Content Portable Text editor to write or paste body copy.
  3. Apply inline formatting: bold, italic, links, code, headings (H2–H4), and block quotes.
  4. Expand Layout Options to adjust spacing or max-width for narrow editorial columns.
The Portable Text field type is portableText — a shared field definition in studio/src/schemaTypes/objects/portable-text.ts that configures available styles, marks, and decorators consistently across all blocks.

​
Variants / Options

This block has no variant field. The prose container (SectionProse) applies consistent Tailwind prose styles. Use the Max Width layout option to constrain long-form text to a narrower reading column.

​
Example

{
  _type: 'richText',
  content: [
    {
      _type: 'block',
      style: 'h2',
      children: [{ _type: 'span', text: 'About the Capstone Program' }]
    },
    {
      _type: 'block',
      style: 'normal',
      children: [
        {
          _type: 'span',
          text: 'The YWCC Industry Capstone pairs senior students with real-world engineering challenges provided by our industry partners.'
        }
      ]
    }
  ]
}
Embedded images in Portable Text are handled by the shared portableTextComponents renderer, which applies the same urlFor optimisation pipeline used throughout the site.

Build docs developers (and LLMs) love

Get started for freeTalk to us