WorkflowStep

apps/www/src/sections/WorkflowStep.astro · 40 lines · group Features & lists

In the fleet

Used on 1 site built with this engine.

Samples 1

sampleshown inside <Workflow>

How a reading reaches you

Station
Gateway
Cloud
You

MDX of this sample

<Workflow title="How a reading reaches you" description="Four hops, none of which need your attention.">
  <WorkflowStep title="Station" description="Measures inside the crop, every minute." />
  <WorkflowStep title="Gateway" description="Collects, buffers and forwards." />
  <WorkflowStep title="Cloud" description="Stores, compares and predicts." />
  <WorkflowStep title="You" description="An alert, only when it changes a decision." />
</Workflow>

Props

Name	Type	Required	Default	Description
title	string	yes

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

---
/** WorkflowStep — one link of the <Workflow> chain. */
interface Props {
  title: string;
}
const { title } = Astro.props;
---

<li class="relative [counter-increment:wf] md:flex md:flex-1">
  <div class="flex items-center px-6 py-4 text-sm font-medium">
    <span class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-primary-500">
      <span class="font-bold text-white before:content-[counter(wf)]"></span>
    </span>
    <span class="ml-4 text-sm font-medium text-white">{title}</span>
  </div>
  <div class="wf-arrow absolute right-0 top-0 h-full w-5" aria-hidden="true">
    <svg class="h-full w-full text-white" viewBox="0 0 22 80" fill="none" preserveAspectRatio="none">
      <path d="M0 -2L20 40L0 82" vector-effect="non-scaling-stroke" stroke="currentcolor" stroke-linejoin="round" />
    </svg>
  </div>
</li>

<style>
  /* the arrow appears between steps only: never below md, never after the
     last step, and (below lg, a row is 3 steps) never at a row's end */
  .wf-arrow {
    display: none;
  }
  @media (min-width: 768px) {
    li:not(:last-child) > .wf-arrow {
      display: block;
    }
  }
  @media (min-width: 768px) and (max-width: 1023.9px) {
    li:nth-child(3n):not(:last-child) > .wf-arrow {
      display: none;
    }
  }
</style>

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.