Variant: list

Simple icon + label + value rows. Clean and scannable for 5–10 specs.

Chrome Plating Specifications

Technical details for decorative chrome

Hardness

800-1000 HV

Thickness

0.25-0.75 microns

Temperature Range

-40°C to +250°C

Corrosion Resistance

Excellent

Finish Type

Mirror / Satin / Brushed

Lead Time

5-10 working days

{
  "component": "specifications",
  "variant": "list",
  "data": {
    "heading": "Chrome Plating Specifications",
    "subheading": "Technical details for decorative chrome",
    "specs": [
      { "label": "Hardness", "value": "800-1000 HV", "icon": "fa-diamond" },
      { "label": "Thickness", "value": "0.25-0.75 microns", "icon": "fa-ruler-vertical" },
      { "label": "Temperature Range", "value": "-40°C to +250°C", "icon": "fa-temperature-half" },
      { "label": "Corrosion Resistance", "value": "Excellent", "icon": "fa-shield" },
      { "label": "Finish Type", "value": "Mirror / Satin / Brushed", "icon": "fa-sparkles" },
      { "label": "Lead Time", "value": "5-10 working days", "icon": "fa-clock" }
    ]
  }
}

<section class="specifications py-5">
  <div class="container">
    <!-- Spec list -->
  </div>
</section>

Variant: grouped

Specs grouped in cards by category. Best for complex spec sets.

Hard Chrome Plating Specifications

Performance

Hardness 850-1050 HV

Wear Resistance Excellent

Friction Coefficient 0.12-0.16

Dimensions

Max Part Length 2.5 metres

Max Part Diameter 500mm

Thickness Range 2.5-500 microns

Environment

Operating Temp -40°C to +400°C

Chemical Resistance High

Salt Spray Test 500+ hours

{
  "component": "specifications",
  "variant": "grouped",
  "data": {
    "heading": "Hard Chrome Plating Specifications",
    "groups": [
      {
        "name": "Performance",
        "icon": "fa-gauge-high",
        "specs": [
          { "label": "Hardness", "value": "850-1050 HV", "bar": 95 },
          { "label": "Wear Resistance", "value": "Excellent", "bar": 90 },
          { "label": "Friction Coefficient", "value": "0.12-0.16", "bar": 85 }
        ]
      },
      {
        "name": "Dimensions",
        "icon": "fa-ruler-combined",
        "specs": [
          { "label": "Max Part Length", "value": "2.5 metres" },
          { "label": "Max Part Diameter", "value": "500mm" },
          { "label": "Thickness Range", "value": "2.5-500 microns" }
        ]
      },
      {
        "name": "Environment",
        "icon": "fa-leaf",
        "specs": [
          { "label": "Operating Temp", "value": "-40°C to +400°C" },
          { "label": "Chemical Resistance", "value": "High" },
          { "label": "Salt Spray Test", "value": "500+ hours" }
        ]
      }
    ],
    "bg": "light"
  }
}

<section class="specifications bg-light py-5">
  <div class="container">
    <!-- Grouped spec cards -->
  </div>
</section>

Variant: visual

Progress bars for relative metrics. Great for performance characteristics.

Performance Metrics

Chrome plating performance characteristics

Hardness

950 HV

Vickers hardness rating

Corrosion Resistance

Excellent

Salt spray test 500+ hours

Wear Resistance

Very High

Ideal for high-friction applications

Adhesion

Superior

Bonded at molecular level

Reflectivity

Mirror

65%+ light reflectance

Chemical Resistance

High

Resistant to most chemicals

{
  "component": "specifications",
  "variant": "visual",
  "data": {
    "heading": "Performance Metrics",
    "subheading": "Chrome plating performance characteristics",
    "specs": [
      { "label": "Hardness", "value": "950 HV", "icon": "fa-diamond", "bar": 95, "description": "Vickers hardness rating" },
      { "label": "Corrosion Resistance", "value": "Excellent", "icon": "fa-shield", "bar": 90, "description": "Salt spray test 500+ hours" },
      { "label": "Wear Resistance", "value": "Very High", "icon": "fa-gears", "bar": 88, "description": "Ideal for high-friction applications" },
      { "label": "Adhesion", "value": "Superior", "icon": "fa-link", "bar": 92, "description": "Bonded at molecular level" },
      { "label": "Reflectivity", "value": "Mirror", "icon": "fa-sun", "bar": 98, "description": "65%+ light reflectance" },
      { "label": "Chemical Resistance", "value": "High", "icon": "fa-flask", "bar": 85, "description": "Resistant to most chemicals" }
    ]
  }
}

<section class="specifications py-5">
  <div class="container">
    <!-- Visual specs (bars) -->
  </div>
</section>

Variant: table

Traditional table layout for dense technical data. Use this for a single spec set (not a finish comparison).

Technical Specifications

A dense spec table for one service

Specification	Value
Hardness (HV)	800–1000
Thickness (microns)	0.25–0.75
Corrosion Resistance	Excellent
Max Part Size	2m × 1m × 0.5m
Finish Options	Mirror / Satin / Brushed
Typical Lead Time	5–10 working days

{
  "component": "specifications",
  "variant": "table",
  "data": {
    "heading": "Technical Specifications",
    "subheading": "A dense spec table for one service",
    "columns": ["Specification", "Value"],
    "rows": [
      ["Hardness (HV)", "800–1000"],
      ["Thickness (microns)", "0.25–0.75"],
      ["Corrosion Resistance", "Excellent"],
      ["Max Part Size", "2m × 1m × 0.5m"],
      ["Finish Options", "Mirror / Satin / Brushed"],
      ["Typical Lead Time", "5–10 working days"]
    ],
    "bg": "light"
  }
}

<section class="specifications bg-light py-5">
  <div class="container">
    <!-- Spec table -->
  </div>
</section>

Dark background example

Specifications work on dark backgrounds with automatic contrast.

Service Specifications

Turnaround Time

5-10 days

Nationwide Delivery

Included

Quality Certification

ISO 9001

Experience

40+ Years

{
  "component": "specifications",
  "variant": "list",
  "data": {
    "heading": "Service Specifications",
    "specs": [
      { "label": "Turnaround Time", "value": "5-10 days", "icon": "fa-clock" },
      { "label": "Nationwide Delivery", "value": "Included", "icon": "fa-truck" },
      { "label": "Quality Certification", "value": "ISO 9001", "icon": "fa-certificate" },
      { "label": "Experience", "value": "40+ Years", "icon": "fa-award" }
    ],
    "bg": "green"
  }
}

<section class="specifications bg-green py-5">
  <div class="container">
    <!-- Spec list on dark background -->
  </div>
</section>

Components

Specifications Components