Step

apps/www/src/sections/Step.astro · 25 lines · group Features & lists

Step — one item of <Steps>: the numbered circle, a title and a description. The number is automatic. Parent: <Steps> only. Children: optional markdown between the tags, rendered under the description.

In the fleet

Used on 1 site built with this engine.

Samples 1

sampleshown inside <Steps>

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
title	string	yes		the step heading
description	string			one or two sentences

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

---
/**
 * Step — one item of <Steps>: the numbered circle, a title and a description.
 *   The number is automatic.
 *
 * Parent: <Steps> only.
 * Children: optional markdown between the tags, rendered under the
 *   description.
 */
interface Props {
  /** the step heading */
  title: string;
  /** one or two sentences */
  description?: string;
}
const { title, description } = Astro.props;
---

<li class="relative [counter-increment:step]">
  <span class="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-r from-primary-500 to-primary-alt-600 text-lg font-bold text-white before:content-[counter(step)]"></span>
  <h3 class="mt-6 text-lg font-medium text-gray-900 [.bg-stone-800_&]:text-white">{title}</h3>
  {description && <p class="mt-2 text-base text-gray-500 [.bg-stone-800_&]:text-gray-300">{description}</p>}
  <slot />
</li>

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.