Steps
apps/www/src/sections/Steps.astro · 40 lines · group Features & lists
Steps — a numbered how-it-works list: circle badges numbered automatically, a title and a short text under each (<Step>). Use for: a process in three to six steps — "how it works", "how to order", onboarding. Not for: a horizontal chain of one-word stages on a dark band (<Workflow>); unordered points (<FeatureList>). Children: <Step> tags only; the numbering follows their order. Layout: `columns` 2–4 (default 4). The heading is left-aligned by design (this block came into the library as it was).
In the fleet
Used on 1 site built with this engine.
Samples 1
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 | Required | Default | Description |
|---|---|---|---|---|
| id | string | anchor of the section | ||
| title | string | the section heading | ||
| description | string | a paragraph under the heading | ||
| columns | 2 | 3 | 4 | 4 | steps per row on desktop | |
| theme | 'light' | 'muted' | 'dark' | 'brand' | 'brand-dark' | 'light' | background of the section |
Source apps/www/src/sections/Steps.astro @ gitt.one
---
/**
* Steps — a numbered how-it-works list: circle badges numbered automatically,
* a title and a short text under each (<Step>).
*
* Use for: a process in three to six steps — "how it works", "how to order",
* onboarding.
* Not for: a horizontal chain of one-word stages on a dark band (<Workflow>);
* unordered points (<FeatureList>).
* Children: <Step> tags only; the numbering follows their order.
* Layout: `columns` 2–4 (default 4). The heading is left-aligned by design
* (this block came into the library as it was).
*/
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
interface Props {
/** anchor of the section */
id?: string;
/** the section heading */
title?: string;
/** a paragraph under the heading */
description?: string;
/** steps per row on desktop */
columns?: 2 | 3 | 4;
/** background of the section */
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@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.