MediaText

A content-level split layout pairing an image with text content. Distinct from Hero and CallToAction which are section-level components. Supports reversible order, vertical alignment, and three split ratios.

File: src/core/components/ui/MediaText.astro

Props

Prop	Type	Default	Notes
image	{ src: string; alt: string }	required	Image source and alt text
reverse	boolean	false	Flips image/text order
verticalAlign	"start" | "center" | "end"	"center"	Vertical alignment of content
split	"equal" | "wide-media" | "wide-content"	"equal"	Column width ratio
class	string	—	Additional CSS classes

Usage

---
import MediaText from "@core/components/ui/MediaText.astro";
---

{/* Default: image left, text right, equal split */}
<MediaText image={{ src: "/images/photo.jpg", alt: "Description" }}>
  <h3>Heading</h3>
  <p>Text content alongside the image.</p>
</MediaText>

{/* Reversed: text left, image right */}
<MediaText image={{ src: "/images/photo.jpg", alt: "Description" }} reverse>
  <h3>Reversed Layout</h3>
  <p>Image appears on the right.</p>
</MediaText>

{/* Wide content split */}
<MediaText
  image={{ src: "/images/photo.jpg", alt: "Description" }}
  split="wide-content"
  verticalAlign="start"
>
  <h3>More Text Space</h3>
  <p>Content column is wider than the image column.</p>
</MediaText>

Accessibility

• Image uses the provided alt text for screen reader accessibility.
• Stacks to a single column on mobile (image above text) regardless of reverse setting.
• No keyboard interaction required — purely presentational layout.