Library · Content Sections

One Column

Centred single-column text block — H3 heading + body copy, centre-aligned, on a full-width toned band. size sets the content width (xl 1170 / l 970 / m 770 / s 570). One component consolidating the four Figma One column sets. Tone via the shared contract.

Figma: One column / Large ↗ View Elementor template in 8020 ↗

Default

---
import OneColumn from "../components/figma/OneColumn.astro";
---
<OneColumn title="Real estate, done properly" size="l" tone="base-200">
  <p>
    We keep it simple: honest advice, clear communication, and a relentless focus
    on the result. From first appraisal to settlement, one team stays with you the
    whole way.
  </p>
</OneColumn>

Medium

---
import OneColumn from "../components/figma/OneColumn.astro";
---
<OneColumn title="A comfortable measure — Medium" size="m" tone="primary">
  <p>Medium holds the column to 770px — an easy reading width for a short statement.</p>
</OneColumn>

Small

---
import OneColumn from "../components/figma/OneColumn.astro";
---
<OneColumn title="Tight and punchy — Small" size="s" tone="neutral">
  <p>Small caps the column at 570px for a compact, centred callout.</p>
</OneColumn>

---
import OneColumn from "../components/figma/OneColumn.astro";
---
<OneColumn title="The widest measure — XL" size="xl" tone="base-100">
  <p>
    XL holds the content to 1170px — the right width for a full-bleed intro band
    where the copy carries the section on its own.
  </p>
</OneColumn>

Props

Name	Type	Required	Description
`title`	`string`	Yes	Heading (H3 text style)
`size`	`'xl' \| 'l' \| 'm' \| 's'`	—	Content column width — XL 1170 / L 970 / M 770 / S 570 (default: 'l')
`level`	`'h1' \| 'h2' \| 'h3'`	—	Semantic heading level (visual style stays H3) (default: 'h2')
`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

<OneColumn
  title="One clear message, centred"
  size="l"
  tone="base-200"
>
  <p>Body copy goes in the default slot.</p>
</OneColumn>