Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Share your own snippet

Heading, text, and illustration

By Knut Melvær

Schema for a text with a heading and a illustration with a caption.

Text with illustration block

// textWithIllustration.js
export default {
  name: 'textWithIllustration',
  type: 'object',
  title: 'Text with Illustation',
  fields: [
    {
      name: 'heading',
      type: 'string',
      title: 'Heading'
    },
    {
      name: 'text',
      type: 'simpleRichText', // or text, or simpleRichText depending on what you want to allow,
      title: 'Text'
    },
    {
      name: 'illustration',
      type: 'figure', // image field with alt and caption fields
      title: 'Illustration'
    }
    /*
    {
        name: 'alternate',
        type: 'boolean',
        title: 'Use alternative position'
    },
    */
  ]
}

Figure

// figure.js
export default {
  name: 'figure',
  type: 'image',
  title: 'Figure',
  fields: [
    {
      name: 'alt',
      type: 'string',
      title: 'Alternative text',
      description: `Describe the image for people who can't see it`,
      isHighlighted: true
    },
    {
      name: 'caption',
      type: 'string',
      title: 'Caption',
      description: `Text that's displayed with the image`,
      isHighlighted: true
    }
  ],
  options: {
    hotspot: true
  }
}

Simple rich text

// simpleRichText.js
export default {
  name: 'simpleRichText',
  type: 'array',
  title: 'Text',
  of: [
    {
      type: 'block',
      styles: [],
      lists: []
    }
  ]
}

With this schema, you can let editors add a section that contains a heading, some rich text, and an illustration with alternative text and a caption. This is a common pattern in article and landing page layouts, but not restricted to it.

Most times you want the presentation layer and the design system to decide how the text and image should be composed. Alternations between the position of the text and image can be programmed so that editors don't have to figure out this themselves.

I've added a commented-out boolean to select an “alternative position” instead of explicit directions (like “left” and “right”). This makes the content more agnostic to its presentation, more compatible with responsive design (where you don't have horizontal space always), multichannel publishing, and redesigns.

Contributor

Other schemas by author