Skip to main content
The TextWithImage block renders a two-column split: a Portable Text content area on one side and an image on the other. The imagePosition field controls which side the image appears on. LQIP (low-quality image placeholders) are supported for smooth lazy-loading.

​
Props

​
heading
string
Optional heading above the body copy, rendered as <h2> at 3xl–4xl with tight tracking.
​
content
PortableTextBlock[]
Portable Text body copy rendered with the project’s shared portableTextComponents. Styled as prose with text-muted-foreground.
​
image
SanityImageObject
Sanity image with hotspot enabled. Cropped to 800×600 (4:3 aspect ratio). The alt field on the image object is required for accessibility.
​
imagePosition
'left' | 'right'
Controls which side the image occupies. Defaults to right. When set to left, the image uses @lg:order-first to prepend it in the column order.
​
backgroundVariant
'white' | 'light' | 'dark' | 'primary'
Background colour token. 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 Text with Image block to a page.
  2. Set an optional Heading.
  3. Write the Content body copy using the Portable Text editor.
  4. Upload an Image and fill in the required Alternative Text field.
  5. Expand Layout Options and set Image Position to left or right (default right).
The image uses hotspot: upload images with the subject off-centre and set the hotspot in Studio so the 4:3 crop always frames the right focal point.

​
Variants / Options

No variant field. The two layout options are:
imagePositionBehaviour
right (default)Text left, image right
leftImage left (via @lg:order-first), text right

​
Example

{
  _type: 'textWithImage',
  heading: 'How the Capstone Works',
  content: [
    {
      _type: 'block',
      style: 'normal',
      children: [
        { _type: 'span', text: 'Each team of four to five students is matched with an industry partner at the start of the semester. Partners provide a project brief, and teams deliver working software by the end of term.' }
      ]
    }
  ],
  image: {
    asset: { _ref: 'image-abc123' },
    alt: 'Students presenting their capstone project'
  },
  imagePosition: 'right'
}

Build docs developers (and LLMs) love

Get started for freeTalk to us