Components / Website

Feature Split

A stepped two-column interlock layout. Visual slots accept Infographic pairs or custom compositions.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/feature-split/registry.json

Also installs the infographic dependency.

Default example

Defaults to InfographicChartPair and InfographicEditorPair.

Default layout · sample copy

Made for your data team

SQL, R, Python and data viz connected in one place: so insights reach stakeholders faster than ever. No rigid data model should stand in the way of the analysis needed to support business decisions, big and small.

Faceted Combo

Rows

Columns

Layers

SQL Editor

12345

SQL▼

Python 3.7

Python 2.7

SQL

And the teams you work with

Deliver tools for easy, trusted self-service, in record time. When every analytical tool lives in one place, your platform becomes a central hub full of easy-to-understand data, curated by the data team, without long implementation times or tedious maintenance.

tsx

import { FeatureSplit, FEATURE_SPLIT_DEFAULT } from "@/components/ui/feature-split"

// Defaults to InfographicChartPair + InfographicEditorPair
export function DataTeamFeature() {
  return <FeatureSplit {...FEATURE_SPLIT_DEFAULT} />
}

Instant Strata

Strata copy with InfographicReports and InfographicAi.

Instant Strata · adapted copy + infographics

Made for your strata team

In Instant Strata, levies, maintenance, compliance and owner communications are all connected to help you manage every scheme faster than ever. No rigid legacy system should stand in the way of the work needed to keep buildings running smoothly, day in and day out.

Reports

AGM Pack

Levy Notice

Audit Summary

AI Assist

Draft AGM minutes from last meeting notes…

Send noticeSchedule AGM

And the owners you support

Deliver a portal for easy, trusted self-service, in record time. Because every owner's questions, notices and payments can live in one place, Instant Strata becomes a central hub full of easy-to-understand building information, curated by your team, without long onboarding or tedious admin.

tsx

import { FeatureSplit, FEATURE_SPLIT_STRATA } from "@/components/ui/feature-split"
import { InfographicReports, InfographicAi } from "@/components/ui/infographic"

export function StrataFeature() {
  return (
    <FeatureSplit
      {...FEATURE_SPLIT_STRATA}
      topVisual={<InfographicReports />}
      bottomVisual={<InfographicAi />}
    />
  )
}

Layout anatomy

QuadrantToneContent

Top-leftcream (#EEF2E3)primary.heading + primary.body

Top-rightlime (#C8F169)topVisual: Infographic pair, bleeds left

Bottom-leftcream (#EEF2E3)bottomVisual: Infographic pair, bleeds right

Bottom-rightlime (#C8F169)secondary.heading + secondary.body

Custom infographics

tsx

import { FeatureSplit } from "@/components/ui/feature-split"
import {
  InfographicChartPair,
  InfographicEditorPair,
  InfographicAi,
  InfographicWorkflow,
  InfographicRow,
} from "@/components/ui/infographic"

<FeatureSplit
  primary={{ heading: "…", body: "…" }}
  secondary={{ heading: "…", body: "…" }}
  topVisual={<InfographicChartPair />}
  bottomVisual={
    <InfographicRow>
      <InfographicAi />
      <InfographicWorkflow />
    </InfographicRow>
  }
/>

FeatureSplit Props

Prop	Type	Default	Description
primary	{ heading: string; body: string }	-	Top-left copy block: heading in Young Serif, body in Inter.
secondary	{ heading: string; body: string }	-	Bottom-right copy block.
topVisual	ReactNode	-	Top-right visual slot. Defaults to InfographicChartPair.
bottomVisual	ReactNode	-	Bottom-left visual slot. Defaults to InfographicEditorPair.
gap	"sm" \| "md" \| "lg"	"md"	Gap between quadrants: also the visible forest-green seam width.