Step

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

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
description	string

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

---
/** Step — one item of <Steps>: the circle badge numbers itself. */
interface Props {
  title: string;
  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@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.