# Processes, timelines, and cycles

> Match sequential information to horizontal, chronological, and circular templates.

---

LLMS index: [llms.txt](/llms.txt)

---

Sequence templates answer different questions. A horizontal process emphasizes
ordered handoffs, a timeline emphasizes chronology, and a cycle emphasizes that
the last stage feeds the first again. The surrounding prose must state which
relationship matters.

## Horizontal process {#horizontal-process}

Use `list-row-simple-horizontal-arrow` for a short left-to-right sequence. On
narrow screens, keep labels brief and verify that the rendered order remains
clear.

```go-html-template
{{< infographic >}}
infographic list-row-simple-horizontal-arrow
data
  title Documentation delivery
  items
    - label Plan
      desc Define the reader and outcome
    - label Write
      desc Draft the smallest complete page
    - label Review
      desc Check facts, language, and links
    - label Ship
      desc Build and verify the hosted route
{{< /infographic >}}
```

The process moves from planning through writing and review to a separately
verified hosted result.

<!-- prettier-ignore-start -->

<div id="td-infographic-0b567d638a25144a1b79ea8e640150ca-0" class="td-infographic td-max-width-on-larger-screens"
  data-td-infographic data-height="auto">
  <div id="td-infographic-0b567d638a25144a1b79ea8e640150ca-0-canvas" data-td-infographic-canvas></div>
  <script type="application/json" data-td-infographic-syntax>"infographic list-row-simple-horizontal-arrow\ndata\n  title Documentation delivery\n  items\n    - label Plan\n      desc Define the reader and outcome\n    - label Write\n      desc Draft the smallest complete page\n    - label Review\n      desc Check facts, language, and links\n    - label Ship\n      desc Build and verify the hosted route"</script>
</div>


<!-- prettier-ignore-end -->

## Chronological timeline {#chronological-timeline}

Use `sequence-timeline-simple` when time or release order is the primary
relationship.

```go-html-template
{{< infographic >}}
infographic sequence-timeline-simple
data
  title Release evidence
  items
    - label Source ready
      desc Scope, copy, attribution, and review are complete
    - label Checks pass
      desc Theme and project-site suites pass
    - label Tag public
      desc The immutable module version resolves
    - label Site deployed
      desc Production routes pass smoke tests
{{< /infographic >}}
```

The timeline separates four evidence points; a passing test does not skip the
public-tag or deployment stages.

<!-- prettier-ignore-start -->

<div id="td-infographic-0b567d638a25144a1b79ea8e640150ca-1" class="td-infographic td-max-width-on-larger-screens"
  data-td-infographic data-height="auto">
  <div id="td-infographic-0b567d638a25144a1b79ea8e640150ca-1-canvas" data-td-infographic-canvas></div>
  <script type="application/json" data-td-infographic-syntax>"infographic sequence-timeline-simple\ndata\n  title Release evidence\n  items\n    - label Source ready\n      desc Scope, copy, attribution, and review are complete\n    - label Checks pass\n      desc Theme and project-site suites pass\n    - label Tag public\n      desc The immutable module version resolves\n    - label Site deployed\n      desc Production routes pass smoke tests"</script>
</div>


<!-- prettier-ignore-end -->

## Continuous cycle {#continuous-cycle}

Use `sequence-circular-simple` only when the final item genuinely returns work
to the first. Do not use a cycle for a process that has a terminal state.

```go-html-template
{{< infographic height="480px" >}}
infographic sequence-circular-simple
data
  title Documentation maintenance loop
  items
    - label Observe
      desc Collect support and search signals
    - label Prioritize
      desc Select a reader problem
    - label Improve
      desc Update content and examples
    - label Verify
      desc Test links, rendering, and outcomes
{{< /infographic >}}
```

Verification produces new observations, so the maintenance loop returns to its
first stage.

<!-- prettier-ignore-start -->

<div id="td-infographic-0b567d638a25144a1b79ea8e640150ca-2" class="td-infographic td-max-width-on-larger-screens"
  data-td-infographic data-height="480px">
  <div id="td-infographic-0b567d638a25144a1b79ea8e640150ca-2-canvas" data-td-infographic-canvas style="height: 480px"></div>
  <script type="application/json" data-td-infographic-syntax>"infographic sequence-circular-simple\ndata\n  title Documentation maintenance loop\n  items\n    - label Observe\n      desc Collect support and search signals\n    - label Prioritize\n      desc Select a reader problem\n    - label Improve\n      desc Update content and examples\n    - label Verify\n      desc Test links, rendering, and outcomes"</script>
</div>


<!-- prettier-ignore-end -->

## Selection rule {#selection-rule}

If removing the arrows or time axis would not change the meaning, use a native
list or cards instead. Infographics should reveal a relationship, not decorate
an otherwise unrelated set of statements.