FeatureSplit

A component for displaying a list of features alongside an image, with customizable positioning.

Component Preview

Props

Prop	Type	Description
items	FeatureSplitItem[]	Array of feature items to display.
image	object	Image object with imageSrc and alt properties.
title	string	Optional title for the section.
subtitle	string	Optional subtitle or description text.
imagePosition	'left' | 'right' | 'top'	Position of the image relative to content. Default: 'right'.
actionLabel	string	Optional label for a call-to-action button.
href	string	Optional URL for the call-to-action button.
className	string	Optional CSS class name for the wrapper.
inverted	boolean	Whether to use inverted theme colors. Default: false.

FeatureSplitItem Interface

Property	Type	Description
title	string	Title of the feature item.
description	string	Description text for the feature.
icon	string	Optional Iconify icon name.

JSON Data Example

{
  "type": "FeatureSplit",
  "data": {
    "title": "Experience the difference",
    "subtitle": "Our platform provides everything you need to scale your business efficiently.",
    "imagePosition": "right",
    "image": {
      "imageSrc": "https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80",
      "alt": "Team working together"
    },
    "items": [
      {
        "icon": "mdi:speedometer",
        "title": "Lightning Fast",
        "subtitle": "Deploy in seconds, not minutes. Global edge network ensures low latency."
      },
      {
        "icon": "mdi:shield-check",
        "title": "Secure by Default",
        "subtitle": "Enterprise-grade security with automatic SSL and DDoS protection."
      },
      {
        "icon": "mdi:chart-box",
        "title": "Real-time Analytics",
        "subtitle": "Gain insights into your traffic and user behavior instantly."
      }
    ]
  }
}