Steps

apps/www/src/sections/Steps.astro · 29 lines · group Features & lists

Steps — a numbered how-it-works list (<Step title description />). The design comes from the older sites, taken into the shared library as it was (Kirill, 2026-08-24): circle number badges, heading on the left. Numbering is automatic (CSS counter).

In the fleet

Used on 1 site built with this engine.

Samples 1

sample

From the box to the first reading

About an hour, most of it walking to the field.

Mount
One bolt on a standard post, antenna up.
Scan
The code on the housing pairs the station with the farm.
Set the rules
Pick the thresholds that matter for this crop.
Forget it
The next thing you hear from it is an alert.

MDX of this sample

<Steps title="From the box to the first reading" description="About an hour, most of it walking to the field.">
  <Step title="Mount" description="One bolt on a standard post, antenna up." />
  <Step title="Scan" description="The code on the housing pairs the station with the farm." />
  <Step title="Set the rules" description="Pick the thresholds that matter for this crop." />
  <Step title="Forget it" description="The next thing you hear from it is an alert." />
</Steps>

Props

Name	Type	Default
id	string
title	string
description	string
columns	2 \| 3 \| 4	4
theme	Theme	'light'

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

---
/**
 * Steps — a numbered how-it-works list (<Step title description />).
 * The design comes from the older sites, taken into the shared library as it
 * was (Kirill, 2026-08-24): circle number badges, heading on the left.
 * Numbering is automatic (CSS counter).
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  columns?: 2 | 3 | 4;
  theme?: Theme;
}
const { id, title, description, columns = 4, theme = 'light' } = Astro.props;
const cols = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-2 lg:grid-cols-3', 4: 'sm:grid-cols-2 lg:grid-cols-4' }[columns];
---

<Section id={id} theme={theme} heading="sr">
  {title && <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">{title}</h2>}
  {description && <p class="mt-4 max-w-3xl text-lg text-gray-500 [.bg-stone-800_&]:text-primary-100">{description}</p>}
  <ol class:list={['mt-12 grid list-none grid-cols-1 gap-x-8 gap-y-10 [counter-reset:step]', cols]}>
    <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.