Block Documentation

Image & Text Block

Side-by-side layout with an image on one side and rich text content on the other. Perfect for feature highlights, about sections, and product descriptions.

Usage

The Image & Text block is ideal for:

  • Feature highlights and benefits
  • About us sections
  • Product descriptions
  • Service explanations
  • Team member profiles
  • Case study introductions

You can configure which side the image appears on, adjust the size ratio between image and text, and control vertical alignment.

Examples

Here are examples of Image & Text blocks with different configurations:

Image on Left, Equal Split (50/50)

Example feature image

Feature Highlight

This is an example of an Image & Text block with the image on the left side. The layout uses an equal 50/50 split, giving both the image and text equal space.

This configuration works well for balanced presentations where both visual and textual content are equally important.

  • Perfect for feature highlights
  • Great for product descriptions
  • Ideal for service explanations

Image on Right, Image Smaller (40/60)

Example portrait image

Text-Focused Layout

When text is the primary focus, use the "Image Smaller" option to give more space to your content. This creates a 40/60 split favoring the text side.

This layout is perfect for:

  • Detailed explanations
  • Long-form content with supporting visuals
  • Articles with illustrations
  • Documentation with screenshots

The image serves as a visual complement rather than the main focus, allowing readers to concentrate on the textual information.

Image on Left, Image Larger (60/40)

Example visual-heavy content

Visual-Focused Layout

For visual-heavy content, use the "Image Larger" option to give more prominence to your images. This creates a 60/40 split favoring the image side.

This works great for:

  • Portfolio showcases
  • Product galleries
  • Visual storytelling
  • Infographics with descriptions

Without Heading, Bottom Aligned

Example without heading

You can also use the Image & Text block without a heading. This creates a cleaner, more minimal look.

Vertical alignment options allow you to control how the content aligns:

  • Top: Aligns content to the top
  • Center: Centers content vertically (default)
  • Bottom: Aligns content to the bottom

In this example, we're using bottom alignment to demonstrate how it affects the layout.

Alternating Layouts

For visual rhythm, alternate between left and right image positions across multiple Image & Text blocks:

First alternating example

First Section

This block has the image on the left. Notice how it creates a visual flow when combined with the next block.

Second alternating example

Second Section

This block has the image on the right, creating a zigzag pattern that keeps readers engaged as they scroll.

Third alternating example

Third Section

And back to the left again. This alternating pattern creates visual interest and helps break up long-form content.