Card Grid Components

{
  "component": "card-grid",
  "variant": "service-cards",
  "data": {
    "heading": "Service Cards",
    "subheading": "Showcase services with images and descriptions",
    "columns": 3,
    "cards": [
      {
        "image": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80",
        "heading": "Schema-first components",
        "body": "Cards, heroes, and blocks that stay clean on narrow layouts. Great defaults so AI doesn’t need design taste to get good output.",
        "button": { "text": "View Components", "url": "/components", "style": "outline-primary" }
      },
      {
        "image": "https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1200&q=80",
        "heading": "Smart UI defaults",
        "body": "Spacing, typography, and responsive grids are built-in. Keep copy short and consistent and the component will do the rest.",
        "button": { "text": "Read the Docs", "url": "/docs", "style": "outline-primary" }
      },
      {
        "image": "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
        "heading": "Production-friendly output",
        "body": "Stable HTML with Bootstrap 5.3 utilities. Easy to theme, easy to extend, and predictable when generated by AI.",
        "button": { "text": "Start a Page", "url": "/docs/quick-start", "style": "outline-primary" }
      }
    ]
  }
}

{
  "component": "card-grid",
  "variant": "accent-border",
  "data": {
    "heading": "Accent Border Cards",
    "columns": 3,
    "cards": [
      { "accent": "success", "heading": "Quality Assured", "body": "Clear structure and sensible defaults keep output consistent across pages and viewports.", "button": { "text": "Standards", "url": "#", "style": "outline-primary" } },
      { "accent": "warning", "heading": "Fast Turnaround", "body": "Ship new pages quickly with predictable JSON and reusable component variants.", "button": { "text": "Lead Times", "url": "#", "style": "outline-primary" } },
      { "accent": "info", "heading": "Expert Support", "body": "Keep cards tidy with short copy and matching lengths so the grid stays balanced.", "button": { "text": "Contact", "url": "#", "style": "outline-primary" } }
    ]
  }
}

{
  "component": "card-grid",
  "variant": "dark-cards",
  "data": {
    "heading": "Dark Cards",
    "subheading": "High contrast for visual impact",
    "columns": 3,
    "cards": [
      { "heading": "Premium Finishes", "body": "From chrome to gold, we offer a full range of finishes." },
      { "heading": "Nationwide Service", "body": "Collection and delivery across the UK." },
      { "heading": "Heritage Restoration", "body": "Specialist restoration for antique metalwork." }
    ],
    "bg": "light"
  }
}

{
  "component": "card-grid",
  "variant": "icon-cards",
  "data": {
    "heading": "Icon Cards",
    "subheading": "Highlight features with icons",
    "columns": 4,
    "cards": [
      { "icon": "fa-award", "iconBg": "success", "heading": "ISO Certified", "body": "Quality assured to international standards." },
      { "icon": "fa-clock", "iconBg": "warning", "heading": "40+ Years", "body": "Decades of industry expertise." },
      { "icon": "fa-truck", "iconBg": "primary", "heading": "UK-Wide", "body": "Collection and delivery nationwide." },
      { "icon": "fa-star", "iconBg": "info", "heading": "4.3★ Rated", "body": "Highly rated on Google reviews." }
    ]
  }
}

{
  "component": "card-grid",
  "variant": "horizontal",
  "data": {
    "heading": "Horizontal Cards",
    "columns": 2,
    "cards": [
      {
        "image": "https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1400&q=80",
        "heading": "Hotel Metal Refinishing",
        "body": "Comprehensive restoration services for hotels including bathroom fixtures, door hardware, and decorative elements.",
        "button": { "text": "Learn More", "url": "#", "style": "primary" }
      },
      {
        "image": "https://images.unsplash.com/photo-1523413651479-597eb2da0ad6?auto=format&fit=crop&w=1400&q=80",
        "heading": "Architectural Metalwork",
        "body": "Bespoke finishes for architects and designers. Custom colors and textures available.",
        "button": { "text": "Learn More", "url": "#", "style": "primary" }
      }
    ]
  }
}

{
  "component": "card-grid",
  "variant": "text-only",
  "data": {
    "heading": "Text Only Cards",
    "subheading": "Clean and minimal for text-focused content",
    "columns": 3,
    "cards": [
      { "heading": "Consultation", "body": "Free initial consultation to discuss your requirements and recommend the best finish." },
      { "heading": "Quotation", "body": "Detailed written quotation with no hidden costs or surprises." },
      { "heading": "Delivery", "body": "Careful packaging and delivery to your specified location." }
    ],
    "bg": "light"
  }
}