Feature-page blocks, Conduction Design System

FeatureHero + BenefitRow + Checklist + PairsRow · four building blocks of product-pages/features.html

FeatureHero · cobalt-50 panel with a 3px cobalt left rail

Typed schemas and registers are how Open Register turns a Nextcloud install into a workspace. Every record knows what it is, every list knows what it's listing, every API call returns the same shape.

BenefitRow · three white tiles with hex bullet

Typed at rest Records live as JSON validated against a schema. Bad shapes never get written.

Typed in flight REST + GraphQL responses are derived from the schema. Same shape end-to-end.

Typed in the UI Forms, tables, and detail views render from the schema. No hand-built fields.

Checklist · two-column mint hex bullet list

JSON Schema 2020-12 draft
Polymorphism via oneOf
Computed properties
Inheritance via $ref
Per-property RBAC
Indexed search
Versioned migrations
Audit trail per object

PairsRow · "pairs well with" tile row

OpenCatalogiFederated registry of schemas

OpenConnectorExternal-system bridges

DocuDeskDocument templating + signing

Mount in MDX as <FeatureHero/>, <BenefitRow/>, <Checklist/>, <PairsRow/>

The four building blocks of the product-pages feature template. Each is independently usable, but they're meant to be composed top-to-bottom on a single product page: hero quote pulls the visitor in, benefit row gives the three-up case, checklist lays out the spec, pairs row sells the integrations.

Import & example

import {FeatureHero, BenefitRow, Benefit, Checklist, PairsRow, PairTile} from '@conduction/docusaurus-preset/components'; <FeatureHero> Typed schemas and registers are how Open Register turns a Nextcloud install into a workspace. </FeatureHero> <BenefitRow> <Benefit title="Typed at rest">Records live as JSON validated against a schema.</Benefit> <Benefit title="Typed in flight">REST + GraphQL responses are derived from the schema.</Benefit> <Benefit title="Typed in the UI">Forms, tables, and detail views render from the schema.</Benefit> </BenefitRow> <Checklist> - JSON Schema 2020-12 draft - Polymorphism via `oneOf` - Computed properties </Checklist> <PairsRow> <PairTile title="OpenCatalogi" subtitle="Federated registry of schemas" href="/apps/opencatalogi" /> <PairTile title="OpenConnector" subtitle="External-system bridges" href="/apps/openconnector" /> </PairsRow>

Props

FeatureHero — takes children (an inline paragraph or two)

BenefitRow — takes columns (2 or 3, default 3) and <Benefit/> children with title + body

Checklist — takes an MDX <ul> as children; renders as a 2-column hex-bullet list (1 column under 700px)

PairsRow — takes 2–4 <PairTile/> children with title + subtitle + href