Workflow

apps/www/src/sections/Workflow.astro · 23 lines · group Features & lists

Workflow — a horizontal process chain (<WorkflowStep title />): numbered circles joined by arrows on a dark band. The design comes from the older SchemaSection, taken into the shared library as is (Kirill, 2026-08-24). Numbering and the arrows are automatic (CSS counter / :last-child).

In the fleet

Used on 1 site built with this engine.

Samples 1

sample

How a reading reaches you

Station
Gateway
Cloud
You

MDX of this sample

<Workflow title="How a reading reaches you" description="Four hops, none of which need your attention.">
  <WorkflowStep title="Station" description="Measures inside the crop, every minute." />
  <WorkflowStep title="Gateway" description="Collects, buffers and forwards." />
  <WorkflowStep title="Cloud" description="Stores, compares and predicts." />
  <WorkflowStep title="You" description="An alert, only when it changes a decision." />
</Workflow>

Props

Name	Type	Required	Default	Description
id	string
title	string

Source apps/www/src/sections/Workflow.astro @ gitt.one

---
/**
 * Workflow — a horizontal process chain (<WorkflowStep title />): numbered
 * circles joined by arrows on a dark band. The design comes from the older
 * SchemaSection, taken into the shared library as is (Kirill, 2026-08-24). Numbering and the
 * arrows are automatic (CSS counter / :last-child).
 */
interface Props {
  id?: string;
  title?: string;
}
const { id, title } = Astro.props;
---

<section id={id} class="bg-stone-800">
  {title && (
    <h2 class="m-0 px-4 py-4 text-center text-3xl font-extrabold tracking-tight text-white sm:px-6 sm:py-6 sm:text-4xl lg:px-8">{title}</h2>
  )}
  <ol class="grid list-none [counter-reset:wf] divide-y divide-stone-800 border border-l-0 border-r-0 border-stone-800 bg-stone-800 sm:grid-cols-3 md:divide-y-0 lg:grid-cols-6">
    <slot />
  </ol>
</section>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.