Content Block Components

{
  "component": "content-block",
  "variant": "image-right",
  "data": {
    "heading": "Image Right Layout",
    "body": "The most common content block layout with text on the left and a supporting image on the right.",
    "image": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80",
    "features": ["Feature one", "Feature two", "Feature three"],
    "buttons": [{ "text": "Learn More", "url": "#", "style": "primary" }]
  }
}

<section class="py-4">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-lg-6">
        <h3>Image Right Layout</h3>
        <p>The most common content block layout...</p>
        <ul>
          <li>Feature one</li>
          <li>Feature two</li>
        </ul>
        <a href="#" class="btn btn-primary">Learn More</a>
      </div>
      <div class="col-lg-6">
        <img src="..." alt="..." class="img-fluid rounded shadow-sm">
      </div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "image-top",
  "data": {
    "heading": "Full-Width Visual Impact",
    "lead": "Use short copy so narrow previews stay clean.",
    "image": "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2000&q=80"
  }
}

<section class="py-4">
  <!-- Full-width image: no rounded corners -->
  <div class="container-fluid px-0">
    <img src="..." alt="..." class="w-100" style="object-fit: cover; border-radius: 0; max-height: 520px; display:block;">
  </div>
  <div class="container mt-4">
    <div class="row">
      <div class="col-12 col-lg-10 mx-auto text-center">
        <h3>Full-Width Visual Impact</h3>
        <p class="lead">Use short copy so layout stays clean.</p>
      </div>
    </div>
  </div>
</section>

{
  "component": "content-block",
  "variant": "text-only",
  "data": {
    "heading": "Why teams choose PageJSON",
    "body": "Keep items similar length to reduce ragged wrapping.",
    "contentFeatures": [
      { "icon": "fa-check", "text": "Constrained schema keeps output predictable" },
      { "icon": "fa-check", "text": "Tokens standardize spacing and typography" },
      { "icon": "fa-check", "text": "Components render cleanly on small screens" },
      { "icon": "fa-check", "text": "Design stays consistent across pages" }
    ]
  }
}

<!-- Features only: keep items short + similar length -->
<div class="features-list features-left features-simple">
  <div class="feature-item feature-simple">
    <div class="feature-icon icon-1x"><i class="fa-solid fa-check"></i></div>
    <div class="feature-content"><div class="feature-text">Constrained schema keeps output predictable</div></div>
  </div>
  <!-- More features... -->
</div>

{
  "component": "content-block",
  "variant": "text-only",
  "data": {
    "heading": "Make icons feel intentional",
    "lead": "Use subtle discs for rich features — not for compact checklists.",
    "contentFeatures": [
      { "icon": "fa-wand-magic-sparkles", "title": "Polished", "text": "Small disc adds structure without noise.", "iconBg": "primary" },
      { "icon": "fa-shield-halved", "title": "Trustworthy", "text": "Color supports meaning, not decoration.", "iconBg": "success" },
      { "icon": "fa-layer-group", "title": "Consistent", "text": "Same rules across heroes, blocks, CTAs.", "iconBg": "warning" },
      { "icon": "fa-gauge-high", "title": "Responsive", "text": "Grid stays balanced at common widths.", "iconBg": "info" }
    ]
  }
}

<!-- Rich features: icon + title + short text -->
<!-- Disc shorthand: set iconClass: "bg-success" (or iconBg: "success") -->
<div class="features-list features-center features-rich">
  <div class="feature-item feature-rich">
    <div class="feature-icon icon-1-5x icon-disc" data-disc="success">
      <i class="fa-solid fa-shield-halved"></i>
    </div>
    <div class="feature-content">
      <div class="feature-title">Trustworthy</div>
      <div class="feature-text">Color supports meaning, not decoration.</div>
    </div>
  </div>
</div>

{
  "component": "content-block",
  "variant": "text-only",
  "data": {
    "heading": "Trusted signals, kept simple",
    "lead": "Three short items are usually enough.",
    "trustSignals": [
      { "text": "SEO-ready markup included" },
      { "text": "Responsive by default" },
      { "text": "Bootstrap 5 compatible" }
    ]
  }
}

<!-- Trust only: short text + default green check icons -->
<div class="trust-signals">
  <div class="trust-signals-list align-center">
    <div class="trust-signal"><i class="fa-solid fa-check-circle"></i><span>SEO-ready markup included</span></div>
    <div class="trust-signal"><i class="fa-solid fa-check-circle"></i><span>Responsive by default</span></div>
    <div class="trust-signal"><i class="fa-solid fa-check-circle"></i><span>Bootstrap 5 compatible</span></div>
  </div>
</div>