Skip to main content

Image with text block

What is the Image with text block for?

The image shows. The copy explains. Image with text works when the two sides add something to each other. The visual can show a product, location, detail or result, while the copy explains what visitors should notice.

You can control the image size, aspect ratio and side, the gap between the two columns and the mobile order separately. The text is not limited to plain paragraphs either: use bold, italics, headings, lists, quotations, links, and size or colour emphasis on selected text.

How much space should the image get?

Image size controls how much visual weight it carries beside the copy.

Small

Use it when the copy leads and the image only adds a detail or visual anchor.

Medium

A strong general default when image and copy should carry similar weight.

Large

Use it when the image proves something, shows a detail or carries an important part of the story.

Extra large

Use it when the visual dominates and the text is mainly a short interpretation.

Close-up of details on a hand-carved walnut object.
Example: small image · square aspect ratio · image on the left · tight gap.

Small image — when the copy leads

A smaller image breaks up the text and shows a concrete detail without stealing focus. It works well for introductions, explanatory sections or lighter illustration.

A potter's hands shaping clay while working.
Example: medium image · classic aspect ratio · image on the right · normal gap. Copy uses bold, italics and a list.

Medium image — a balanced default

Medium is a dependable starting point in most situations: the image gets meaningful attention while the text stays comfortable to read.

  • Useful for an introduction, where image and copy matter equally.
  • Works well for a product, location or short service explanation.
  • Use a list when several details should be easy to scan.
A woodworker working on timber in a workshop.
Example: large image · portrait aspect ratio · image on the right · wide gap. Copy uses accent colour and a quotation.

Large image — when the visual provides evidence

If quality, material, the person or the result is easiest to understand in the image, give it more room. Portrait aspect ratios work especially well for vertical subjects.

A good image does not merely illustrate the point. It adds something to it.

You can also use colour emphasis and a quotation when one thought deserves more visual weight.

A bright, spacious workshop with a large wooden worktable.
Example: extra-large image · landscape aspect ratio · image on the left · full-width band. Copy uses a larger text size, numbered list and link.

Extra-large image — when the visual carries the section

Extra large works when the image contains a lot of useful information on its own. Keep the accompanying text short and clearly structured.

  1. Say briefly what we are looking at.
  2. Explain why it matters.
  3. When useful, add a link to related content.

Simple rule of thumb: if the image only creates atmosphere, do not give it too much room. If it proves something, shows a detail or helps explain the point, make it more prominent. On mobile, you can choose whether image or text appears first. ALT text describes what is visible; the caption provides visible context, so do not use the same sentence for both.

What can you configure in the Image with text block?

From visual weight and text formatting to mobile order, every important decision can be controlled separately.

Image size

Small, medium, large or extra large controls how much room the image receives beside the copy.

Aspect ratio

Original, landscape, classic, square or portrait. Choose the ratio that suits the subject.

Image position and mobile order

Place the image left or right, then choose separately whether image or text appears first on mobile.

Gap

Tight, normal or wide controls how closely the image and copy sit together.

Text formatting

Use headings, bold, italics, lists, quotations, links, font-size emphasis and colour emphasis on selected text.

ALT text and caption

ALT text is the accessible image description; the caption is visible supporting context for visitors.

When should you choose another block?

Ask whether the image stands alone, forms a pair with copy, or belongs to a set of equal items.

Image →

Use it when the visual is the main content and does not need a longer explanation beside it.

Hero · split →

Use it when the image-and-copy pairing belongs in the first, high-emphasis opening block of the page.

Image with hotspots →

Use it when several details inside one image each need their own explanation.

IMAGE AND COPY TOGETHER

Show something concrete, then explain why it matters.

A strong image-and-copy pair does not repeat itself: the visual shows, the words interpret.

Build my website →Back to Website Blocks