Heading
Descriptive text
Image and text
Use image and text when you need paired image and rich text in a two-column layout.
Live demo
Visitors read body copy next to a visual that supports the message. Content authors keep headings and paragraphs in the text area and treat the image as illustration, not the only place for critical information. Visual designers balance image width and position so the block stays legible when columns stack on mobile.
Behaviour
- Image position controls which column appears first and how text wraps.
- No-wrap and width options change float behaviour and maximum image width.
- On small screens, full-width settings can stack the image and text.
Anatomy
- Row with text column and image column (or stacked).
- Rich text body.
- Image with optional link and target.
Replace with left, right, and stacked mobile examples.
Content guidelines
- Put essential facts in the text column, not only in the image.
- Alt text on the image subresource should match the photo’s role on the page.
Best practices
Do
- Keep copy concise beside images; long text should go below the block in WYSIWYG.
Don't
- Don't use centre image with very wide text without checking line length.
When to use
- Editorial sections with a photo and copy of similar importance.
When not to use
- Hero-level visuals; use Hero or Offset block.
CRXDE Lite query
Use this query in CRXDE Lite to find instances of this component.
/jcr:root/content//*[@sling:resourceType = 'concordia/components/textimage/textimage.jsp']Technical behaviour
textimage.jsp mirrors Image link handling for image/linkURL. Column widths adjust from image/width (pixel max width or auto). imgPosition controls order (left default, right, center). noWrap changes float behaviour for text flow. fullWidth stacks image on small screens per classes.
Authoring fields
| Field | Purpose |
|---|---|
| Text | RTE HTML. |
| Image | Subresource with DAM path, alt, link. |
| Position | Left, right, centre. |
| Width / round / nowrap | Layout refinements. |
Instances in the codebase
| Location | Notes |
|---|---|
apps/concordia/components/textimage/textimage.jsp | Implementation. |
| Item | Location |
|---|---|
| Component | apps/concordia/components/textimage/textimage.jsp |