Marketing

Steps

A numbered vertical list with a connector line, for a landing page's how-it-works section; three or four steps.

Examples

Three steps

  1. Connect your GitHub

    Install the GitHub App and sign the worker in with one command.

  2. Choose a sink and a schedule

    Pick git, local or S3 storage and how often to run.

  3. Monitor and relax

    Watch runs in the dashboard and ask the observatory what changed.

<Steps steps={[
  { title: "Connect your GitHub", body: "Install the GitHub App and sign the worker in with one command.", done: true },
  { title: "Choose a sink and a schedule", body: "Pick git, local or S3 storage and how often to run." },
  { title: "Monitor and relax", body: "Watch runs in the dashboard and ask the observatory what changed." },
]} />

Guidelines

  • Each step is a display-sm title and one sentence. Mark completed steps with done to fill the number.
  • Not for wizards inside the app; use a segmented control or a plain form there.

Props

PropTypeWhat it does
steps{ title; body?; done? }[]Ordered static copy.