Library · Content Sections

Two Column

Media + text section — image left or right (side) with three image treatments (fit: standard / filled / stretched). Eyebrow + heading + optional CTA are props; body copy in the default slot. One component consolidating the six Figma Two Column sets. Tone via the shared contract.

Figma: Two Column / Image left ↗ View Elementor template in 8020 ↗

Default

---
import TwoColumn from "../components/figma/TwoColumn.astro";
---
<TwoColumn
  image="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1200&q=60"
  imageAlt="Bright open-plan living room"
  title="Local expertise, backed by a national network"
  ctaLabel="Learn more"
  ctaUrl="#"
  tone="base-200"
>
  <p>
    We pair on-the-ground knowledge of your suburb with the reach of a national
    network — so your property is seen by the right buyers, and priced with real
    market evidence behind it.
  </p>
  <p>Straightforward advice, clear communication, and a result you can trust.</p>
</TwoColumn>

Filled

---
import TwoColumn from "../components/figma/TwoColumn.astro";
---
<TwoColumn
  image="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1200&q=60"
  imageAlt="Interior stairwell with natural light"
  fit="filled"
  title="A bold half-and-half split"
  ctaLabel="See how we work"
  ctaUrl="#"
  tone="secondary"
>
  <p>
    The <code>filled</code> treatment makes both columns the same height and
    lets the photo cover its whole cell — useful when the copy is short and you
    want a solid, balanced block.
  </p>
</TwoColumn>

Image Right

---
import TwoColumn from "../components/figma/TwoColumn.astro";
---
<TwoColumn
  image="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1200&q=60"
  imageAlt="Modern house exterior at dusk"
  side="right"
  title="A selling experience built around you"
  tone="base-100"
>
  <p>
    From the first appraisal to settlement day, one team stays with you — no
    handoffs, no surprises, just steady progress toward the best possible price.
  </p>
</TwoColumn>

Stretched

---
import TwoColumn from "../components/figma/TwoColumn.astro";
---
<TwoColumn
  image="https://images.unsplash.com/photo-1613977257363-707ba9348227?w=1400&q=60"
  imageAlt="Coastal property with ocean view"
  side="right"
  fit="stretched"
  title="The image runs to the edge of the screen"
  tone="neutral"
>
  <p>
    The <code>stretched</code> treatment lets the photo bleed to the viewport
    edge on its side while the copy stays within the content width — a bolder,
    more editorial layout.
  </p>
</TwoColumn>

Props

Name	Type	Required	Description
`image`	`string`	Yes	Image URL (plain/CMS; local optimised assets can be swapped in later)
`imageAlt`	`string`	—	Image alt text (pass "" only for decorative)
`side`	`'left' \| 'right'`	—	Which side the image sits on (default: 'left')
`fit`	`'standard' \| 'filled' \| 'stretched'`	—	Image treatment — contained block / full-bleed half / edge-flush column (default: 'standard')
`title`	`string`	Yes	Section heading (H3 text style)
`level`	`'h1' \| 'h2' \| 'h3'`	—	Semantic heading level (visual style stays H3) (default: 'h2')
`ctaLabel`	`string`	—	CTA label — omit for no button
`ctaUrl`	`string`	—	CTA link target (default: '#')
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral"`	—	Background tone — the Figma colour-variant axis
`(slot)`	`children`	—	Body copy (rich text / prose).

Example with all props

<TwoColumn
  image="/images/lounge.jpg"
  imageAlt="Open-plan living area"
  side="left"
  fit="standard"
  title="Local expertise, backed by a national network"
  ctaLabel="Learn more"
  ctaUrl="/about"
  tone="base-200"
>
  <p>Body copy goes in the default slot.</p>
</TwoColumn>