Skip to main content
Components

Comparison Components

Comparison table example (tabbed preview + JSON).

Variant: table

Traditional comparison table for 3+ items with many features. Highlight one column with `highlightIndex`.

Plating Options Comparison

Compare our most popular finishes

Feature Nickel Recommended
Chrome 		Gold
Hardness 500-700 HV 800-1000 HV 60-100 HV
Corrosion Resistance Excellent High Excellent
Appearance Warm Silver Mirror Finish Rich Gold
Cost $ $$ $$$
Lead Time 3-5 days 5-10 days 7-14 days
Best For Industrial, Base Coat Decorative, Wear Luxury, Electrical
Get Quote Get Quote Get Quote 
{
  "component": "comparison",
  "variant": "table",
  "data": {
    "heading": "Plating Options Comparison",
    "subheading": "Compare our most popular finishes",
    "highlightIndex": 1,
    "features": ["Hardness", "Corrosion Resistance", "Appearance", "Cost", "Lead Time", "Best For"],
    "items": [
      {
        "name": "Nickel",
        "features": {
          "Hardness": "500-700 HV",
          "Corrosion Resistance": "Excellent",
          "Appearance": "Warm Silver",
          "Cost": "$",
          "Lead Time": "3-5 days",
          "Best For": "Industrial, Base Coat"
        },
        "cta": { "text": "Get Quote", "url": "/contact" }
      },
      {
        "name": "Chrome",
        "badge": "Recommended",
        "features": {
          "Hardness": "800-1000 HV",
          "Corrosion Resistance": "High",
          "Appearance": "Mirror Finish",
          "Cost": "$$",
          "Lead Time": "5-10 days",
          "Best For": "Decorative, Wear"
        },
        "cta": { "text": "Get Quote", "url": "/contact" }
      },
      {
        "name": "Gold",
        "features": {
          "Hardness": "60-100 HV",
          "Corrosion Resistance": "Excellent",
          "Appearance": "Rich Gold",
          "Cost": "$$$",
          "Lead Time": "7-14 days",
          "Best For": "Luxury, Electrical"
        },
        "cta": { "text": "Get Quote", "url": "/contact" }
      }
    ],
    "bg": "light"
  }
}
<section class="comparison bg-light py-5">
  <div class="container">
    <!-- Comparison table -->
  </div>
</section>