Library · Content Sections

Value Prop / 3 Col Cards

Centred heading + subheading over photo-topped value cards with small-caps headings. Cards stay on the base surface pair; tone via the shared contract.

Figma: Value Prop / 3 col cards ↗ View Elementor template in 8020 ↗
Live preview — edit theme bottom-right 
---
import ValueProp3ColCards from "../components/figma/ValueProp3ColCards.astro";

const cards = [
  {
    image: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=800&q=60",
    heading: "Extensive Experience",
    body: "With 20+ years of experience, deep knowledge of the market, and clear communication, clients value the steady guidance provided throughout every transaction.",
  },
  {
    image: "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=800&q=60",
    heading: "Skilled Negotiator",
    body: "Experienced, strategic, and calm under pressure — negotiations are handled with clarity and focus to deliver the best possible outcome.",
  },
  {
    image: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=800&q=60",
    heading: "Modern marketing. Traditional service.",
    body: "We blend smart, modern marketing with genuine, old-fashioned service. Effective campaigns, delivered with care and integrity.",
  },
];
---
<ValueProp3ColCards
  title="Real estate, simplified: The Company XYZ difference"
  subheading="Effortless real estate, where clarity and confidence lead the way"
  cards={cards}
  tone="secondary"
/>

Props

NameTypeRequiredDescription
title string Yes Section heading (centred)
subheading string — Small line under the heading
cards ValueCard[] Yes Value cards (design shows 3)
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

<ValueProp3ColCards
  title="Real estate, simplified: The Company XYZ difference"
  subheading="Effortless real estate, where clarity leads the way"
  cards={[
    { image: "/images/team.jpg", heading: "Extensive Experience", body: "…" },
  ]}
  tone="secondary"
/>