Library · Content Sections

Value Prop / Icon Boxes

Heading + intro over outlined boxes with primary icon tiles and small-caps headings. Icons come from the src/icons/ set by name. Tone via the shared contract.

Figma: Value Prop / icon boxes ↗ View Elementor template in 8020 ↗
Live preview — edit theme bottom-right 
---
import ValuePropIconBoxes from "../components/figma/ValuePropIconBoxes.astro";

const items = [
  {
    icon: "star",
    heading: "Local Expertise",
    body: "Deep knowledge of the Brisbane market means tailored advice, accurate pricing, and insights that only come from real, on-the-ground experience.",
  },
  {
    icon: "external-link",
    heading: "Award-Winning Performance",
    body: "Recognised for outstanding results, with a strong work ethic and a commitment to going above and beyond to exceed client expectations.",
  },
  {
    icon: "mail",
    heading: "Modern marketing. Traditional service.",
    body: "We blend smart, modern marketing with genuine, old-fashioned service. It's the best of both worlds — effective campaigns, delivered with care and integrity.",
  },
];
---
<ValuePropIconBoxes
  title="We're here to guide you every step of the way"
  intro="With clear communication, a friendly smile, and a genuine commitment to achieving the best possible outcome for you."
  items={items}
/>

Props

NameTypeRequiredDescription
title string Yes Section heading (left)
intro string — Short intro paragraph (right of the heading)
items IconBox[] Yes Icon boxes (design shows 3 per row)
level 'h2' | 'h3' — Semantic heading level (default: 'h2')
tone "base-100" | "base-200" | "base-300" | "primary" | "secondary" | "neutral" — Background tone — the Figma colour-variant axis

Example with all props

<ValuePropIconBoxes
  title="We're here to guide you every step of the way"
  intro="With clear communication and a genuine commitment to the best outcome."
  items={[
    { icon: "star", heading: "Local Expertise", body: "…" },
  ]}
/>